/**
 * Overview primitives — the reusable half of the retired Workspace board CSS.
 *
 * The board itself is gone (drag & drop, resizable grid, card menu, settings
 * sheet, multi-board tabs). What survived is the part that was never about the
 * board at all: the vocabulary a summary card renders its BODY with — lists,
 * KPI tiles, progress bars, sparklines, chips, smart cards, trend pills.
 * Home reuses it verbatim so the dashboard looks like the product it came from.
 *
 * Prefix is .ov-* (was .ws-*) and the per-card hue variable is --oh (was --wh).
 */
/* ---- shared widget body primitives (widgets use these, never their own) ---- */
.ov-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.ov-li{display:flex;align-items:flex-start;gap:.5rem;font-size:.83rem;line-height:1.5;color:var(--text);min-width:0}
.ov-li-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none}
a.ov-li-t:hover{color:var(--oh,var(--accent))}
.ov-li-t small{display:block;color:var(--muted);font-size:.74rem;margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-li-meta{flex:0 0 auto;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ov-li-star{flex:0 0 auto;font-size:.72rem;color:#F59E0B}
.ov-li.overdue .ov-li-meta{color:var(--err,#EF4444)}
.ov-dot{flex:0 0 auto;width:7px;height:7px;margin-top:.42rem;border-radius:50%;
  background:var(--oh,var(--accent));opacity:.75}
.ov-li.overdue .ov-dot{background:var(--err,#EF4444);opacity:1}
.ov-swatch{flex:0 0 auto;width:7px;align-self:stretch;min-height:18px;border-radius:99px;background:var(--c,var(--accent))}
.ov-empty{margin:0;padding:.6rem 0;color:var(--muted);font-size:.82rem;text-align:center}
.ov-more{margin:.55rem 0 0;color:var(--muted);font-size:.74rem}
.ov-missing{color:var(--muted);font-size:.8rem;display:flex;flex-direction:column;gap:.3rem}
.ov-missing code{font-family:var(--font-mono);font-size:.72rem;direction:ltr}
.ov-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--border)}
.ov-act{font:inherit;font-size:.75rem;color:var(--oh,var(--accent));background:none;border:none;padding:.15rem 0;
  cursor:pointer;text-decoration:none}
.ov-act:hover{text-decoration:underline}
/* progress bar (goals, books) */
.ov-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--border) 70%,transparent);overflow:hidden;margin-top:.3rem}
.ov-bar i{display:block;height:100%;border-radius:99px;background:var(--pc,var(--oh,var(--accent)));transition:width .3s}
.ov-pct{flex:0 0 auto;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ov-li-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
/* KPI grid (focus, finance, stats) */
.ov-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:.5rem}
.ov-kpi{background:color-mix(in srgb,var(--oh,var(--accent)) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--oh,var(--accent)) 16%,var(--border));
  border-radius:10px;padding:.5rem .6rem;min-width:0}
.ov-kpi b{display:block;font-size:1.05rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-kpi span{display:block;font-size:.68rem;color:var(--muted);margin-top:.1rem}
.ov-kpi.in b{color:#10B981} .ov-kpi.out b{color:#EF4444}
/* 7/30-day mini bar strip (focus, stats) */
.ov-spark{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:.6rem}
.ov-spark i{flex:1;min-width:2px;border-radius:2px;background:var(--oh,var(--accent));opacity:.85;min-height:2px}
.ov-spark i.zero{opacity:.18}
/* habit week dots */
.ov-week{display:flex;gap:3px;flex:0 0 auto}
.ov-week span{width:9px;height:9px;border-radius:3px;background:color-mix(in srgb,var(--border) 80%,transparent)}
.ov-week span.on{background:var(--oh,var(--accent))}
/* chips (shortcuts, quick links) */
.ov-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.ov-chip{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;padding:.35rem .65rem;
  font-size:.76rem;color:var(--text);text-decoration:none;background:var(--bg);
  border:1px solid var(--border);border-radius:99px;transition:border-color .2s}
.ov-chip:hover{border-color:color-mix(in srgb,var(--oh,var(--accent)) 50%,transparent)}
.ov-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* unread dot (notifications) */
.ov-unread{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--oh,var(--accent));margin-top:.45rem}
/* book cover thumb */
.ov-cover{flex:0 0 auto;width:34px;aspect-ratio:2/3;border-radius:5px;object-fit:cover;
  background:color-mix(in srgb,var(--border) 60%,transparent);align-self:flex-start}
.ov-clock{text-align:center;padding:.5rem 0}
.ov-clock-t{font-size:1.9rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.ov-clock-d{margin-top:.3rem;font-size:.78rem;color:var(--muted)}
.ov-blank{grid-column:1/-1;padding:3rem 1rem;text-align:center;color:var(--muted);font-size:.9rem;
  border:1px dashed var(--border);border-radius:var(--r-lg,18px)}

/* ---- smart cards (priority rail) ---- */
.ov-smart{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem;margin-bottom:1rem}
.ov-sc{display:flex;gap:.65rem;padding:.8rem .9rem;border-radius:var(--r-md,14px);
  background:color-mix(in srgb,var(--pc) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--pc) 30%,var(--border));
  border-inline-start:3px solid var(--pc)}
.ov-sc-i{flex:0 0 auto;font-size:1rem;line-height:1.3}
.ov-sc-b{flex:1;min-width:0}
.ov-sc-b h4{margin:0;font-size:.85rem;font-weight:600;color:var(--text)}
.ov-sc-b p{margin:.2rem 0 0;font-size:.76rem;color:var(--muted);line-height:1.6}
.ov-sc-a{display:inline-block;margin-top:.45rem;font-size:.76rem;font-weight:600;color:var(--pc);text-decoration:none}
.ov-sc-a:hover{text-decoration:underline}
.ov-sc[data-p="critical"]{--pc:#EF4444}
.ov-sc[data-p="warning"]{--pc:#F59E0B}
.ov-sc[data-p="info"]{--pc:#3B82F6}
.ov-sc[data-p="suggestion"]{--pc:#8B5CF6}
/* ---- trend strip ---- */
.ov-trends{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.ov-trend{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;font-size:.75rem;
  color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:99px}
.ov-trend b{color:var(--text);font-weight:600}
.ov-trend .t-up{color:#10B981} .ov-trend .t-down{color:#EF4444} .ov-trend .t-flat{color:var(--muted)}

/* ==================================================================
   Overview layout — Home for a signed-in member.

   Three layouts, not one shrunk three ways:
     ≥1100px  two columns (8/4): the day on the left, tools on the right
     700–1099 one column; the side rail becomes horizontal scroll strips
     <700     thumb-first: compact greeting, chip row, full-width cards
   ================================================================== */
.ov{max-width:1240px;margin-inline:auto;padding:0 clamp(1rem,4vw,2rem) 3rem;display:flex;flex-direction:column;gap:1rem}

/* ---- greeting ---- */
.ov-hello h1{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;letter-spacing:-.02em}
.ov-hello .ov-sub{margin-top:.35rem;color:var(--muted);font-size:.92rem}

/* ---- admin strip ---- */
.ov-admin{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-radius:var(--r-md,14px);
  background:color-mix(in srgb,#EF4444 8%,var(--surface));border:1px solid color-mix(in srgb,#EF4444 26%,var(--border));
  font-size:.86rem;color:var(--text)}
.ov-admin-b{flex:1;min-width:0;color:var(--muted)}
.ov-admin-c{flex:0 0 auto;font-weight:600;color:#EF4444}

/* ---- grid ---- */
.ov-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem;align-items:start}
.ov-main,.ov-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
.ov-card{border:1px solid var(--border);border-radius:var(--r-lg,18px);background:var(--surface);padding:1.1rem 1.15rem}
.ov-card>h2{font-size:.95rem;font-weight:600;margin-bottom:.85rem;display:flex;align-items:center;gap:.45rem}

/* ---- priorities ---- */
.ov-pris{display:flex;flex-direction:column;gap:.5rem}
.ov-p{--pc:var(--accent);display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:12px;
  background:var(--bg);border:1px solid var(--border);border-inline-start:3px solid var(--pc);
  transition:border-color var(--dur,.25s),transform .15s}
.ov-p:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--pc) 45%,var(--border))}
.ov-p[data-u="overdue"]{--pc:#EF4444}
.ov-p[data-u="today"]{--pc:#F59E0B}
.ov-p[data-u="soon"]{--pc:#3B82F6}
.ov-p-i{flex:0 0 auto;font-size:1.05rem;line-height:1.3}
.ov-p-b{flex:1;min-width:0}
.ov-p-b b{display:block;font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-p-b small{display:block;color:var(--muted);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-p-amt{flex:0 0 auto;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ov-p-w{flex:0 0 auto;font-size:.74rem;color:var(--pc);font-variant-numeric:tabular-nums}

/* ---- continue ---- */
.ov-cont{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem}
.ov-cont-c{--oh:var(--accent);display:flex;flex-direction:column;gap:.3rem;padding:.75rem .85rem;border-radius:12px;
  background:var(--bg);border:1px solid var(--border);transition:border-color var(--dur,.25s),transform .15s;min-width:0}
.ov-cont-c:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.ov-cont-k{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--muted)}
.ov-cont-c b{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-cont-c small{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- quick actions ---- */
.ov-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.ov-q{--oh:var(--accent);display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .7rem;border-radius:11px;
  background:var(--bg);border:1px solid var(--border);font-size:.82rem;
  transition:border-color var(--dur,.25s),transform .15s}
.ov-q:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--oh) 50%,var(--border))}
.ov-q span:first-child{font-size:1rem;line-height:1}

/* ---- skeleton ---- */
.ov-skel{display:flex;flex-direction:column;gap:.5rem}
.ov-skel i{display:block;height:38px;border-radius:10px;background:var(--surface-2);animation:ov-pulse 1.4s ease-in-out infinite}
@keyframes ov-pulse{0%,100%{opacity:.45}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.ov-skel i{animation:none}}

/* ---- tablet: one column, side rail becomes horizontal strips ---- */
@media(max-width:1099px){
  .ov-grid{grid-template-columns:1fr}
  /* the rail's content is still useful, it just reads better across than down */
  .ov-quick{grid-template-columns:repeat(4,1fr)}
  .ov-smart{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

/* ---- phone: thumb-first ---- */
@media(max-width:699px){
  .ov{padding-inline:.85rem;gap:.85rem}
  .ov-card{padding:.9rem .95rem;border-radius:14px}
  /* quick actions become a one-swipe chip rail instead of a grid that pushes
     the priorities below the fold */
  .ov-quick{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:.2rem}
  .ov-quick::-webkit-scrollbar{display:none}
  .ov-q{flex:0 0 auto;scroll-snap-align:start;min-height:44px}
  /* Quick actions sit ABOVE the fold on a phone: on a small screen the thing
     you came to do is usually to add something. */
  .ov-side{order:-1}
  .ov-side #ovIns{order:2}
  .ov-cont{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:.5rem}
  .ov-cont::-webkit-scrollbar{display:none}
  .ov-cont-c{flex:0 0 78%;scroll-snap-align:start}
  .ov-kpis{grid-template-columns:repeat(2,1fr)}
  .ov-admin{font-size:.8rem;flex-wrap:wrap}
}

/* Greeting separator: its own element so it can't be swallowed by the bidi
   reordering that happens between two Persian-digit runs. */
.ov-sub .ov-sep{display:inline-block;margin-inline:.45rem;opacity:.5}

/* The smart-card action is a text link inside a dense card; give it a real
   touch box on phones without changing how it looks. */
@media(max-width:699px){
  .ov-sc-a{display:inline-flex;align-items:center;min-height:36px;padding-block:.4rem}
}