/* ============================================================================
   DESKTOP v2 — phase 1: the retractable chat panel (Josh's approved refined
   proposal, 2026-08-02). Everything gates on body.d-shell (>=1024px + the
   pfv.desktopv2 flag) so today's desktop and ALL of mobile are untouched
   until Josh flips it. Same tokens, same palette — the phone's language on
   the wide screen.
   ========================================================================== */
/* ONE PALETTE, TWO SHELLS (Josh, 2026-08-02): the desktop must color-match
   the phone in BOTH themes — the paper night surfaces (charcoal/grey) sink
   to the same true black the phone uses, and day keeps paper's white. These
   are the SAME token values as mobile.css's m-shell block; if that block
   ever changes, change it here too (two coats, one palette). */
body.night-mode.d-shell {
  --p-canvas: #060607;
  --p-card: #0e0e10;
  --p-card-2: #0b0b0c;
  --p-hair: rgba(255, 255, 255, 0.085);
  --p-hair-hi: rgba(255, 255, 255, 0.16);
  --m-wash: rgba(245, 245, 244, 0.1);
  --m-wash-hi: rgba(245, 245, 244, 0.17);
  --m-brand: #3fae7d;
  --m-link: #edc55b;
}
body.d-shell {
  --m-wash: rgba(29, 29, 31, 0.07);
  --m-wash-hi: rgba(29, 29, 31, 0.12);
  --m-brand: #157a4d;
  --m-link: #8a6a08;
}
body.night-mode.d-shell,
body.night-mode.d-shell #appView,
body.night-mode.d-shell #appView main,
body.night-mode.d-shell #appView main > section.page,
body.night-mode.d-shell #desktopRail,
body.night-mode.d-shell #dColumnHead,
body.night-mode.d-shell #dWorkspace,
body.night-mode.d-shell.d-chat-open #donnaDock.open,
body.night-mode.d-shell #dBellPanel,
body.night-mode.d-shell #dDockHost { background: #060607 !important; }

@media (min-width: 1024px) {

  /* ---- PHASE 2: the 80px rail — the legacy sidebar stands down.
     Selector matches paper.css's id-strength shape (the house scar) ------- */
  body.d-shell #appView aside { display: none !important; }
  body.d-shell #appView { margin-left: 80px !important; padding-left: 0 !important; }
  body.d-shell #appView main section.page:not(#overview) { padding-left: 24px !important; }
  #desktopRail {
    display: none;
  }
  body.d-shell #desktopRail {
    display: flex; flex-direction: column; align-items: center;
    position: fixed; top: 0; left: 0; bottom: 0; width: 80px;
    padding: 18px 0 16px;
    background: var(--p-canvas);
    border-right: 1px solid var(--p-hair);
    z-index: 60;
  }
  body.night-mode.d-shell #desktopRail { background: #060607; }
  #desktopRail .d-rail-sprout {
    width: 26px; height: 26px; margin-bottom: 26px;
    color: var(--m-brand); transform: rotate(-12deg);
  }
  #desktopRail .d-rail-sprout svg { width: 100%; height: 100%; }
  #desktopRail .d-rail-tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 64px; padding: 10px 0 8px; margin-bottom: 6px;
    border: 0; border-radius: 12px;
    background: transparent; color: var(--p-ink-soft);
    cursor: pointer;
  }
  #desktopRail .d-rail-tab:hover { background: var(--m-wash); color: var(--p-ink); }
  #desktopRail .d-rail-glyph { width: 26px; height: 26px; position: relative; }
  #desktopRail .d-rail-glyph svg { width: 100%; height: 100%; }
  #desktopRail .d-rail-label { font-size: 11px; font-weight: 650; letter-spacing: 0.01em; }
  #desktopRail .d-rail-tab.active { color: var(--p-ink); }
  /* THE ONE ACCENT (Josh: on by default): gold underline on the active tab */
  #desktopRail .d-rail-tab.active .d-rail-glyph::after {
    content: ''; position: absolute; left: 4px; right: 4px; bottom: -6px;
    height: 2px; border-radius: 1px; background: var(--m-link);
  }
  #desktopRail .d-rail-spacer { flex: 1 1 auto; }
  #desktopRail .d-rail-avatar {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--t-action); color: var(--t-action-ink);
    font-size: 0.85rem; font-weight: 700; cursor: pointer;
  }
  #desktopRail .d-rail-avatar:hover { opacity: 0.88; }

  
  /* ---- PHASE 3: the SPLIT — list column + story workspace --------------- */
  :root { --d-list-w: 400px; --d-chat-w: 420px; --d-story-w: 460px; }
  /* the frame's math in one place: rail(80) | chat | list | story */
  body.d-shell { --d-chat-gap: 0px; --d-story-gap: 0px; }
  body.d-shell.d-chat-open { --d-chat-gap: var(--d-chat-w); }
  body.d-shell.d-story-open { --d-story-gap: var(--d-story-w); }
  body.d-shell #appView { margin-left: calc(80px + var(--d-chat-gap)) !important; }
  body.d-shell.d-split #appView main > section.page:not(.hidden) {
    position: fixed; top: 0; bottom: 0;
    left: calc(80px + var(--d-chat-gap));
    width: var(--d-list-w); max-width: var(--d-list-w);
    overflow-y: auto; overflow-x: hidden;
    padding: 112px 0 40px !important;
    border-right: 1px solid var(--p-hair);
    background: var(--p-canvas);
    transition: width 0.15s ease;
  }
  body.night-mode.d-shell.d-split #appView main > section.page:not(.hidden) { background: #060607; }
  /* legacy page chrome stands down inside the column */
  body.d-shell.d-split #matrix .workspace-head,
  body.d-shell.d-split #matrix .matrix-toolbar,
  body.d-shell.d-split #matrix .lead-chips,
  body.d-shell.d-split #matrix .lead-chip,
  body.d-shell.d-split #cold .workspace-head,
  body.d-shell.d-split #cold .cold-toolbar,
  body.d-shell.d-split #tasks .workspace-head { display: none !important; }
  /* the column head: search + chips over the list */
  #dColumnHead { display: none; }
  body.d-shell.d-split #dColumnHead {
    display: block;
    position: fixed; top: 0; left: calc(80px + var(--d-chat-gap)); z-index: 55;
    width: var(--d-list-w);
    padding: 14px 14px 10px;
    background: var(--p-canvas);
    border-bottom: 1px solid var(--p-hair);
    border-right: 1px solid var(--p-hair);
  }
  body.night-mode.d-shell.d-split #dColumnHead { background: #060607; }
  #dColumnHead .d-col-search input {
    width: calc(100% - 40px); height: 40px;
    padding: 0 14px;
    border: 1px solid var(--p-hair); border-radius: 999px;
    background: var(--p-card); color: var(--p-ink);
    font-size: 0.92rem; outline: none;
  }
  body.night-mode #dColumnHead .d-col-search input { background: #121214; }
  #dColumnHead .d-col-chips {
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; scrollbar-width: none;
    padding: 10px 0 2px;
  }
  #dColumnHead .d-col-chips::-webkit-scrollbar { display: none; }
  #dColumnHead .m-chip {
    flex: 0 0 auto; height: 30px; padding: 0 13px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 999px;
    background: var(--p-card); color: var(--p-ink);
    font-size: 0.82rem; font-weight: 650; white-space: nowrap; cursor: pointer;
  }
  body.night-mode #dColumnHead .m-chip { background: #121214; }
  #dColumnHead .m-chip strong { font-weight: 700; color: var(--p-ink-faint); }
  #dColumnHead .m-chip.active { background: var(--t-action); color: var(--t-action-ink); }
  #dColumnHead .m-chip.active strong { color: var(--t-action-ink); opacity: 0.75; }
  #dColumnHead .d-col-collapse {
    position: absolute; top: 16px; right: 8px;
    width: 28px; height: 36px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--p-ink-faint);
    font-size: 0.9rem; cursor: pointer;
  }
  #dColumnHead .d-col-collapse:hover { background: var(--m-wash); color: var(--p-ink); }
  /* the workspace: the story as the landing, beside the list */
  #dWorkspace { display: none; }
  body.d-shell.d-split #dWorkspace {
    display: block;
    position: fixed; top: 0; bottom: 0; right: 0;
    width: var(--d-story-w);
    left: auto !important; right: 0 !important;
    overflow-y: auto;
    padding: 40px 34px 60px;
    border-left: 1px solid var(--p-hair);
    transition: transform 0.22s ease;
    z-index: 45;
  }
  body.d-shell.d-split:not(.d-story-open) #dWorkspace { transform: translateX(calc(var(--d-story-w) - 46px)); }
  /* the tab's own content FILLS the middle, ending at the story's edge */
  body.d-shell.d-split #appView main > section.page:not(.hidden) {
    width: auto !important; max-width: none !important;
    right: calc(var(--d-story-gap) + 46px);
  }
  body.d-shell.d-split:not(.d-story-open) #appView main > section.page:not(.hidden) { right: 46px; }
  body.d-shell.d-split #dColumnHead {
    width: auto !important;
    right: calc(var(--d-story-gap) + 46px);
  }
  body.d-shell.d-split:not(.d-story-open) #dColumnHead { right: 46px; }
  /* the drag divider retires with the fixed list width — the three panels
     size themselves now (the story's book toggle is the density control) */
  #dWorkspace .d-divider { display: none !important; }
  /* the BOOK toggle rides the story's left edge */
  #dWorkspace .d-story-toggle {
    position: absolute; top: 34px; left: 8px;
    width: 30px; height: 30px; padding: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--p-ink-faint); cursor: pointer;
  }
  #dWorkspace .d-story-toggle:hover { background: var(--m-wash); color: var(--p-ink); }
  #dWorkspace .d-story-toggle svg { width: 100%; height: 100%; }
  #dWorkspace .d-story-body { padding-left: 30px; }
  body.d-shell.d-split:not(.d-story-open) #dWorkspace .d-story-body { opacity: 0; pointer-events: none; }
  #dWorkspace .d-work-story { max-width: 100%; }
  /* the divider: drag to resize (Josh: user-tunable, remembered) */
  #dWorkspace .d-divider {
    position: fixed; top: 0; bottom: 0;
    left: calc(80px + var(--d-chat-gap) + var(--d-list-w) - 3px);
    width: 7px; cursor: col-resize; z-index: 56;
  }
  #dWorkspace .d-divider:hover { background: rgba(138, 106, 8, 0.18); }
  /* FOCUS MODE: the list folds to a thin strip */
  body.d-shell.d-list-collapsed { --d-list-w: 44px; }
  body.d-shell.d-list-collapsed.d-split #appView main > section.page:not(.hidden) { overflow: hidden; }
  body.d-shell.d-list-collapsed #dColumnHead .d-col-search,
  body.d-shell.d-list-collapsed #dColumnHead .d-col-chips { display: none; }
  body.d-shell.d-list-collapsed #dColumnHead { height: 60px; padding: 12px 4px; }
  /* row hover — the desktop affordance (part of the brand adaptation) */
  body.d-shell #matrix .matrix-mcard:hover,
  body.d-shell #cold .cold-table tbody tr:hover,
  body.d-shell #tasks .m-act-row:hover { background: var(--m-wash) !important; cursor: pointer; }

  /* ---- THE CARD COAT (generated from mobile.css, re-scoped m->d) --------
     One component two coats: the JS renderers are shared; this is the
     desktop copy of the phone's card grammar. Regenerate when the phone
     coat changes (scripts: see roadmap note 2026-08-02). ------------------ */
body.d-shell #matrix .matrix-search-input { display: none !important; }
body.d-shell #cold .cold-message:empty { display: none !important; }
body.d-shell #cold .cold-list-tabs [data-open-upload] {
    position: sticky; right: 0; z-index: 1;
    background: var(--p-canvas);
    box-shadow: -8px 0 8px var(--p-canvas);
  }
body.night-mode.d-shell #cold .cold-list-tabs [data-open-upload] { background: #060607; box-shadow: -8px 0 8px #060607; }
.m-sheet-books::-webkit-scrollbar { display: none; }
.m-sheet-books .m-lead {
    flex: 0 0 auto;
    height: 34px; padding: 0 14px;
    border: 1px solid var(--p-hair); border-radius: 10px;
    background: transparent; color: var(--p-ink-soft);
    font-size: 0.82rem; font-weight: 600; white-space: nowrap;
    cursor: pointer;
  }
.m-sheet-books .m-lead.active {
    background: var(--m-wash-hi); color: var(--p-ink);
    border-color: var(--p-hair-hi);
  }
body.d-shell #matrix .mc-line2 { margin-top: 6px; }
body.d-shell #matrix .acct-group-head {
    border-top: 1px solid var(--p-hair) !important;
    background: transparent !important;
  }
body.d-shell #matrix .acct-group:first-child .acct-group-head { border-top: 0 !important; }
body.d-shell #matrix .acct-group .matrix-mcard:last-child { border-bottom: 0 !important; }
body.d-shell #appView #matrix .acct-group-head td {
    /* DOUBLE-ID ON PURPOSE (the shoebox scar shape): a first-column rule
       with heavier specificity kept this td 30x44 in its card coat — the
       ghost square behind every header survived two lighter resets */
    display: block !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important;
    padding: 7px 16px 0 !important;
    background: transparent !important; border: 0 !important;
    box-shadow: none !important; border-radius: 0 !important;
  }
body.d-shell #matrix .acct-group-toggle {
    background: transparent !important; border: 0 !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
    display: flex; align-items: baseline; gap: 7px;
    width: auto !important; min-height: 0 !important;
  }
body.d-shell #matrix .acct-group-chevron { display: none !important; }
body.d-shell #matrix .acct-group-head .acct-group-pill {
    background: transparent !important; border: 0 !important;
    padding: 0 !important;
    color: var(--p-ink) !important;
    font-size: 0.88rem !important; font-weight: 700 !important;
    letter-spacing: 0 !important; text-transform: none !important;
  }
body.d-shell #matrix .acct-group-count { font-size: 0.72rem; color: var(--p-ink-faint); }
body.d-shell #matrix .mc-star {
    width: 34px; height: 34px; margin: -7px -4px -7px 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; padding: 0;
    font-size: 1.15rem; line-height: 1;
    color: var(--p-ink-faint); cursor: pointer;
  }
body.d-shell #matrix .mc-star.on { color: var(--m-link); }
body.d-shell #matrix .mc-stage-wrap { position: relative; display: inline-flex; }
body.d-shell #matrix .mc-stage-face {
    font-size: 0.66rem;
    padding: 3px 9px !important;   /* smaller than the group pill's own coat */
    pointer-events: none;   /* the invisible select takes the tap */
  }
body.d-shell #matrix .mc-stage-select {
    position: absolute; inset: 0;
    opacity: 0; border: 0;
    width: 100%; height: 100%;
    font-size: 16px;          /* iOS focus-zoom floor */
    cursor: pointer;
  }
body.d-shell #matrix table thead { display: none !important; }
body.d-shell #matrix .matrix-mcard {
    display: block; position: relative !important;
    overflow: hidden;
    padding: 18px 16px !important;   /* the prospect row rhythm exactly */
    border-bottom: 1px solid var(--p-hair) !important;
    /* HEIGHT AUTO IS LOAD-BEARING (round 4 fix): a legacy rule pins tr
       height to 72px — the prospect-size type made content taller and the
       fixed height CLIPPED every card (Josh: "buttons are getting cut
       off"; probe showed height:72 vs content ~102) */
    height: auto !important; max-height: none !important;
    min-height: 72px;
    background: transparent !important;
  }
body.d-shell #matrix .matrix-mcard td:not(.mcard-td) { display: none !important; }
body.d-shell #matrix .matrix-mcard input[type=checkbox] { display: none !important; }
body.d-shell #matrix .matrix-mcard .mcard-td {
    /* width 100% is THE fix of the whole mangled-rows saga: a first-column
       (checkbox) width rule capped this td at 30px and everything inside
       overflowed a shoebox */
    display: block; width: 100% !important; max-width: 100% !important;
    padding: 0 !important; border: 0 !important;
    background: transparent !important;
  }
body.d-shell #matrix .mc-name {
    background: transparent; border: 0; padding: 0; text-align: left;
    cursor: pointer;
  }
body.d-shell #matrix .mc-line1 .cold-name-row { flex: 1 1 auto; min-width: 0; }
body.d-shell #matrix .mc-phone {
    flex: 0 0 auto;
    font-size: 0.88rem !important; font-weight: 500;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--p-ink) !important; text-decoration: none !important;
  }
body.d-shell #matrix .mc-line2 {
    display: flex; align-items: baseline; gap: 10px; margin-top: 3px;
  }
body.d-shell #matrix .mc-line2 .cold-context-line { flex: 1 1 auto; min-width: 0; margin: 0; }
body.d-shell #matrix .mc-stage {
    flex: 0 0 auto;
    font-size: 0.8rem; font-weight: 600; color: var(--p-ink-soft);
    white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  }
body.d-shell #cold .cold-table .cold-name-input,
  body.d-shell #cold .cold-table .cold-company-input,
  body.d-shell #cold .cold-table .cold-place-input,
  body.d-shell #cold .cold-table .cold-phone-cell input {
    background: transparent !important; border-color: transparent !important;
  }
body.d-shell #cold .table-wrap {
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
  }
body.d-shell #matrix .panel, body.d-shell #tasks .panel,
  body.d-shell #matrix .table-wrap.matrix-grid,
  body.d-shell #matrix .account-directory,
  body.d-shell #matrix .acct-group {
    background: transparent !important;
    border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  }
body.night-mode.d-shell #matrix .cold-table td,
  body.night-mode.d-shell #matrix table td,
  body.night-mode.d-shell #matrix table th {
    background: transparent !important;
  }
body.d-shell #cold .cold-table tbody tr {
    padding: 18px 16px !important;
    border-bottom: 1px solid var(--p-hair) !important;
  }
body.d-shell #cold .cold-table tbody tr:last-child { border-bottom: 0 !important; }
body.d-shell #cold .cold-name-read,
  body.d-shell #matrix .mc-name {
    /* PROPORTION RULE (Josh, 2026-08-02 round 3): account names read at
       EXACTLY the prospect size — one rule, both tabs */
    font-size: 1.04rem; font-weight: 700; line-height: 1.25;
    color: var(--p-ink);
    /* ONE line (Josh): word-drop happens in the renderer; this ellipsis is
       only the fallback for a single unbreakable long word */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }
body.d-shell #cold .cold-name-link:active { opacity: 0.6; }
body.d-shell #cold .cold-moved-link { display: none !important; }
body.d-shell #cold .cold-context-line {
    display: block;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    font-size: 0.8rem; line-height: 1.35; color: var(--p-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
body.d-shell #cold .cold-context-line i { font-style: normal; opacity: 0.45; padding: 0 1px; }
body.d-shell #cold .cold-table td:nth-child(2) { margin-top: 3px !important; }
body.d-shell #cold .cold-table td:nth-child(4) { margin-top: 9px !important; }
body.d-shell #cold .cold-table td:nth-child(5) { margin-top: 8px !important; }
body.d-shell #cold .cold-table td:nth-child(2) { margin-right: 0 !important; }
body.d-shell #cold .cold-phone-cell { display: contents !important; }
body.d-shell #cold .cold-table .cold-phone-tap,
  body.d-shell #cold .cold-phone-cell input {
    /* RIGHT-anchored column (Josh round 11): the number's END is the shared
       edge — the status chevron below lines up with it exactly */
    position: absolute; top: 6px; right: 16px; left: auto;
  }
body.d-shell #cold .cold-phone-cell input { width: 130px !important; text-align: right; }
body.d-shell #cold .cold-note-send {
    width: 36px !important; height: 36px !important; min-height: 36px !important;
  }
body.d-shell #cold .cold-table td:nth-child(4) * { pointer-events: none; }
body.d-shell #cold .cold-table td:nth-child(4) select,
  body.d-shell #cold .cold-table td:nth-child(4) button { pointer-events: auto; }
body.d-shell #cold .cold-status-stack {
    /* status + date on ONE line ("Left Voicemail · Jul 30") — the date
       stacked below was colliding with the note band (Josh's fix #2) */
    flex-direction: row !important; align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
  }
body.d-shell #cold .cold-status-face {
    display: block; text-align: right;
    font-size: 0.8rem; font-weight: 600;
    color: var(--p-ink); white-space: nowrap;
    padding: 3px 0;
  }
body.d-shell #cold .cold-status-wrap .cold-status-select {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important;
    appearance: none !important; -webkit-appearance: none !important;
    min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important;
  }
body.d-shell #cold .cold-status-face.b-needs-info { color: #e0932e; }
body.d-shell #cold .cold-status-face.b-callback { color: #e0a94a; }
body.d-shell #cold .cold-status-face.b-not-interested,
  body.d-shell #cold .cold-status-face.b-bad-number,
  body.d-shell #cold .cold-status-face.b-not-relevant { color: #e5533d; }
body.d-shell #cold .cold-status-face.b-dormant { color: #b3a6f0; }
body.d-shell #cold .cold-last-contact { display: none !important; }
body.d-shell #cold .cold-table td:nth-child(2) { margin-right: 168px !important; }
body.d-shell #cold tr.note-open td:nth-child(4) { top: 40px !important; }
body.d-shell #cold .cold-note-box {
    animation: m-note-in 0.18s ease;
    display: flex; align-items: flex-end; gap: 8px;
    width: 100%;
  }
body.d-shell #appView #cold .cold-table .cold-note-box textarea.cold-notes {
    flex: 1 1 auto; min-width: 0;
    background: var(--m-wash) !important;
    border: 0 !important; border-radius: 12px !important;
    padding: 10px 12px !important;
    font-size: 16px !important; line-height: 1.4 !important;
    color: var(--p-ink) !important;
    resize: none; overflow-y: auto;
    min-height: 42px; max-height: 160px;
    white-space: pre-wrap; overflow-wrap: break-word;
  }
body.d-shell #cold .cold-note-box { animation: none; }
body.d-shell #tasks .premeeting-strip { margin: 0 var(--m-x); }
.m-act-triage {
    display: flex; align-items: center; gap: 12px;
    width: calc(100% - 2 * var(--m-x));
    margin: 4px var(--m-x) 10px; padding: 14px 16px;
    border: 1px solid var(--p-hair-hi); border-radius: var(--m-radius);
    background: var(--m-wash); color: var(--p-ink);
    text-align: left; cursor: pointer;
  }
.m-act-triage:active { background: var(--m-wash-hi); }
.m-act-triage-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.m-act-triage-main strong { font-size: 0.95rem; font-weight: 700; color: var(--t-bad); }
.m-act-triage-main span { font-size: 0.8rem; color: var(--p-ink-soft); }
.m-act-triage-go { font-size: 1.5rem; line-height: 1; color: var(--p-ink-faint); }
.m-sheet-triage { width: 100%; margin: 12px 0 0; }
.m-act-group {
    display: flex; align-items: baseline; gap: 8px;
    padding: 18px var(--m-x) 6px;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--p-ink-soft);
  }
.m-act-group em { font-style: normal; font-weight: 650; color: var(--p-ink-faint); }
.m-act-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px var(--m-x);
    border-bottom: 1px solid var(--p-hair);
  }
.m-act-check {
    flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
    border: 1.6px solid var(--p-hair-hi); border-radius: 50%;
    background: transparent; cursor: pointer;
    position: relative;
  }
.m-act-check::after { content: ''; position: absolute; inset: -9px; }
.m-act-dot { flex: 0 0 auto; width: 8px; height: 8px; margin: 9px 9px 0; border-radius: 50%; background: var(--p-ink-faint); }
.m-act-dot.done { background: var(--m-brand); }
.m-act-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-act-title { font-size: 0.95rem; font-weight: 620; line-height: 1.3; color: var(--p-ink); }
.m-act-sub { font-size: 0.8rem; color: var(--p-ink-soft); }
.m-act-when { font-style: normal; color: var(--p-ink-faint); }
.m-act-row.overdue .m-act-when { color: var(--t-bad); font-weight: 650; }
.m-act-row.logged .m-act-title { font-weight: 500; color: var(--p-ink-soft); }
.m-act-row.act-completing { opacity: 0.45; }
.m-act-row.act-completing .m-act-check::before {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.85rem; font-weight: 700;
  }
.m-log-btn svg { width: 100%; height: 100%; }
.m-log-btn:active { background: var(--m-wash); color: var(--p-ink); }
body.d-shell #cold .cold-status-stack .m-log-btn { margin-top: 2px; pointer-events: auto; }
#mLogSheet, #mBriefReply { position: fixed; inset: 0; z-index: 70; }
#mLogSheet .m-log-scrim,
  #mBriefReply .m-log-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
#mLogSheet .m-log-panel,
  #mBriefReply .m-log-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px var(--m-x) calc(var(--m-nav-pad) + 10px);
    border-radius: var(--m-radius) var(--m-radius) 0 0;
    background: var(--p-card);
  }
body.night-mode #mLogSheet .m-log-panel,
  #mBriefReply .m-log-panel { background: #0e0e10; }
#mLogSheet .m-log-title,
  #mBriefReply .m-log-title {
    margin: 2px 4px 10px; font-size: 0.95rem; font-weight: 700; color: var(--p-ink);
  }
#mLogSheet .m-log-row,
  #mBriefReply .m-log-row {
    display: block; width: 100%; text-align: left;
    padding: 14px 4px;
    border: 0; border-bottom: 1px solid var(--p-hair);
    background: transparent; color: var(--p-ink);
    font-size: 0.95rem; font-weight: 600; cursor: pointer;
  }
#mLogSheet .m-log-row,
  #mBriefReply .m-log-row:active { background: var(--m-wash); }
#mLogSheet .m-log-cancel,
  #mBriefReply .m-log-cancel { border-bottom: 0; color: var(--p-ink-soft); text-align: center; }
.m-act-x {
    flex: 0 0 auto; width: 34px; height: 34px; margin: -6px -8px 0 0;
    border: 0; background: transparent; color: var(--p-ink-faint);
    font-size: 0.85rem; cursor: pointer;
  }
.m-act-fold {
    display: block; width: 100%; text-align: left;
    padding: 14px var(--m-x);
    border: 0; border-bottom: 1px solid var(--p-hair);
    background: transparent; color: var(--p-ink-soft);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
  }
.m-act-fold:active { background: var(--m-wash); }
.m-act-empty { padding: 24px var(--m-x); font-size: 0.9rem; color: var(--p-ink-soft); }
.m-act-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px var(--m-x) 12px; }
.m-act-add select, .m-act-add input {
    flex: 1 1 100%; height: 44px; padding: 0 12px;
    font-size: 16px;   /* the iOS focus-zoom floor */
    background: var(--m-wash); border: 1px solid var(--p-hair); border-radius: 12px;
    color: var(--p-ink);
  }
.m-act-add button { height: 40px; padding: 0 18px; border-radius: var(--m-round); }
.m-act-add .message { flex: 1 1 100%; margin: 0; }
body.d-shell #cold .cold-table .cold-phone-tap:active { opacity: 0.6; }
.m-sheet-stats {
    display: flex; gap: 8px; overflow-x: auto;
    margin: 8px calc(-1 * var(--m-x)) 4px; padding: 2px var(--m-x) 6px;
    scrollbar-width: none;
  }
.m-sheet-stats::-webkit-scrollbar { display: none; }
.m-sheet-stat {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 92px;
    padding: 10px 14px;
    background: var(--m-wash); border-radius: var(--m-radius);
  }
.m-sheet-stat strong { font-size: 1.25rem; font-weight: 750; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.m-sheet-stat span { font-size: 0.72rem; color: var(--p-ink-soft); white-space: nowrap; }
.m-sheet-cardrow::-webkit-scrollbar { display: none; }
.m-sheet-card {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 3px;
    width: 172px;
    padding: 12px 13px;
    border: 0; border-radius: var(--m-radius);
    background: var(--m-wash);
    text-align: left; cursor: pointer;
  }
.m-sheet-card:active { background: var(--m-wash-hi); }
.m-sheet-card strong {
    font-size: 0.88rem; font-weight: 650; color: var(--p-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.3;
  }
.m-sheet-card span {
    font-size: 0.74rem; color: var(--p-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
.m-sheet-card em { font-style: normal; font-size: 0.72rem; color: var(--p-ink-faint); }
.m-sheet-card.overdue em { color: var(--t-bad); font-weight: 650; }
.m-sheet-section { margin-top: 16px; }
.m-sheet-section-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--p-ink-faint);
  }
.m-sheet-section-head svg { width: 16px; height: 16px; }
.m-sheet-row {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    border: 0; text-align: left; cursor: pointer;
    background: transparent; border-radius: 12px;
    border-bottom: 1px solid var(--p-hair);
  }
.m-sheet-row:last-child { border-bottom: 0; }
.m-sheet-row:active { background: var(--m-wash); }
.m-sheet-row .m-sheet-row-main {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
  }
.m-sheet-row .m-sheet-row-main strong {
    font-size: 0.94rem; font-weight: 600; color: var(--p-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
.m-sheet-row .m-sheet-row-main span {
    font-size: 0.78rem; color: var(--p-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
.m-sheet-row .m-sheet-when {
    flex: 0 0 auto; font-size: 0.74rem; font-variant-numeric: tabular-nums;
    color: var(--p-ink-faint); white-space: nowrap;
  }
.m-sheet-row.overdue .m-sheet-when { color: var(--t-bad); font-weight: 650; }
.m-brief-quote p {
    margin: 0; font-style: italic; font-size: 0.95rem; line-height: 1.5;
    color: var(--p-ink);
  }
.m-brief-quote cite {
    display: block; margin-top: 3px;
    font-style: normal; font-size: 0.75rem; color: var(--p-ink-faint);
  }
.m-brief-grit {
    margin: 0 0 12px; font-size: 0.88rem; font-weight: 650;
    letter-spacing: 0.01em; color: var(--p-ink-soft);
  }
.m-brief-strong {
    margin: 10px 0 2px; font-size: 0.92rem; font-weight: 700;
    color: var(--p-ink);
  }
.m-brief-divider { border: 0; border-top: 1px solid var(--p-hair); margin: 14px 0; }
.m-brief-reply {
    display: inline-block; width: auto;
    margin: 12px 0 2px; padding: 8px 20px;
    border: 1px solid var(--p-hair-hi); border-radius: var(--m-round);
    background: transparent; color: var(--p-ink);
    font-size: 0.85rem; font-weight: 650;
    cursor: pointer;
  }
.m-brief-reply:active { background: var(--m-wash); }
.m-brief-word {
    margin: 8px 0 0; font-size: 0.92rem; line-height: 1.55;
    color: var(--p-ink);
  }
.m-brief-fwd { border-left-color: rgba(63, 174, 125, 0.55); }
.m-brief-cleanup { border-left-color: rgba(222, 170, 80, 0.45); }
.m-brief-hero { border-left-color: var(--m-brand); }
.m-brief-eyebrow {
    margin: 0 0 4px; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--p-ink-soft);
  }
.m-brief-hero .m-brief-eyebrow { color: var(--m-brand); }
.m-brief-hero-line { margin: 0; font-size: 1.02rem; line-height: 1.5; font-weight: 600; color: var(--p-ink); }
.m-brief-line {
    display: block; width: 100%; text-align: left;
    margin: 0 0 6px; padding: 0; border: 0; background: transparent;
    font-size: 0.9rem; line-height: 1.5; color: var(--p-ink);
  }
.m-brief-cleanup .m-brief-line { font-size: 0.85rem; color: var(--p-ink-soft); }
.m-brief-triage { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--p-hair-hi); }
.m-brief-name { color: var(--m-link); text-decoration: none; font-weight: 650; }
.m-reply-text, .m-reply-name {
    width: 100%; margin: 0 0 10px; padding: 11px 12px;
    font-size: 16px;   /* iOS focus-zoom floor */
    background: var(--m-wash); border: 1px solid var(--p-hair); border-radius: 12px;
    color: var(--p-ink);
  }
.m-reply-text { min-height: 96px; }
.m-brief-donna-head {
    margin: 10px 0 2px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--p-ink-soft);
  }
.m-brief-donna-line {
    margin: 4px 0; font-size: 0.88rem; line-height: 1.5;
    color: var(--p-ink);
  }
.m-brief-donna-line .thread-link { color: var(--m-link); text-decoration: none; }
.m-move-item:last-child { border-bottom: 0; }
.m-move-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
.m-move-head strong { font-size: 0.95rem; font-weight: 700; color: var(--p-ink); }
.m-move-head span { font-size: 0.75rem; color: var(--p-ink-faint); }
.m-move-item p {
    margin: 5px 0 0; font-size: 0.88rem; line-height: 1.5;
    color: var(--p-ink);
  }
.m-move-item .m-move-next { color: var(--p-ink-soft); font-weight: 600; }
.m-move-empty { padding: 14px 0; font-size: 0.88rem; color: var(--p-ink-soft); }
.m-acct-add input, .m-acct-add textarea {
    flex: 1 1 100%; padding: 11px 12px;
    font-size: 16px;   /* the iOS focus-zoom floor */
    background: var(--m-wash); border: 1px solid var(--p-hair); border-radius: 12px;
    color: var(--p-ink);
  }
.m-acct-add textarea { min-height: 74px; }
.m-acct-add-actions { display: flex; gap: 8px; }
.m-acct-add .message { flex: 1 1 100%; margin: 0; }
.m-sheet-empty {
    padding: 10px 12px; font-size: 0.85rem; color: var(--p-ink-faint);
  }
.m-sheet-more { padding: 6px 12px 0; font-size: 0.78rem; color: var(--p-ink-faint); }

  /* ---- THE DOCKED CONVERSATION: one surface, two doors ------------------ */
  /* the dock leaves fullscreen and becomes the right panel */
  body.d-shell.d-chat-open #donnaDock.open {
    /* CHAT ON THE LEFT (Josh, 2026-08-02): rail -> chat -> tab content ->
       story. Reading order runs conversation-first. */
    position: fixed !important;
    top: 0 !important; left: 80px !important; bottom: 0 !important;
    right: auto !important;
    width: 380px !important; max-width: 380px !important;
    height: 100vh !important;
    border-right: 1px solid var(--p-hair) !important;
    border-radius: 0 !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.18) !important;
    transform: none !important;
    z-index: 90;
  }
  /* the app shifts left and stays fully usable — the list never hides
     (the compaction payoff) */
  body.d-shell #appView { transition: margin-left 0.22s ease; }
  /* the thread inside adopts panel proportions */
  body.d-shell.d-chat-open #donnaDock .capture-thread-root {
    width: 100% !important; max-width: 100% !important;
  }
  /* below ~1200px the panel OVERLAYS the workspace edge instead of
     squeezing it (proposal: nothing ever gets crushed) */
  @media (max-width: 1199px) {
    /* narrow desktop: the story tucks first, then the chat overlays */
    body.d-shell.d-chat-open #donnaDock.open { box-shadow: 18px 0 60px rgba(0, 0, 0, 0.5) !important; }
  }
}

@media (min-width: 1024px) {
  /* the workspace shows the story BODY only — the phone's drag peek is
     meaningless with a mouse (story-as-landing, persistent) */
  body.d-shell #dWorkspace .m-sheet-peek { display: none; }
  body.d-shell #dWorkspace .d-work-story > div { display: block; }
  body.d-shell #dWorkspace .m-sheet-body { display: block; }
  /* a workspace headline of its own */
  body.d-shell #dWorkspace .d-work-story::before {
    content: ''; display: block; height: 4px;
  }
}

@media (min-width: 1024px) {
  /* the log button's sizing didn't survive the coat extraction — the svg
     exploded to natural size (probe: 300x300). Pinned here. */
  body.d-shell .m-log-btn {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--p-ink-faint); cursor: pointer;
  }
  body.d-shell .m-log-btn svg { width: 100%; height: 100%; }
  body.d-shell .m-log-btn:hover { background: var(--m-wash); color: var(--p-ink); }
  /* the column's tables never exceed the column */
  body.d-shell.d-split #matrix .table-wrap,
  body.d-shell.d-split #matrix .table-wrap table,
  body.d-shell.d-split #cold .table-wrap,
  body.d-shell.d-split #cold .cold-table {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  /* the active chip: body counts as an element — the night base rule was
     out-ranking .active by exactly that one element (the house scar class) */
  body.night-mode #dColumnHead .m-chip.active {
    background: var(--t-action); color: var(--t-action-ink);
  }
  body.night-mode #dColumnHead .m-chip.active strong { color: var(--t-action-ink); opacity: 0.75; }
}

@media (min-width: 1024px) {
  /* the desktop table's legacy row-height pin clips the card (probe:
     height 80 vs content 97) — double-id authority, the house shape */
  body.d-shell #appView #matrix .matrix-mcard,
  body.d-shell #appView #matrix .matrix-mcard .mcard-td,
  body.d-shell #appView #cold .cold-table tbody tr,
  body.d-shell #appView #cold .cold-table tbody td {
    height: auto !important; min-height: 0 !important; max-height: none !important;
  }
  body.d-shell #appView #matrix .matrix-mcard { min-height: 72px !important; }
}

@media (min-width: 1024px) {
  /* the workspace was PAINTING BEHIND #appView's opaque canvas (rect
     probes ignore paint order — the pixel is the truth) */
  body.d-shell.d-split #dWorkspace { z-index: 45; }
}

@media (min-width: 1024px) {
  /* the docked panel's INNER layout: the fullscreen thread positions
     itself in viewport coordinates — inside the 380px panel it painted
     into the void. Reflow as a plain column: head, scrolling thread,
     composer at the foot. */
  body.d-shell.d-chat-open #donnaDock.open {
    display: flex !important; flex-direction: column !important;
    padding: 0 !important;
  }
  body.d-shell.d-chat-open #donnaDock.open #captureThreadRoot {
    position: static !important;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    width: 100% !important; max-width: 100% !important;
    inset: auto !important; transform: none !important;
    margin: 0 !important; padding: 0 !important;
  }
  body.d-shell.d-chat-open #donnaDock.open #captureThreadRoot .capture-thread {
    position: static !important;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto !important;
    width: 100% !important; max-width: 100% !important;
    inset: auto !important; margin: 0 !important;
    padding: 12px 14px !important;
  }
  body.d-shell.d-chat-open #donnaDock.open #captureBar {
    position: static !important;
    flex: 0 0 auto;
    width: 100% !important; max-width: 100% !important;
    inset: auto !important; transform: none !important;
    margin: 0 !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--p-hair);
  }
}

@media (min-width: 1024px) {
  /* the panel lifts off the canvas — an empty thread read as a void */
  body:not(.night-mode).d-shell.d-chat-open #donnaDock.open { background: var(--p-canvas) !important; }
}

@media (min-width: 1024px) {
  /* ---- PART 1: the bell (solo notifications) --------------------------- */
  #desktopRail .d-rail-bell {
    position: relative; width: 40px; height: 40px; margin-bottom: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; background: transparent;
    color: var(--p-ink-soft); cursor: pointer;
  }
  #desktopRail .d-rail-bell svg { width: 21px; height: 21px; }
  #desktopRail .d-rail-bell:hover { background: var(--m-wash); color: var(--p-ink); }
  #desktopRail .d-bell-dot {
    position: absolute; top: 7px; right: 8px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--m-link);
  }
  #dBellPanel {
    position: fixed; left: 88px; bottom: 96px; z-index: 95;
    width: 320px; padding: 12px 6px 8px;
    border: 1px solid var(--p-hair); border-radius: var(--m-radius);
    background: var(--p-card); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  }
  body.night-mode #dBellPanel { background: #0e0e10; }
  #dBellPanel .d-bell-title {
    margin: 0 10px 8px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-ink-soft);
  }
  #dBellPanel .d-bell-row {
    display: block; width: 100%; text-align: left;
    padding: 10px; border: 0; background: transparent;
    color: var(--p-ink); font-size: 0.86rem; line-height: 1.45;
    border-radius: 8px; cursor: pointer;
  }
  #dBellPanel .d-bell-row:hover { background: var(--m-wash); }
  #dBellPanel .d-bell-empty { margin: 0 10px 8px; font-size: 0.86rem; color: var(--p-ink-soft); }

  /* ---- PART 2/3: the panel's chrome + the context chip ------------------ */
  body.d-shell.d-chat-open #donnaDock.open { width: var(--d-chat-w) !important; max-width: var(--d-chat-w) !important; }
  #donnaDock .d-chat-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--p-hair);
  }
  #donnaDock .d-chat-name {
    flex: 1 1 auto; font-size: 0.95rem; font-weight: 700; color: var(--p-ink);
  }
  #donnaDock .d-chat-new, #donnaDock .d-chat-drafts {
    border: 1px solid var(--p-hair); border-radius: 999px;
    padding: 5px 12px; background: transparent;
    color: var(--p-ink-soft); font-size: 0.78rem; font-weight: 650; cursor: pointer;
  }
  #donnaDock .d-chat-new:hover, #donnaDock .d-chat-drafts:hover { background: var(--m-wash); color: var(--p-ink); }
  #donnaDock .d-chat-drafts strong { color: var(--m-link); }
  /* the tag chip — UNMISTAKABLE (a wrong tag is a mis-file) */
  #dTagChip {
    display: flex; align-items: center; gap: 8px;
    margin: 0 12px 8px; padding: 7px 12px;
    border: 1px solid var(--m-link); border-radius: 999px;
    background: rgba(237, 197, 91, 0.10);
  }
  #dTagChip .d-tag-name {
    flex: 1 1 auto; font-size: 0.85rem; font-weight: 700; color: var(--p-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #dTagChip .d-tag-pin { font-size: 0.8rem; }
  #dTagChip .d-tag-clear {
    border: 0; background: transparent; color: var(--p-ink-soft);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px;
  }
  #dTagChip .d-tag-clear:hover { color: var(--p-ink); }
  /* the floating bubble retires on desktop v2 — the panel IS the door */
  body.d-shell #threadBadgeRootFixed { display: none !important; }
  /* premium thread feel: calm measure, generous line-height */
  body.d-shell.d-chat-open #donnaDock .thread-bubble,
  body.d-shell.d-chat-open #donnaDock .brief-line,
  body.d-shell.d-chat-open #donnaDock p { line-height: 1.6; }

  /* ---- PART 4: the drafts tray (Workspace's In progress section) -------- */
  .d-drafts .m-sheet-section-head em { font-style: normal; color: var(--p-ink-faint); }
  .d-draft-row { padding: 12px 0; border-bottom: 1px solid var(--p-hair); }
  .d-draft-row:last-child { border-bottom: 0; }
  .d-draft-head { display: flex; align-items: baseline; gap: 10px; }
  .d-draft-head strong { font-size: 0.9rem; font-weight: 700; color: var(--p-ink); }
  .d-draft-head span { font-size: 0.78rem; color: var(--m-link); }
  .d-draft-row p { margin: 5px 0 8px; font-size: 0.86rem; line-height: 1.5; color: var(--p-ink-soft); }
  .d-draft-actions { display: flex; gap: 8px; }
  .d-draft-open, .d-draft-discard {
    border: 1px solid var(--p-hair); border-radius: 999px;
    padding: 5px 13px; background: transparent;
    color: var(--p-ink); font-size: 0.78rem; font-weight: 650; cursor: pointer;
  }
  .d-draft-open:hover { background: var(--m-wash); }
  .d-draft-discard { color: var(--p-ink-faint); }
  .d-draft-discard:hover { background: var(--m-wash); color: var(--p-ink); }
}

@media (min-width: 1024px) {
  /* ONE SURFACE (matching the phone's "one black" ruling): paper lifts
     panels, tables, and the thread onto card grey — under the desktop
     shell they all sit flat on the canvas, in BOTH themes. */
  body.d-shell #appView .panel,
  body.d-shell #appView .table-wrap,
  body.d-shell #appView .table-wrap table,
  body.d-shell #appView .table-wrap tbody,
  body.d-shell #appView #matrix .acct-group,
  body.d-shell #appView #cold .cold-table,
  body.d-shell #dWorkspace .m-sheet-body,
  body.d-shell #donnaDock .capture-thread-root,
  body.d-shell #donnaDock .capture-thread,
  body.d-shell #donnaDock .capture-bar {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--p-hair) !important;
  }
  /* the card rows carry the canvas, never a lifted tile */
  body.d-shell #appView #matrix .matrix-mcard,
  body.d-shell #appView #cold .cold-table tbody tr {
    background: transparent !important;
  }
  /* the composer's own field keeps a quiet wash so it reads as an input */
  body.d-shell #donnaDock #captureInput {
    background: var(--m-wash) !important;
    border: 1px solid var(--p-hair) !important;
    border-radius: 14px !important;
    color: var(--p-ink) !important;
  }
}

@media (min-width: 1024px) {
  /* THE LAST OF THE CHARCOAL (Josh: "still more charcoal gray in the tabs"):
     paper paints chips, tabs, toolbars, pills, and inputs on card grey.
     Under the desktop shell they ride the canvas with a hairline instead —
     the phone's language, in both themes. */
  body.d-shell #dColumnHead .m-chip,
  body.d-shell #dColumnHead .d-col-search input,
  body.d-shell #donnaDock .d-chat-new,
  body.d-shell #donnaDock .d-chat-drafts,
  body.d-shell #appView .matrix-tab,
  body.d-shell #appView .excel-tabs,
  body.d-shell #appView .cold-list-strip,
  body.d-shell #appView .matrix-tabs,
  body.d-shell #appView .accounts-mode-toggle,
  body.d-shell #appView .accounts-mode-toggle button,
  body.d-shell #appView .tasks-view-toggle,
  body.d-shell #appView .signal-label,
  body.d-shell #appView .rec,
  body.d-shell #appView .pill {
    background: transparent !important;
    border-color: var(--p-hair) !important;
    box-shadow: none !important;
  }
  body.d-shell #dColumnHead .m-chip { border: 1px solid var(--p-hair) !important; }
  /* the ACTIVE chip is the only filled one — the action token, both themes */
  body.d-shell #dColumnHead .m-chip.active,
  body.night-mode.d-shell #dColumnHead .m-chip.active {
    background: var(--t-action) !important; color: var(--t-action-ink) !important;
    border-color: transparent !important;
  }
  body.d-shell #appView .matrix-tab.active,
  body.d-shell #appView .accounts-mode-toggle button.active {
    background: var(--m-wash-hi) !important; color: var(--p-ink) !important;
  }
  /* group headers + status pills keep their meaning colors, never a tile */
  body.d-shell #appView .acct-group-head,
  body.d-shell #appView .acct-group-head td,
  body.d-shell #appView .acct-group-toggle { background: transparent !important; }
}

@media (min-width: 1024px) {
  /* WIDE ACCOUNTS (Josh, 2026-08-02): "keep the original stuff compact —
     use the extra space to hold MORE information." The compact block holds
     a FIXED width (the phone's exact grammar); everything wider than that
     is filled by the extra column, never by stretching. */
  body.d-shell #matrix .matrix-mcard .mcard-td {
    display: flex !important; align-items: flex-start; gap: 28px;
  }
  body.d-shell #matrix .mc-main {
    flex: 0 0 auto;
    width: 380px; max-width: 380px;
  }
  body.d-shell #matrix .mc-extra {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    padding-top: 1px;
    border-left: 1px solid var(--p-hair);
    padding-left: 24px;
  }
  /* below ~1500px of window the extra stands down rather than crowding */
  @media (max-width: 1499px) {
    body.d-shell #matrix .mc-extra { display: none; }
    body.d-shell #matrix .mc-main { width: 100%; max-width: 100%; }
  }
  .mc-x-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--p-ink-faint);
  }
  .mc-x-note {
    font-size: 0.84rem; line-height: 1.45; color: var(--p-ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mc-x-next {
    font-size: 0.82rem; font-weight: 650; color: var(--p-ink); margin-top: 2px;
    /* the next action wraps to two lines rather than running off the card */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-width: 0;
  }
  .mc-x-meta { font-size: 0.76rem; color: var(--p-ink-faint); }
}

@media (min-width: 1024px) {
  /* ---- ALIGNMENT PASS (Josh, 2026-08-02): every card's name, date,
     number, log, star, and status line up on the same verticals; the two
     rows share one baseline grid. --------------------------------------- */
  body.d-shell #matrix .mc-main {
    display: flex; flex-direction: column; gap: 6px;
  }
  body.d-shell #matrix .mc-line1,
  body.d-shell #matrix .mc-line2 {
    display: grid !important;
    grid-template-columns: 1fr 168px;   /* text column | right rail, both rows */
    align-items: center; gap: 12px; margin: 0 !important;
  }
  body.d-shell #matrix .mc-line1 .cold-name-row { align-items: baseline; }
  body.d-shell #matrix .mc-phone {
    justify-self: end; font-variant-numeric: tabular-nums;
  }
  body.d-shell #matrix .mc-right {
    justify-self: end;
    display: inline-flex; align-items: center; gap: 10px;
  }
  /* one fixed width so the star and the log button land on the same
     vertical in EVERY row, whatever the status word */
  body.d-shell #matrix .mc-stage-face {
    width: 116px; min-width: 116px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* the logger reads as a LOG: icon + word, quiet outline, aligned left of
     the star so the three controls sit on one line */
  body.d-shell #matrix .m-log-btn {
    width: auto !important; height: 26px !important;
    padding: 0 10px 0 7px !important;
    gap: 5px; border-radius: 999px !important;
    border: 1px solid var(--p-hair) !important;
    color: var(--p-ink-soft) !important;
  }
  body.d-shell #matrix .m-log-btn svg { width: 14px !important; height: 14px !important; }
  body.d-shell #matrix .mc-log-word { font-style: normal; font-size: 0.72rem; font-weight: 650; }
  body.d-shell #matrix .m-log-btn:hover { border-color: var(--p-hair-hi) !important; color: var(--p-ink) !important; }
  body.d-shell #matrix .mc-star { width: 26px !important; height: 26px !important; margin: 0 !important; }
  /* the extra column's rows share the card's vertical rhythm */
  body.d-shell #matrix .mc-extra { justify-content: center; }

  /* ---- THE ACCOUNT PAGE: no grey (Josh: "when I click on an account I
     don't want that gray") — the profile's cards/panels/heroes go flat on
     the shell canvas, both themes. ------------------------------------- */
  body.d-shell #appView #profile,
  body.d-shell #appView #profile .panel,
  body.d-shell #appView #profile .card,
  body.d-shell #appView #profile .tfp-card,
  body.d-shell #appView #profile .tfp-hero,
  body.d-shell #appView #profile .profile-hero,
  body.d-shell #appView #profile section,
  body.d-shell #appView #profile .rec,
  body.d-shell #appView #profile .pill,
  body.d-shell #appView #accounts .panel,
  body.d-shell #appView #accounts .card {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--p-hair) !important;
  }
  body.night-mode.d-shell #appView #profile { background: #060607 !important; }
}

@media (min-width: 1024px) {
  /* ---- CHAT DESIGN AUDIT (Josh, 2026-08-02): "I don't want it saying
     Donna all over" + Claude/ChatGPT restraint — the name appears ONCE in
     the header, every per-message tag and the duplicate in-thread header
     retire, and the composer keeps only the controls that do something. -- */
  body.d-shell #donnaDock .thread-source-tag,
  body.d-shell #donnaDock .thread-head,
  body.d-shell #donnaDock .capture-hint,
  body.d-shell #donnaDock .capture-icon-btn[title*="voice" i],
  body.d-shell #donnaDock .capture-wave,
  body.d-shell #donnaDock [data-capture-voice] { display: none !important; }
  /* the composer: one calm rounded field, a quiet plus, a single send */
  body.d-shell #donnaDock #captureBar {
    display: flex !important; align-items: flex-end; gap: 8px;
  }
  body.d-shell #donnaDock #captureInput {
    flex: 1 1 auto; min-height: 44px; padding: 12px 14px !important;
    font-size: 0.92rem !important; line-height: 1.5 !important;
  }
  body.d-shell #donnaDock .capture-icon-btn,
  body.d-shell #donnaDock .capture-send {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50% !important;
  }
  /* messages: Claude-calm blocks — the user's turn quietly washed, Donna's
     plain on the canvas, generous measure, no bubble-on-bubble */
  body.d-shell #donnaDock .thread-bubble {
    background: transparent !important; border: 0 !important;
    padding: 2px 0 !important; box-shadow: none !important;
    font-size: 0.92rem; line-height: 1.62;
  }
  body.d-shell #donnaDock .thread-kind-user .thread-bubble,
  body.d-shell #donnaDock [class*="thread-user"] {
    background: var(--m-wash) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
  }
  body.d-shell #donnaDock .thread-exchange { margin-bottom: 18px !important; }
  /* the last grey in the panel: the composer shell */
  body.d-shell #donnaDock .capture-bar { background: transparent !important; }
  body.night-mode.d-shell #donnaDock .tfp-menu-panel { background: #0e0e10 !important; }
}