/* ============================================================================
   DESK (minimal · v2.23.33). Stripped to three surfaces: On My Plate (#dkPlate),
   the Approve queue (#dkApprovals), and In Progress now (#dkInProgress, in the
   right rail). FLAT + token-only styling — no gradients, no glow — so it reads as
   a calm professional desk in both the harrigan-dark and apple-light themes.
   ========================================================================== */

/* Single centered column on mobile; 2-column (main + side rail) on desktop.
   v2.23.35 MOBILE FIX: the In-Progress "Now" rail (.col-side) used to be
   `display:none` below 900px, so it VANISHED on phones (the JS column-placer
   was supposed to move #dkInProgress into .col-main, but that DOM-move was
   fragile — once the card landed in .col-side it stayed hidden). The rail now
   STACKS BELOW the main column on mobile (visible, full-width) regardless of
   which column the JS parks the card in, so In-Progress is always reachable. */
#t-de .col-main{max-width:680px;margin:0 auto}
#t-de .col-side{display:block;max-width:680px;margin:14px auto 0}
#t-de .col-side:empty{display:none;margin:0}
#t-de .col-side>*{margin-bottom:10px}
#t-de .col-side>:last-child{margin-bottom:0}
@media(min-width:900px){
 #t-de.on{display:flex;gap:20px;align-items:flex-start}
 #t-de .col-main{flex:1;min-width:0;max-width:none;margin:0}
 #t-de .col-side{display:block;flex:0 0 33%;min-width:0;max-width:none;margin:0}
 #t-de .col-side>*{margin-bottom:12px}
 #t-de .col-side>:last-child{margin-bottom:0}
}

/* Hero — FLAT surface, hairline border (was a blue→purple gradient). */
.dk-hero{background:var(--c2);border:1px solid var(--b1);border-radius:16px;padding:20px 18px;margin-bottom:6px}
.dk-hero-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.dk-hero-main{min-width:0;flex:1}
.dk-greet{font-family:Inter;font-size:23px;font-weight:800;color:var(--t1);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.dk-summary{font-size:13px;color:var(--t2);line-height:1.55;margin-top:7px;max-width:48ch}
.dk-summary b{color:var(--t1);font-weight:800}
.dk-glance{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;text-align:right}
.dk-glance-wx{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--t1)}
.dk-glance-wx .dk-wx-i{font-size:18px}
.dk-glance-time{font-family:'JetBrains Mono';font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}

/* Section headings. */
.dk-sec-head{display:flex;align-items:baseline;gap:9px;margin:22px 2px 10px;flex-wrap:wrap}
.dk-sec-title{font-size:13px;font-weight:800;color:var(--t1);letter-spacing:-.01em}
.dk-sec-sub{font-size:10px;color:var(--t4);font-weight:500}
.dk-card{margin-bottom:0;padding:14px 16px}
.dk-empty{padding:18px 14px;text-align:center;color:var(--t4);font-size:12px;line-height:1.55}
.dk-empty .dk-empty-i{font-size:20px;display:block;margin-bottom:6px;opacity:.85}

/* v2.23.35 — section header controls: live count badge + header actions
   (manual refresh, last-synced stamp, Approve-all). Token-only, flat. */
.dk-sec-head{position:relative}
.dk-sec-count{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--t3);background:var(--c3);border:1px solid var(--b1);border-radius:6px;padding:1px 6px;font-variant-numeric:tabular-nums;line-height:1.5}
.dk-sec-spacer{flex:1 1 auto}
.dk-sec-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.dk-synced{font-size:10px;color:var(--t4);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.dk-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;border:1px solid var(--b1);border-radius:8px;background:transparent;color:var(--t3);cursor:pointer;transition:border-color .15s,color .15s,background-color .15s;padding:0}
.dk-iconbtn:hover{border-color:var(--b2);color:var(--t1);background:var(--c3)}
.dk-iconbtn:focus-visible{outline:2px solid var(--b2);outline-offset:2px}
.dk-iconbtn svg{width:14px;height:14px;display:block}
.dk-iconbtn.is-spinning svg{animation:dkSpin .8s linear infinite}
@keyframes dkSpin{to{transform:rotate(360deg)}}
.dk-textbtn{font-family:Inter;font-size:11px;font-weight:700;color:var(--gn);background:transparent;border:1px solid color-mix(in srgb,var(--gn) 28%,var(--b1));border-radius:8px;padding:5px 10px;min-height:28px;cursor:pointer;transition:border-color .15s,background-color .15s}
.dk-textbtn:hover{border-color:color-mix(in srgb,var(--gn) 55%,transparent);background:color-mix(in srgb,var(--gn) 8%,transparent)}
.dk-textbtn:focus-visible{outline:2px solid var(--b2);outline-offset:2px}
.dk-textbtn[disabled]{opacity:.45;cursor:default}

/* Loading skeleton rows — subtle shimmer, distinct from the empty states. */
.dk-skel{padding:4px 0}
.dk-skel-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-top:1px solid var(--b1)}
.dk-skel-row:first-child{border-top:none}
.dk-skel-bar{height:11px;border-radius:6px;background:linear-gradient(90deg,var(--c2) 25%,var(--c3) 50%,var(--c2) 75%);background-size:200% 100%;animation:dkShimmer 1.4s ease-in-out infinite}
.dk-skel-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--c3);animation:dkShimmer 1.4s ease-in-out infinite}
.dk-skel-card{background:var(--c2);border:1px solid var(--b1);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.dk-skel-card .dk-skel-bar{margin-bottom:8px}
@keyframes dkShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.dk-skel-bar,.dk-skel-dot{animation:none}.dk-iconbtn.is-spinning svg{animation:none}}

/* Resilient error state — "Couldn't load — Retry". */
.dk-error{padding:16px 14px;text-align:center;color:var(--t3);font-size:12px;line-height:1.55;border:1px solid color-mix(in srgb,var(--rd) 24%,var(--b1));border-radius:10px;background:color-mix(in srgb,var(--rd) 5%,transparent)}
.dk-error .dk-empty-i{font-size:20px;display:block;margin-bottom:6px;opacity:.85}
.dk-error .dk-retry{margin-top:10px;font-family:Inter;font-size:11px;font-weight:700;color:var(--t1);background:transparent;border:1px solid var(--b2);border-radius:8px;padding:7px 16px;min-height:34px;cursor:pointer;transition:border-color .15s,background-color .15s}
.dk-error .dk-retry:hover{border-color:var(--t3);background:var(--c3)}
.dk-error .dk-retry:focus-visible{outline:2px solid var(--b2);outline-offset:2px}

/* Keyboard selection ring on the focused Approve proposal card (j/k navigation). */
.dk-prop.dk-kbd-sel{border-color:var(--bl);border-left-color:var(--bl);box-shadow:0 0 0 2px color-mix(in srgb,var(--bl) 35%,transparent)}

/* Generic task row (On My Plate body lives in desk-notion-render.js CSS). */
.dk-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--b1)}
.dk-row:first-child{border-top:none}
.dk-row-body{min-width:0;flex:1}
.dk-row-title{font-size:12px;font-weight:600;color:var(--t1);line-height:1.4}
.dk-row-meta{font-size:10px;color:var(--t4);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Approve queue — proposals as clean, FLAT action cards. A single thin muted
   left-border is the only accent (no gradient, no loud red bar). The per-card
   --dk-prop-accent is dialled down to a muted token so the card stays restrained. */
.dk-prop{cursor:pointer;background:var(--c2);border:1px solid var(--b1);border-left:2px solid var(--b2);border-radius:10px;padding:12px 14px;margin-bottom:8px;transition:border-color .15s,background-color .15s}
.dk-prop:hover{border-color:var(--b2);border-left-color:var(--t3);background:var(--c3)}
.dk-prop-title{font-size:13px;font-weight:700;color:var(--t1);line-height:1.4;overflow-wrap:anywhere;text-wrap:pretty}
.dk-prop-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:5px;font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.2px}
.dk-prop-sep{color:var(--t4)}
.dk-prop-type{color:var(--t2)}
.dk-prop-client{color:var(--t2)}
/* v2.23.35: "Added <date>" — small, muted, under the meta line. */
.dk-prop-added{font-size:10px;color:var(--t4);font-weight:500;margin-top:3px}
/* Dismiss (permanent) action — muted danger tint, distinct from the green approve. */
.dk-act button.dk-dismiss{border-color:color-mix(in srgb,var(--rd) 22%,var(--b1));color:var(--t3)}
.dk-act button.dk-dismiss:active,.dk-act button.dk-dismiss:hover{border-color:color-mix(in srgb,var(--rd) 50%,transparent);background:color-mix(in srgb,var(--rd) 7%,transparent);color:var(--rd)}
.dk-act{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--b1);flex-wrap:wrap}
.dk-act button{background:transparent;border:1px solid var(--b1);color:var(--t2);font-family:Inter;font-size:11px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;min-height:32px;transition:border-color .15s,color .15s,background-color .15s}
.dk-act button:hover{border-color:var(--b2);color:var(--t1)}
.dk-act button:focus-visible{outline:2px solid var(--b2);outline-offset:2px}
.dk-act button.dk-approve{border-color:color-mix(in srgb,var(--gn) 28%,var(--b1));color:var(--gn)}
.dk-act button.dk-approve:active,.dk-act button.dk-approve:hover{border-color:color-mix(in srgb,var(--gn) 55%,transparent);background:color-mix(in srgb,var(--gn) 8%,transparent);color:var(--gn)}
.dk-act button.dk-defer:active,.dk-act button.dk-defer:hover{border-color:color-mix(in srgb,var(--gd) 55%,transparent);background:color-mix(in srgb,var(--gd) 8%,transparent);color:var(--gd)}

@media(max-width:480px){.dk-greet{font-size:20px}.dk-hero-row{flex-direction:column}.dk-glance{flex-direction:row;align-items:center;gap:10px;text-align:left}}

/* Mobile Desk — comfortable spacing + 44px tap targets, even widget gaps. */
@media(max-width:899px){
 #t-de .col-main{overflow-x:hidden}
 .dk-sec-head{margin:26px 2px 12px}
 .dk-hero{margin-bottom:10px}
 /* Even spacing between the surviving Desk widget cards. */
 #dkApprovals,#dkInProgress.card{margin-bottom:10px}
 .dk-card{margin-bottom:10px}
 /* Action rows: bigger, easier-to-hit buttons that still wrap cleanly. */
 .dk-act{gap:8px;margin-top:10px;padding-top:10px}
 .dk-act button{min-height:44px;padding:9px 14px;font-size:11px;flex:1 1 auto;min-width:88px}
 /* Recent-work rows get a roomier tap target. */
 .dkip-row{padding:11px 0}
 .dk-row{padding:11px 0;min-height:44px}
}