/* Capture, editing, cards, properties, agents and opened-card surfaces. */
  /* ——— capture: one field at the top of the board. Type a thought,
     hit return, it is a card at the top — title-only is the whole
     write, and a failed POST hands the text back rather than losing
     it. The OS5 capture, arrived on the planet. ——— */
  .previewcard > .capture { margin: 0.55rem 0.7rem 0.15rem; }
  .capturerow {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--card);
    border-radius: 999px;
    padding: 0.25rem 0.5rem 0.25rem 0.8rem;
    box-shadow: 0 0.5px 2px rgba(30, 32, 38, 0.06);
  }
  .captureplus { color: var(--ink3); display: inline-flex; flex: 0 0 auto; }
  .captureinput {
    flex: 1; min-width: 0;
    font: inherit; color: var(--ink);
    background: none; border: none;
    padding: 0.5rem 0.3rem;
  }
  .captureinput:focus { outline: none; }
  .capturenote {
    font-size: 0.8125rem; color: #C0392B; font-style: italic;
    padding: 0.3rem 0.9rem 0;
  }
  .capturenote:empty { display: none; }
  .sharefilter { margin: 0 0 0.65rem; }
  body.dark .capturerow {
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }

  /* ——— the edit sheet: title, body and every property in place, one
     PATCH carrying the revision the form read, and a 409 shown as
     words with the way forward — never a silent retry or a merge. ——— */
  .editlabel {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink2);
    margin: 0.9rem 0.2rem 0.3rem;
  }
  .editinput {
    display: block; width: 100%;
    font: inherit; color: var(--ink);
    background: var(--fill);
    border: none; border-radius: 10px;
    padding: 0.55rem 0.7rem;
  }
  .editarea { min-height: 9rem; resize: vertical; line-height: 1.45; }
  .editsave {
    display: block; width: 100%;
    margin-top: 1rem;
    padding: 0.65rem;
    text-align: center;
    font-weight: 600;
    color: white; background: var(--tint);
    border-radius: 12px;
  }
  .editsave:active { opacity: 0.7; }
  .previewtop { position: relative; }
  .editbtn {
    position: absolute; right: 0.45rem; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    color: var(--ink2);
  }
  .editbtn:active { background: var(--fill); }

  /* the kanban board: two columns of project, a grip on every card, and
     a drop that rewrites the property — persisted through the API now */
  /* the kanban board is ONE surface panning both axes — the table's
     feel, by the owner's order, after nested column scrollers proved
     unscrollable on the phone twice. Columns grow to their content,
     the heads stay put the way the table's header row does, content
     clears the dock inside the one scroll, and the greedy snap is
     gone. */
  .kanban {
    display: flex; gap: 0.6rem;
    align-items: flex-start;
    height: 100%; min-height: 16rem;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem calc(168px + env(safe-area-inset-bottom));
  }
  .kanban::-webkit-scrollbar { display: none; }
  .kcol {
    flex: 0 0 58vw; max-width: 15rem;
    display: flex; flex-direction: column;
    background: rgba(118, 118, 128, 0.08);
    border-radius: var(--radius);
    padding: 0.5rem;
  }
  .kcol.drop { background: rgba(10, 122, 255, 0.10); }
  .kcolhead {
    position: sticky; top: 0; z-index: 2;
    flex: 0 0 auto;
    display: flex; justify-content: space-between;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink2);
    margin: -0.5rem -0.5rem 0.45rem;
    padding: 0.6rem 0.8rem 0.5rem;
    border-radius: var(--radius) var(--radius) 0 0;
    background: rgba(242, 242, 247, 0.86);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
  }
  body.dark .kcolhead { background: rgba(18, 20, 26, 0.85); }
  .kcolcards {
    display: flex; flex-direction: column; gap: 0.6rem;
    padding-bottom: 0.2rem;
  }
  /* In a column the cards are the same cards, dressed for the width:
     title and mission only — the column head already says the project,
     the clock earns no room at 58vw, and description is a longer line
     that waits on the face. */
  .kcolcards .card { padding: 0.7rem 0.8rem; }
  .kcolcards .card h2 { font-size: 0.9375rem; }
  .kcolcards .proprow-project,
  .kcolcards .proprow-edited,
  .kcolcards .proprow-description,
  .kcolcards .proprow-folder { display: none; }
  /* On the board the mission is a subtitle, not a labelled row — which
     dressing each view gives a property is a preference the board holds
     as fog. */
  .kcolcards .proprow-mission .proplabel { display: none; }
  .kcolcards .prop-quote { font-size: 0.8125rem; color: var(--ink2); }
  .kcard { position: relative; }
  .kgrip {
    position: absolute; top: 6px; right: 6px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink3);
    border-radius: 8px;
    touch-action: none;
  }
  .kghost { position: fixed; z-index: 20; pointer-events: none; opacity: 0.9; transform: rotate(2.5deg); }

  .card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    box-shadow: 0 0.5px 2px rgba(30, 32, 38, 0.06);
  }
  .cardopen { display: block; width: 100%; }
  .cardopen:active h2 { opacity: 0.55; }
  .card h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
  .cardopen p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--ink2); }
  .props { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.65rem; }
  .proprow {
    display: flex; align-items: center; gap: 0.5rem;
    min-width: 0;
  }
  /* Labels speak the iOS grouped-table voice: small caps, letterspaced,
     secondary — the register Settings uses for its section heads. */
  .proplabel {
    flex: 0 0 5.5rem;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink2);
  }
  .propvals { display: flex; flex-wrap: wrap; gap: 0.3rem; min-width: 0; }
  .prop {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em;
    border-radius: 999px; padding: 3px 9px 3px 7px;
  }
  .prop svg { width: 12px; height: 12px; }
  .prop-select { color: var(--tint); background: rgba(10, 122, 255, 0.1); }
  /* Extra projects — a second vocabulary, so not the same blue. */
  .prop-multiselect { color: #C2410C; background: rgba(234, 88, 12, 0.14); }
  .prop-time { color: var(--ink2); background: var(--fill); }
  .prop-from { color: var(--ink); background: var(--fill); }
  .prop-quote {
    font-style: italic;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    background: none;
    padding: 0;
    border-radius: 0;
    line-height: 1.35;
  }
  /* Description is the longer line: still italic, still metadata, not
     wrapped in quotes the way a mission is. */
  .prop-prose {
    font-style: italic;
    font-weight: 400;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
    color: var(--ink2);
    background: none;
    padding: 0;
    border-radius: 0;
    line-height: 1.4;
    white-space: normal;
  }
  .proprow:has(.prop-quote),
  .proprow:has(.prop-prose) { align-items: baseline; }
  .propvals:has(.prop-prose) { flex: 1; min-width: 0; }
  /* An agent chip is a door, not a label — it presses like one. Purple,
     because the seats are their own vocabulary, neither project blue nor
     the Also orange. Kept for the table; the face wears tiles instead. */
  .prop-agent { color: #8E44AD; background: rgba(175, 82, 222, 0.13); }
  button.prop-agent:active { opacity: 0.55; }
  .prop-folder { color: #248A3D; background: rgba(52, 199, 89, 0.14); }
  /* A reference chip links to another card, the Obsidian way. */
  .prop-ref { color: var(--tint); background: rgba(10, 122, 255, 0.08); }
  button.prop-ref:active { opacity: 0.55; }

  /* ——— the agents corner: the seats as faces, bottom right of the
     card — the dock's own tiles at the top bar's size. A cap or a
     compass rides each tile's shoulder, saying what the seat is for;
     the main seat wears a ring. An unassigned card holds one dashed
     empty seat. ——— */
  .agentrow {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 0.55rem; margin-top: 0.65rem;
  }
  .agenticon {
    position: relative;
    width: 38px; height: 38px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 0.5px solid rgba(255, 255, 255, 0.66);
    color: white;
    /* A seat with no costume yet wears the dock's plain metal. */
    background: linear-gradient(155deg, #949990, #686d65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px rgba(35, 38, 32, 0.16);
  }
  .agenticon:active { opacity: 0.7; }
  .agenticon > svg { width: 22px; height: 22px; }
  .agentmain { outline: 2px solid rgba(10, 122, 255, 0.55); outline-offset: 1.5px; }
  .agentcap {
    position: absolute; top: -7px; right: -7px;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--card); color: var(--ink);
    border: 0.5px solid var(--line);
    box-shadow: 0 1px 3px rgba(30, 32, 38, 0.18);
  }
  .agentcap svg { width: 11px; height: 11px; }
  .agentempty {
    color: var(--ink2);
    border: 1.5px dashed var(--ink3);
    background: none;
    box-shadow: none;
  }
  body.dark .agentcap {
    background: #262A34; color: #F2F2F4;
    border-color: rgba(255, 255, 255, 0.14);
  }

  .sublabel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .subchev { color: var(--ink3); font-size: 1.1rem; line-height: 1; }
  .untitled { color: var(--ink3); font-style: italic; }
  .menuhead .menuglyph { margin-right: 0.4rem; }

  /* the open card: a page, Apple-grouped. The title lives in the path
     above; the preview is a larger card — about two faces stacked —
     with list and grid as icons in a bar at its top, and the cards
     inside living in the well beneath, so a tap changes what you can
     already see. The bar lives in the page, not the chrome: scroll,
     and it leaves. */
  .previewcard {
    min-height: 16rem;
    padding: 0;
    display: flex; flex-direction: column;
  }
  .previewtop {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    padding: 0.45rem 0.7rem;
    border-bottom: 0.5px solid var(--line);
  }
  .previewbody {
    flex: 0 0 auto;
    padding: 0.8rem 1rem 0.7rem;
  }
  .previewcard p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink2); }
  .previewcard .props { margin: 0 0 0.6rem; }
  .previewcard .props:last-child { margin-bottom: 0; }
  .payload { margin-top: 0.85rem; }
  .previewcard .payload p {
    margin: 0 0 0.8rem;
    font-size: 0.9375rem; line-height: 1.5; color: var(--ink);
  }
  .previewcard .payload p:last-child { margin-bottom: 0; }
  .entrycard { min-height: 0; }
  .stillcard { min-height: 0; }
  .still {
    display: block;
    width: 100%;
    max-height: 68dvh;
    object-fit: contain;
    background: #111;
  }
  .carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    background: #111;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .cslide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 100%;
  }
  .cslide .still { max-height: 62dvh; }
  .cdots {
    display: flex; justify-content: center; gap: 0.45rem;
    padding: 0.65rem 0.7rem 0.85rem;
  }
  .cdot {
    width: 7px; height: 7px; padding: 0;
    border-radius: 999px;
    background: var(--ink3);
  }
  .cdot[aria-current="true"] { background: var(--tint); width: 16px; }
  .stillface {
    padding: 0;
    overflow: hidden;
  }
  .stillface .cardopen { padding: 0.7rem 0.85rem 0.75rem; }
  .stillface .still-thumb {
    display: block;
    width: calc(100% + 1.7rem);
    max-width: none;
    height: 11rem;
    object-fit: cover;
    border-radius: 0;
    margin: -0.7rem -0.85rem 0.65rem;
    background: var(--fill);
  }
  .stillface h2 { font-size: 0.9375rem; }
  .stillface .albumcount {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--ink2);
  }
  .kids[data-view="grid"] .still-thumb { height: 6.4rem; }
  /* The board inside a card's well: the same columns as the big board,
     tamed — no windowed pan, no runway padding, a plain sideways
     scroll inside the well. */
  .kids .kanban {
    height: auto; min-height: 0;
    margin: 0 -0.7rem;
    padding: 0 0.7rem 0.5rem;
  }
  .kids .grouphead { margin: 0.15rem 0.1rem 0.5rem; }
  .previewcard .kids {
    flex: 1;
    min-height: 8rem;
    padding: 0.65rem 0.7rem 0.8rem;
    background: var(--bg);
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .grouphead {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink2); margin: 1.2rem 0.25rem 0.45rem;
  }
  .group {
    background: var(--card); border-radius: var(--radius);
    box-shadow: 0 0.5px 2px rgba(30, 32, 38, 0.06);
    overflow: hidden;
  }
  .grouprow {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; padding: 0.7rem 0.9rem;
    font-size: 0.9975rem;
  }
  .grouprow + .grouprow { border-top: 0.5px solid var(--line); }
  .grouprow:active { background: rgba(118, 118, 128, 0.06); }
  .grouprow .subchev { font-size: 1.15rem; }
  .emptyline { color: var(--ink3); font-size: 0.875rem; padding: 0.8rem 0.9rem; font-style: italic; }
  /* The fallback's one honest line: the shell is a read-only copy of
     the seed until the store answers again. */
  .fallbacknote {
    color: var(--ink2); font-size: 0.8125rem; font-style: italic;
    padding: 0.15rem 0.25rem 0;
  }