@layer components {
  /* Home is one page on the desk with a margin, as a binder's page is drawn (stack.css): on the page
     what is the reader's to do and where to go; in the margin, behind the right squiggle, what is new
     and what happened, cut by a squiggle, and the Bin at its foot. At 1080px and under the margin is
     the layer a paper's is (margin_layer.css). */
  .home-margin .activity-title { font-size: 1.05em; margin-block-end: 0.6rem; }
  .home-margin .binder-cut { margin-block: calc(var(--block-space) * 1.4) calc(var(--block-space) * 0.6); }
  .home-margin .new-binders { gap: 1rem; }
  .home-margin .new-things { font-size: 0.8rem; }
  .home-margin .new-things li { align-items: start; }
  .home-margin .new-things .timeline-who { width: 1.5rem; height: 1.5rem; font-size: 0.55rem; flex: none; }
  .home-margin .new-what { display: grid; gap: 0.15rem; }
  .home-margin .timeline-day:first-child { margin-block-start: 0.4rem; }
  .home-margin .timeline.is-compact .timeline-item { row-gap: 0.15rem; }
  /* See more that carries on the day above goes on under it without the day's tag again. */
  .timeline-goes-on > .timeline > .timeline-day:first-child { display: none; }
  .timeline-more:has(> .timeline-goes-on) { margin-block-start: 0; }
  /* With the margin out, what is new is in sight: the count on the squiggle is for when it is away. */
  html[data-margin=open] .home-paper .edge-count { display: none; }
  /* Assigned to you: a binder's name over its to-dos, each binder ruled off from the next. */
  .assigned-binder { padding-block: 0.5rem; }
  .assigned-binder + .assigned-binder { border-block-start: 1px solid var(--rule); }
  .assigned-name { font-size: 0.78rem; font-weight: 700; margin: 0 0 0.2rem; }
  .assigned-name a { color: var(--ink-soft); text-decoration: none; }
  .assigned-name a:hover { color: var(--ink); }
  .assigned > .screen { padding-block: 0.5rem; }
  .disk.is-on-paper { padding: 0.6rem 0 0; background: none; box-shadow: none; }
  .disk.is-on-paper + .disk.is-on-paper { margin-block-start: 1rem; }
  .home-paper .activity-title { margin-block-end: var(--block-space); }

  .works.compact { display: grid; gap: 0.4em; font-size: 0.85rem; }
  .work-state { font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
}

@layer components {
  /* Adding, as Basecamp draws it: a dashed, rounded square with a + in it, and no words, standing at
     the top left of where the new thing would be. One size wherever it is; a smaller one in a list,
     where the next line's box would be. */
  .add-tile {
    position: relative; display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; padding: 0;
    border: 1.5px dashed color-mix(in oklab, var(--ink-soft), transparent 30%); border-radius: 12px; background: transparent;
    color: var(--ink-soft); font-size: 1.6rem; font-weight: 300; line-height: 1; text-decoration: none; cursor: pointer;
  }
  .add-tile:hover, .add-tile:focus-visible { color: var(--ink); border-color: var(--ink-soft); }
  .add-tile.is-small { width: 2.9rem; height: 2.9rem; border-radius: 12px; font-size: 1.6rem; }
  .add-tile.is-row { width: 1.35rem; height: 1.35rem; border-radius: 6px; font-size: 1rem; border-width: 1.2px; }
  .add-slot { display: block; align-self: start; justify-self: start; }
  .new-choice { display: flex !important; align-items: baseline; gap: 0.6rem; }
  .new-plus { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 1.2px dashed var(--ink-soft); border-radius: 5px; font-size: 0.85rem; line-height: 1; color: var(--ink-soft); align-self: center; }

  /* Home's top: New and "…" at its right, as a shelf's and a binder's. */
  .home-top { margin-block-end: calc(var(--block-space) * 0.5); }
  /* Edit Home: each section kept or left off, moved up or down. */
  .arrange-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
  .arrange-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.6rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
  .arrange-keep { display: flex; align-items: center; gap: 0.6rem; flex: 1; }
  .arrange-moves { display: flex; gap: 0.25rem; }
  .arrange-move { width: 1.8rem; height: 1.6rem; border-radius: 5px; color: var(--ink-soft); }
  .arrange-move:hover { background: var(--desk); color: var(--ink); }
  .arrange-item:first-child .arrange-move:first-child, .arrange-item:last-child .arrange-move:last-child { visibility: hidden; }

  /* New, at the top right, as in Basecamp. */
  .new { position: relative; }
  .new-button {
    display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.95em; border-radius: 999px;
    background: var(--accent-soft); color: var(--on-accent); font-weight: 700; font-size: 0.82rem;
  }
  .new-button:hover, .new-button[aria-expanded=true] { background: var(--accent); }
  .new-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 14rem; padding: 0.35rem;
    background: var(--raised); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 12px 30px -12px oklch(var(--lch-shade) / 0.45);
    display: grid;
  }
  .new-menu[hidden] { display: none; }
  .new-menu form { display: contents; }
  .new-choice { display: block; width: 100%; text-align: start; padding: 0.45rem 0.7rem; border-radius: 5px; text-decoration: none; color: var(--ink); font-size: 0.85rem; }
  .new-choice:hover { background: var(--desk); }
  .new-choice.is-chosen { font-weight: 700; }
  .new-menu.is-from-tile { right: auto; left: 0; }
  .new-lock { align-self: center; color: var(--ink-soft); }

  /* Forms, as plain as the rest of the paper. */
  .new-binder { display: grid; gap: 1.1rem; }
  .field { display: grid; gap: 0.35rem; }
  .field-label { font-size: 0.8rem; font-weight: 700; }
  .field-hint { font-weight: 400; color: var(--ink-soft); }
  .field input, .field textarea {
    width: 100%; padding: 0.5em 0.7em; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
    font: inherit; color: var(--ink); caret-color: var(--caret); resize: vertical;
  }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
  .form-actions { display: flex; gap: 0.6rem; align-items: center; }
  .form-error { color: var(--ink); font-weight: 700; font-size: 0.85rem; border-inline-start: 3px solid var(--ink); padding-inline-start: 0.6rem; }
}

@layer components {
  .home-views { display: flex; gap: 0.2rem; font-size: 0.8rem; }
  .home-view { padding: 0.15rem 0.65rem; border-radius: 999px; text-decoration: none; color: var(--ink-soft); }
  .home-view:hover { color: var(--ink); background: var(--paper); }
  .home-view.is-chosen { color: var(--ink); background: var(--raised); font-weight: 700; box-shadow: var(--shadow); }

  /* The tree: each binder, and its sheets indented under it with a hairline, like an outline on paper. */
  .tree { display: grid; gap: 1.1rem; padding: 1.4rem 1.6rem; background: var(--paper); box-shadow: var(--shadow); border-radius: 8px; }
  .tree-binder-name { font-weight: 700; text-decoration: none; }
  .tree-binder > ul { margin: 0.35rem 0 0 0.35rem; padding-inline-start: 1rem; border-inline-start: 1px solid var(--rule); display: grid; gap: 0.2rem; }
  .tree-sheet { font-size: 0.92rem; }
  .tree-sheet a, .tree-binder-name { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .tree-sheet a:hover, .tree-binder-name:hover { text-decoration: underline; }
  .tree-cards { margin: 0.15rem 0 0.3rem 0.2rem; display: grid; gap: 0.1rem; font-size: 0.8rem; }
  .tree-kind { display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; align-items: baseline; }
  .tree-kind-name { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
  .tree-card { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .tree-card.is-done { color: var(--ink-soft); text-decoration-line: line-through; }
  .tree-count { font-size: 0.72rem; color: var(--ink-soft); margin-inline-start: 0.4rem; }
}

@layer components {
  .paper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .paper-head .paper-meta { flex: 1; min-width: 0; }
  .sheet-actions { position: relative; margin-block-start: -0.35rem; }
  .sheet-actions-button { width: 2rem; height: 1.6rem; border-radius: 7px; color: var(--ink-soft); font-size: 1.1rem; line-height: 1; letter-spacing: 0.05em; }
  .sheet-actions-button:hover, .sheet-actions-button[aria-expanded=true] { background: var(--desk); color: var(--ink); }
  .new-menu-title { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 0.45rem 0.7rem 0.15rem; border-block-start: 1px solid var(--rule); margin-block-start: 0.25rem; }
  .new-choice.is-indented { padding-inline-start: 1.2rem; }
  .new-choice.is-bin { color: var(--c-red); border-block-start: 1px solid var(--rule); border-radius: 0 0 5px 5px; margin-block-start: 0.25rem; }
  .button.is-bin { color: var(--c-red); }
  .danger-zone { margin-block-start: 2rem; padding-block-start: 1rem; border-block-start: 1px solid var(--rule); display: grid; gap: 0.4rem; justify-items: start; }


  /* A notice after something went in the Bin, with Undo, until the next page. No motion of its own. */
  .notice {
    position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 1rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.85rem; box-shadow: var(--shadow);
  }
  /* Undo in the notice's own ink (its words, light on the dark pill), never the accent. */
  .notice-undo { color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
  .notice-link { color: color-mix(in oklab, var(--paper), transparent 30%); }
}
.new-choice kbd { margin-inline-start: auto; font-family: var(--font); font-size: 0.7rem; color: var(--ink-soft); }
.new-upload { display: contents; } .new-upload .new-choice { cursor: pointer; }

@layer components {
  /* The Tree, as a computer shows a disk: straight lines from each binder to what is in it, and a
     paper's cards folded behind a small squiggle. */
  .disk { padding: 1.3rem 1.6rem; background: var(--paper); border-radius: 8px; box-shadow: var(--shadow); font-size: 0.92rem; }
  .disk-root { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-block-end: 0.3rem; }
  .disk-in { list-style: none; margin: 0; padding-inline-start: 1.1rem; }
  .disk-in.is-root { padding-inline-start: 0.4rem; }
  .disk-in > li { position: relative; padding: 0.12rem 0 0.12rem 1.1rem; }
  /* The line down from the binder, stopping at its last item, and a short line across to each. */
  .disk-in > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-inline-start: 1px solid var(--rule); }
  .disk-in > li:last-child::before { bottom: auto; height: 0.85rem; }
  .disk-in > li::after { content: ""; position: absolute; left: 0; top: 0.85rem; width: 0.8rem; border-block-start: 1px solid var(--rule); }
  .disk-name { color: var(--ink); text-decoration: none; }
  .disk-name:hover { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .disk-name.is-binder { font-weight: 700; }
  .disk-name.is-placed { font-style: italic; }
  .disk-kind { font-size: 0.7rem; color: var(--ink-soft); }
  .disk-cards { display: inline-block; margin-inline-start: 0.5rem; font-size: 0.78rem; color: var(--ink-soft); }
  .disk-cards > summary { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none; }
  .disk-cards > summary::-webkit-details-marker { display: none; }
  .disk-cards[open] { display: block; margin-inline-start: 0; }
  .disk-wave { display: inline-block; width: 1.4rem; height: 0.5rem; background: currentColor; -webkit-mask: var(--wave-x) repeat-x center / 0.6rem 0.4rem; mask: var(--wave-x) repeat-x center / 0.6rem 0.4rem; }
  .disk-cards[open] .disk-wave, .disk-cards > summary:hover .disk-wave { color: var(--ink); }
  .disk-in.is-cards > li { display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; align-items: baseline; }
  .disk-card { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .disk-card.is-done { color: var(--ink-soft); text-decoration-line: line-through; }
}
.danger-zone .field-hint { font-size: 0.78rem; color: var(--ink-soft); }

@layer components {
  /* A row that scrolls sideways, as a shelf of things does: snapping to each thing, the scrollbar
     hidden, the row bleeding to the page's edges so what is cut off says there is more. */
  .carousel {
    display: flex; gap: 1.1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; margin-inline: calc(var(--inline-space) * -4); padding: 0.5rem calc(var(--inline-space) * 4) 0.9rem;
    scroll-padding-inline: calc(var(--inline-space) * 4);
  }
  .carousel::-webkit-scrollbar { display: none; }
  /* On Home the rows run to the right squiggle, the sheet's edge, and no further. */
  .home-paper .carousel { margin-inline-end: calc(var(--inline-space) * -2); padding-inline-end: calc(var(--inline-space) * 2); }
  /* Home is as wide as a binder's page whatever its rows hold (its sheet's columns, stack.css); the
     rows scroll inside it. */
  .home-paper .sheet-text { min-width: 0; }
  .carousel > * { flex: none; scroll-snap-align: start; }
  .carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: 0.3rem; }
  .row-head .row-title { margin: 0; }

  /* Lately: two rows, each sliding sideways on its own; each thing in a box one row high and as wide
     as its shape, the shape centred on the row's middle line (a page and a binder fill the height, a
     slide or a picture lying on its side less of it), its name under the box, so names line up and
     the gaps are all the same. */
  .lately { --tall: 7.2rem; display: grid; }
  .lately-row { gap: 1.1rem; align-items: start; }
  .lately-row + .lately-row { padding-block-start: 0; }
  .lately .mini, .lately .folder-thing, .lately .binder-thing { grid-template-columns: none; grid-template-rows: var(--tall) auto; gap: 0.4rem; justify-items: stretch; }
  .lately .mini { width: calc(var(--tall) * 0.773); }
  .lately .mini-page { align-self: center; width: 100%; height: auto; aspect-ratio: 8.5 / 11; }
  .lately .mini.is-slides { width: calc(var(--tall) * 1.15); }
  .lately .mini-page.is-slide { aspect-ratio: 16 / 10; }
  .lately .mini.is-file:has(.mini-picture) { width: calc(var(--tall) * 1.1); }
  .lately .mini.is-file .mini-page:has(.mini-picture) { aspect-ratio: 4 / 3; }
  .lately .binder-thing { --spine-h: var(--tall); width: calc(var(--tall) * 0.62); }
  .lately .binder-spine { justify-self: center; }
  .lately .binder-thing .thing-label { text-align: start; }
  .lately .binder-thing .thing-name { font-size: 0.72rem; white-space: nowrap; display: block; }
  .lately .folder-thing { width: calc(var(--tall) * 0.8); }
  .lately .folder { align-self: end; margin-block-start: 0; height: calc(var(--tall) - 0.6rem); aspect-ratio: auto; }

  /* The shelves, side by side: each its name and people over the drawing; then the + where the next
     shelf would be, at the top left of its place. */
  .shelves { align-items: start; gap: 1.8rem; }
  .shelf-card { display: grid; gap: 0.6rem; min-width: 11rem; }
  .shelf-card .shelf-head { padding-inline: 0.2rem; }
  .shelf-card .shelf-name { font-size: 0.95rem; }
  .shelf-card .shelf-team { font-size: 0.72rem; color: var(--ink-soft); padding-inline: 0.2rem; }
  .shelf-card .shelf-team a { color: inherit; }
  .shelves > .add-tile { margin-block-start: 0.1rem; }
  .home-bin { margin-block-start: 1.5rem; font-size: 0.8rem; }
  .home-margin .home-bin { margin-block-start: 1rem; }
  .home-bin a { color: var(--ink-soft); }
  .home-bin-count { margin-inline-start: 0.25rem; padding: 0 0.45em; border-radius: 999px; background: var(--desk); color: var(--ink-soft); font-size: 0.7rem; }

  @media (max-width: 60ch) {
    .carousel { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
    .home-paper .carousel { margin-inline-end: -4px; padding-inline-end: 4px; }
    .lately { --tall: 6.4rem; }
    .lately-row { gap: 0.9rem; }
  }
}

/* As a layer, Home's margin has no row of filters at its top to hold it off the screen's edge, so
   its first heading is given that room itself. Unlayered, as margin_layer.css is. */
@media (max-width: 1080px) {
  .sheet-body > .margin.home-margin { padding-block-start: calc(env(safe-area-inset-top, 0px) + 1.4rem); }
}