/* The stylesheet of the pages of mono-cloud-storage (MONO_FRAMEWORK.md
   B18, D13). The look is the Haiku theme of the desktop window of the
   app (mono-ui Theme::haiku, D13 WD5 A): a grey page, bevel buttons with
   a gradient, sunken white fields and lists, boxes with a groove and the
   title in the line, and the yellow tab of the app. A form of two fields
   or more is a grid of labels and fields (WD2 A); a form of one field is
   a toolbar form in one line. The buttons in a row of a list show their
   icon and their text, and only the icon on a narrow screen (WD4 C). No
   table: each row is a flex box that wraps, so a narrow screen shows no
   horizontal scroll. */

:root {
  --page: #d8d8d8;
  --bar: #e8e8e8;
  --panel: #ffffff;
  --dark: #6e6e6e;
  --mid: #989898;
  --border: #8c8c8c;
  --ring: #7a7a7a;
  --soft-line: #e2e2e2;
  --text: #1b1b1b;
  --muted: #545454;
  --tab: #ffcb00;
  --tab-line: #9c7c00;
  --row-hover: #fff6dc;
  --row-cursor: #ffcb66;
  --focus: #2f7fd8;
  --alert: #a3001b;
  --alert-back: #fff1f1;
  --note: #ffffd8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 13px/1.45 "Noto Sans", "DejaVu Sans", "Segoe UI", sans-serif;
}

a {
  color: #1d4f91;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* A text that a screen reader reads and the screen does not show. */

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* An icon of the sprite (ui/icon): 16 px, beside the text. */

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  vertical-align: -3px;
}

/* ----- The header: the tab of the app, the admin link, the account menu ----- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 16px;
  min-height: 36px;
  padding: 6px 16px 0;
  background: var(--bar);
  border-bottom: 1px solid var(--border);
}

.bar .app {
  background: var(--tab);
  border: 1px solid var(--tab-line);
  border-bottom: none;
  padding: 3px 12px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

.bar .account {
  display: flex;
  align-items: center;
  gap: 4px 14px;
  margin-left: auto;
  padding-bottom: 4px;
}

.bar .bar-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bar .menu-button {
  font-weight: bold;
}

.bar .caret {
  font-weight: normal;
  font-size: 10px;
}

/* The account menu: an HTML popover, which the browser closes on a click
   outside it and on Escape. It sits under the right end of the header. */

.menu[popover] {
  position: fixed;
  inset: 40px 12px auto auto;
  margin: 0;
  padding: 3px 0;
  min-width: 230px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.menu .who-line {
  display: flex;
  flex-direction: column;
  padding: 4px 12px 6px;
}

.menu .who-line small {
  color: var(--muted);
}

.menu a,
.menu button.item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 4px 12px;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  font: inherit;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.menu a:hover,
.menu button.item:hover,
.menu a:focus-visible,
.menu button.item:focus-visible {
  background: var(--row-cursor);
  outline: none;
}

.menu hr {
  border: none;
  border-top: 1px solid var(--soft-line);
  margin: 3px 0;
}

.menu form {
  margin: 0;
}

/* ----- The content ----- */

.page {
  max-width: 980px;
  margin: 12px auto 32px;
  padding: 0 16px;
}

.page.narrow {
  max-width: 560px;
}

h1 {
  font-size: 16px;
  margin: 8px 0;
}

h2 {
  font-size: 14px;
  margin: 12px 0 6px;
}

.path ol {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.path li {
  overflow-wrap: anywhere;
}

.path li + li::before {
  content: "/";
  padding: 0 6px;
  color: var(--muted);
}

.path span[aria-current] {
  font-weight: bold;
}

/* A heading with its buttons at the right, as the title of a list. */

.heading,
.note-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 8px;
}

.heading h1,
.note-bar .title {
  margin: 0;
  overflow-wrap: anywhere;
}

.heading > button,
.heading > .button,
.note-bar .actions {
  margin-left: auto;
}

/* ----- A box: a groove, with its title in the line (Haiku BBox) ----- */

.box,
.panel {
  position: relative;
  margin: 18px 0 12px;
  padding: 16px 14px 12px;
  border: 1px solid var(--mid);
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff;
}

.box > .title,
.panel > h2:first-child {
  position: absolute;
  top: -0.8em;
  left: 8px;
  margin: 0;
  padding: 0 5px;
  background: var(--page);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
}

.box > p:first-of-type,
.panel > h2:first-child + p {
  margin-top: 0;
}

/* ----- The controls: Haiku bevel buttons and sunken fields ----- */

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 10px;
  font: inherit;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(#fcfcfc, #dcdcdc);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: inset 1px 1px 0 #fff;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: linear-gradient(#ffffff, #e6e6e6);
}

/* A held button: the darker face, no white line, the content 1 px down and
   right, as in the desktop window. */

button:active,
.button:active {
  background: linear-gradient(#c8c8c8, #e4e4e4);
  box-shadow: none;
  padding: 3px 9px 1px 11px;
}

/* The default button of a form (the one Enter presses): a ring outside
   its border. */

button.default {
  margin: 2px;
  box-shadow: inset 1px 1px 0 #fff, 0 0 0 2px var(--ring);
}

button.default:active {
  box-shadow: 0 0 0 2px var(--ring);
}

button.danger {
  color: var(--alert);
}

button:disabled {
  color: #8c8c8c;
  border-color: #b4b4b4;
  background: #ececec;
  box-shadow: none;
  cursor: default;
}

input,
select {
  min-width: 0;
  max-width: 100%;
  min-height: 24px;
  padding: 2px 6px;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--dark);
  border-radius: 0;
  box-shadow: inset 1px 1px 0 var(--mid);
}

input:focus,
select:focus {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

input[readonly] {
  background: #f4f4f4;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  box-shadow: none;
  accent-color: var(--focus);
}

/* ----- Forms ----- */

/* A grid form (WD2 A): the labels right-aligned in one column, the fields
   in a second column of one width, a hint under its field, and the
   buttons at the bottom right. One column on a narrow screen. */

.grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 24rem);
  gap: 6px 8px;
  align-items: center;
}

.grid > label,
.grid > .label {
  text-align: right;
}

.grid > label.check {
  text-align: left;
}

.grid > select,
.grid > .unit {
  justify-self: start;
}

.grid > .value {
  overflow-wrap: anywhere;
}

.grid > .hint,
.grid > .check {
  grid-column: 2;
  margin: -2px 0 2px;
}

.grid > .hint {
  font-size: 12px;
}

.grid .unit {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.grid .buttons {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.grid .buttons > a {
  margin-right: auto;
}

@media (max-width: 520px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }

  .grid > label,
  .grid > .label {
    text-align: left;
    margin-top: 6px;
  }

  .grid > .hint,
  .grid > .check {
    grid-column: 1;
  }
}

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

.check input {
  margin-top: 2px;
}

/* A group of radio buttons in a grid form (B52): one choice on each line,
   and the label of the group at the level of the first choice. */

.choices {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.grid > .label.top {
  align-self: start;
  margin-top: 1px;
}

/* A toolbar form (one field and its button) and a row of tools: one line
   that wraps. */

form.add,
form.inline,
.inline,
.tools,
.links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

form.add,
.tools,
.links {
  margin: 0 0 10px;
}

.tools form.add {
  margin: 0;
}

.tools .separator {
  width: 1px;
  align-self: stretch;
  margin: 0 4px;
  background: var(--mid);
  box-shadow: 1px 0 0 #fff;
}

/* An inline form in a row of a list: under the row, with a soft line. */

.inline {
  flex-basis: 100%;
  padding: 6px 0 2px;
}

.row > .grid.inline {
  display: grid;
  padding: 8px 4px 4px;
  margin-top: 4px;
  border-top: 1px dotted var(--soft-line);
}

.inline .hint {
  flex-basis: 100%;
  font-size: 12px;
}

/* ----- Messages ----- */

.problem {
  border: 1px solid var(--alert);
  background: var(--alert-back);
  color: var(--alert);
  padding: 4px 8px;
  margin: 0 0 10px;
}

.problem-text,
.error {
  color: var(--alert);
}

.notice {
  background: var(--note);
  border: 1px solid var(--border);
  padding: 4px 12px;
  margin: 0 0 10px;
}

.hint,
.empty {
  color: var(--muted);
}

.empty {
  padding: 6px 8px;
}

.warning p {
  margin: 2px 0 4px;
}

.told input.link {
  display: block;
  width: 100%;
  margin-top: 2px;
}

/* ----- Lists: a sunken white well of rows that wrap ----- */

.list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--mid);
  box-shadow: inset 1px 1px 0 var(--dark);
}

.list:not(:has(> li)) {
  display: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  padding: 4px 8px;
  border-top: 1px solid var(--soft-line);
}

.row:first-child {
  border-top: none;
}

.row:hover {
  background: var(--row-hover);
}

.row .name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 14em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.row .name > a {
  min-width: 0;
}

.row.dir .name a {
  font-weight: bold;
}

.row .meta {
  color: var(--muted);
  font-size: 12px;
}

.row .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

/* The buttons in a row show their icon and their text; on a narrow screen
   only the icon, with the text for a screen reader and in the tooltip
   (WD4 C). */

@media (max-width: 620px) {
  .row .actions .text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .row .actions button:has(.text),
  .row .actions .button:has(.text) {
    min-width: 28px;
    padding: 2px 5px;
  }

  .row .actions button:has(.text):active,
  .row .actions .button:has(.text):active {
    padding: 3px 4px 1px 6px;
  }
}

.row .tag {
  margin-left: 6px;
  padding: 0 4px;
  font-size: 11px;
  font-style: normal;
  background: var(--tab);
  border: 1px solid var(--tab-line);
}

.row .tag.off {
  background: var(--alert-back);
  border-color: var(--alert);
}

.uploads progress {
  width: 8em;
}

/* A person on the admin panel: a second line of the use, the inline
   forms, and the libraries of the person below. */

.row .line {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  flex-basis: 100%;
}

.sublist {
  flex-basis: 100%;
  list-style: none;
  margin: 2px 0 2px 12px;
  padding: 0;
}

.sublist li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  padding: 1px 0;
  border-top: 1px dotted var(--soft-line);
}

.sublist .name {
  flex: 1 1 10em;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ----- The upload area: the file input stays focusable, the label shows it ----- */

live-upload {
  display: block;
}

live-upload.dragging .entries {
  outline: 2px dashed var(--focus);
  outline-offset: 2px;
}

.picker {
  position: relative;
}

.picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.picker:focus-within .button {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ----- The page of a note (B20) ----- */

.page.note-page {
  max-width: none;
}

.note-bar .meta {
  color: var(--muted);
  font-size: 12px;
}

.note-bar .actions,
.conflict .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.conflict p {
  margin: 2px 0 6px;
}

.note-editor {
  background: var(--panel);
  border: 1px solid var(--mid);
  box-shadow: inset 1px 1px 0 var(--dark);
}

.note-editor live-editor {
  display: block;
  width: 100%;
  height: calc(100vh - 190px);
  min-height: 320px;
}

.note-editor live-editor textarea {
  width: 100%;
  height: 100%;
  border: none;
  font: 13px/1.4 "DejaVu Sans Mono", monospace;
}

pre.note-text {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--mid);
  box-shadow: inset 1px 1px 0 var(--dark);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.4 "DejaVu Sans Mono", monospace;
}

.newer h2 {
  margin: 4px 0;
}

/* ----- The tree of a move (B22) ----- */

.inline.move {
  display: block;
  padding: 4px 0 2px;
}

.tree {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}

.tree.top {
  padding-left: 0;
  margin: 2px 0 6px;
}

.tree .node {
  padding: 1px 0;
  overflow-wrap: anywhere;
}

.tree .toggle {
  width: 2em;
  padding: 0;
}

.tree .toggle:active {
  padding: 1px 0 0 1px;
}

.tree .toggle-space {
  display: inline-block;
  width: 2em;
}

.tree .pick {
  justify-content: flex-start;
  max-width: calc(100% - 3em);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.tree .pick:hover {
  border-color: var(--border);
}

.tree .pick.picked {
  background: var(--row-cursor);
  border-color: var(--tab-line);
  font-weight: bold;
}

.tree .here,
.tree .blocked {
  padding: 1px 10px;
  color: var(--muted);
}

.tree .meta {
  font-size: 12px;
}

.move .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}

/* ----- The server state ----- */

.facts {
  margin: 0 0 6px;
  padding-left: 18px;
}