/* The plank of a shelf, and the manila binders and folders are made of. */
:root {
  --plank: light-dark(color-mix(in oklab, oklch(48% 0.01 60), oklch(95.5% 0.017 82) 55%), oklch(40% 0.022 250));
  /* The stock colour is the desk's own: beige by day; by night the slate of the night, a step
     lighter than what it lies on, so a binder or a folder reads as a thing on the page in both. */
  --manila: light-dark(color-mix(in oklab, oklch(95.5% 0.017 82), oklch(48% 0.01 60) 7%), oklch(31% 0.022 248));
  /* The label in a binder's pocket: paper by day, a pale card by night. */
  --label: light-dark(var(--paper), oklch(47% 0.02 250));
  /* What every small thing on the desk gets: a hairline edge and the same soft shadow as a page. */
  --thing-shadow: 0 0 0 1px var(--rule), 0 6px 16px -12px light-dark(oklch(var(--lch-shade) / 0.35), oklch(var(--lch-night) / 0.55));
}

@layer components {
  /* Binders and folders are things on the desk as the pages are: square-cornered, the same
     hairline edge, the same soft shadow, matte board in the desk's beige, or with a colour chosen
     in its Edit (`--tint`, one of the nine a writer chooses words in) as a wash over it. Everything
     has the same label under it: its name, and on some pages one quiet line more. */
  .binder-thing, .folder-thing {
    --wash: color-mix(in oklab, var(--tint, var(--manila)), var(--manila) 76%);
    display: grid; align-content: start; gap: 0.45rem; text-decoration: none; color: var(--ink);
  }

  /* A binder, as it stands on a shelf: its spine, a flat rectangle of the same stuff and colour as a
     folder, and up its lower half a paper label with the squiggle drawn down it, the right margin's
     own wave in its own proportions (12px across, a 24px period, at the right margin's strength),
     scaled to the spine. A name written down a spine cannot be read on a screen, so it sits under
     the binder like everything's. */
  /* One shape wherever a binder is met: its width is always the same share of its height, so only
     the height is ever set. */
  .binder-thing { --spine-ratio: 0.36; --spine-h: 9.4rem; --spine-w: calc(var(--spine-h) * var(--spine-ratio)); width: var(--spine-w); justify-items: center; }
  .binder-spine {
    position: relative; display: grid; justify-items: center; align-content: end;
    width: var(--spine-w); height: var(--spine-h); padding-block-end: calc(var(--spine-w) * 0.18);
    border-radius: 2px; box-shadow: var(--thing-shadow); background: var(--wash);
    transition: transform 140ms ease-out;
  }
  .binder-thing:hover .binder-spine { transform: translateY(-4px); }
  .spine-pocket { display: block; position: relative; width: calc(var(--spine-w) * 0.5); height: calc(var(--spine-h) * 0.5); border-radius: 1px; background: var(--label); box-shadow: 0 0 0 1px var(--rule); }
  .spine-squiggle {
    --across: calc(var(--spine-w) * 0.22);
    position: absolute; inset: calc(var(--across) * 0.5) 0; background: var(--ink-soft); opacity: 0.6;
    -webkit-mask: var(--wave-y) repeat-y 50% 0 / var(--across) calc(var(--across) * 2); mask: var(--wave-y) repeat-y 50% 0 / var(--across) calc(var(--across) * 2);
  }
  .spine-new { position: absolute; top: -0.32rem; right: -0.32rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); }

  /* The one label: the name, then perhaps a quiet line. */
  .thing-label { display: grid; gap: 0.1rem; width: 100%; min-width: 0; }
  .thing-name { font-size: 0.72rem; line-height: 1.25; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .thing-detail { font-size: 0.66rem; line-height: 1.3; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .binder-thing .thing-label { text-align: center; }
  .binder-thing .thing-name { white-space: normal; overflow-wrap: normal; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 0.58rem; }

  /* A shelf, drawn: binders standing side by side on a plank, touching, as binders stand; their
     names under the plank; the + where the next binder would stand. */
  .shelf-drawing { --spine-h: 9.4rem; }
  .shelf-row { position: relative; display: flex; align-items: start; width: max-content; min-width: 100%; padding-inline: 0.5rem; }
  .shelf-row > .binder-thing { row-gap: 0.95rem; }
  .shelf-row::before {
    content: ""; position: absolute; left: 0; right: 0; top: calc(var(--spine-h) - 0.05rem); height: 0.5rem; border-radius: 2px;
    background: var(--plank); box-shadow: 0 6px 10px -8px oklch(var(--lch-shade) / 0.5);
  }
  .shelf-row > .add-tile { margin-inline-start: 0.7rem; }
  /* On a shelf's own page: bigger, a little apart, with what is in each under its name. */
  .shelf-drawing.is-large { --spine-h: 10.5rem; }
  .shelf-drawing.is-large .shelf-row { gap: 1.4rem; }
  .binder-thing.is-large { --spine-h: 10.5rem; width: 6.6rem; }
  .binder-thing.is-large .thing-name { font-size: 0.74rem; }
  .binder-thing.is-large .thing-detail { white-space: normal; text-align: center; }

  /* A folder inside a binder: a plain folder standing up, its tab at the top left, in the desk's
     beige or its colour as a wash. */
  .folder-thing { width: 7.4rem; }
  .folder {
    position: relative; display: block; aspect-ratio: 4 / 5; margin-block-start: 0.6rem; overflow: visible;
    border-radius: 0 2px 2px 2px; background: var(--wash); box-shadow: var(--thing-shadow);
    transition: transform 140ms ease-out;
  }
  .folder-tab { position: absolute; top: -0.6rem; left: 0; width: 45%; height: 0.65rem; border-radius: 2px 2px 0 0; background: inherit; box-shadow: 0 0 0 1px var(--rule); clip-path: inset(-2px -2px 0 -2px); }
  .folder-thing:hover .folder { transform: translateY(-3px); }
  .folder-thing.is-drop .folder { outline: 2px dashed var(--ink-soft); outline-offset: 3px; }

  /* The row folders stand in, the + at the top left of where the next would be. */
  .folders { display: flex; flex-wrap: wrap; gap: 1.1rem 1rem; align-items: start; }
  .folders > .add-tile { margin-block-start: 0.6rem; }

  /* A binder's colour, chosen in its Edit: nine discs. */
  .field.colour-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; border: 0; padding: 0; margin: 0; }
  .field.colour-choices legend { width: 100%; margin-block-end: 0.35rem; padding: 0; }
  .colour-choice { display: grid; }
  /* Specific enough to beat the form's rule for inputs (home.css), which loads after this file. */
  .field.colour-choices .colour-choice input[type=radio] { appearance: none; width: 1.5rem; height: 1.5rem; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: color-mix(in oklab, var(--tint, var(--manila)), var(--manila) 76%); box-shadow: 0 0 0 1px var(--rule); }
  .field.colour-choices .colour-choice input[type=radio]:checked { box-shadow: 0 0 0 1px var(--rule), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
  .field.colour-choices .colour-choice input[type=radio]:focus { outline: none; box-shadow: 0 0 0 1px var(--rule), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent); }

  @media (max-width: 60ch) {
    .folders { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0.3rem 16px 0.6rem; scroll-padding-inline: 16px; scroll-snap-type: x proximity; }
    .folders::-webkit-scrollbar { display: none; }
    .folders > * { flex: none; scroll-snap-align: start; }
    .folder-thing { width: 6.4rem; }
    .shelf-drawing.is-large { overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  }
}

/* The binder's face (BinderFace): doors as a row of links out, next dates and standing decisions as
   lines, each in ink; a late date and whose a to-do is are chips, as on a to-do's row. */
@layer components {
  .doors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
  .door { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.88rem; color: var(--ink); text-decoration: none; background: var(--paper); }
  .door:hover { border-color: var(--ink-soft); }
  .door::after { content: " ↗"; color: var(--ink-soft); }
  .dates, .decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; max-width: calc(var(--measure) + 8ch); }
  .date-line, .decision-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; font-size: 0.95rem; }
  .date-day { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 14ch; }
  .date-title, .decision-title { color: var(--ink); text-decoration: none; }
  .date-title:hover, .decision-title:hover { text-decoration: underline; text-underline-offset: 0.15em; }
  .decision-words { color: var(--ink-soft); }
  .field.face-choices, .field.door-rows { display: grid; gap: 0.4rem; border: 0; padding: 0; margin: 0; }
  .field.face-choices legend, .field.door-rows legend { padding: 0; margin-block-end: 0.1rem; }
  .face-choices .arrange-keep input[type=checkbox] { width: auto; flex: none; margin: 0; }
  .door-row { display: grid; grid-template-columns: minmax(8ch, 1fr) minmax(12ch, 2fr); gap: 0.5rem; }
  @media (max-width: 60ch) { .door-row { grid-template-columns: 1fr; } }
}