/* activity-modules.css — the activity graph + the module kit (concept, 2026-09-12)
   Shared by app-v35/dashboard-modules.html, app-v35/profile-activity.html and
   concepts/activity-modules-v1.html. Reads the canonical --rly-* names, which
   tokens.css exposes on app pages via its @import of the generated v3.6 set.
   No new brand hex anywhere: the sequential ramp is DERIVED from the accent by
   color-mix() so it flips correctly in dark mode by construction —
     light  L0 panel · L1 ≈#c6e1dc · L2 ≈#8ec4bc · L3 accent-ui · L4 ≈#1a5f57  (lightness .95 → .46)
     dark   L0 panel · L1 ≈#1f3d38 · L2 ≈#2a7267 · L3 accent-ui · L4 ≈#8ee2d3  (lightness .25 → .85)
   Monotone lightness in both modes = a sequential ramp, not a decoration. */

:root{
  --am-cell: 12px; --am-gap: 3px;
  --am-l0: var(--rly-panel);
  --am-l1: color-mix(in oklab, var(--rly-accent-ui) 28%, var(--rly-bg));
  --am-l2: color-mix(in oklab, var(--rly-accent-ui) 55%, var(--rly-bg));
  --am-l3: var(--rly-accent-ui);
  --am-l4: color-mix(in oklab, var(--rly-accent-ui) 58%, var(--rly-text-bright));
  --am-ease: cubic-bezier(.22,1,.36,1);
}

/* ── graph ─────────────────────────────────────────────────────────────── */
.am-graph{position:relative}
.am-graph--dense{--am-cell:10px;--am-gap:2px}
.am-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scrollbar-width:thin}
.am-grid{position:relative;display:grid;grid-template-columns:28px repeat(var(--am-cols,53),var(--am-cell));grid-template-rows:16px repeat(7,var(--am-cell));gap:var(--am-gap);width:max-content;font-family:var(--rly-font-mono);font-size:9.5px;color:var(--rly-text-muted)}
.am-month{align-self:end;white-space:nowrap;line-height:1}
.am-dow{align-self:center;line-height:1;position:sticky;left:0;z-index:2;background:var(--rly-bg);box-shadow:6px 0 0 var(--rly-bg);width:28px;padding-right:6px}
.mod .am-dow{background:var(--rly-bg);box-shadow:6px 0 0 var(--rly-bg)}
.am-dow--pad{pointer-events:none}
.am-cell{display:block;width:var(--am-cell);height:var(--am-cell);border-radius:2.5px;background:var(--am-l0);outline:none;transition:transform .12s var(--am-ease);cursor:default}
.am-cell[data-l="1"]{background:var(--am-l1)}
.am-cell[data-l="2"]{background:var(--am-l2)}
.am-cell[data-l="3"]{background:var(--am-l3)}
.am-cell[data-l="4"]{background:var(--am-l4)}
.am-cell--void{background:transparent}
.am-cell.is-hot,.am-cell:focus-visible{box-shadow:0 0 0 2px var(--rly-bg),0 0 0 3.5px var(--rly-accent-ui);transform:scale(1.18);position:relative;z-index:1}
.am-cell.is-hot{transition:none}
.am-foot{display:flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--rly-font-mono);font-size:10px;color:var(--rly-text-muted);flex-wrap:wrap}
.am-legend{display:inline-flex;align-items:center;gap:3px}
.am-legend .am-cell{--am-cell:11px;cursor:help}
.am-legend span{margin:0 3px}
.am-sp{flex:1}
.am-range{color:var(--rly-text-faint)}
.am-graph-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.am-count{font-size:13.5px;color:var(--rly-text-2)}
.am-count b{font-family:var(--rly-font-display);font-style:italic;font-weight:400;font-size:24px;color:var(--rly-text-bright);margin-right:2px;font-variant-numeric:tabular-nums}
.am-streak{font-family:var(--rly-font-mono);font-size:10.5px;color:var(--rly-text-muted);letter-spacing:.02em}
.am-streak i{font-style:normal;font-weight:600;color:var(--rly-accent-text)}
.am-tip{position:fixed;left:0;top:0;z-index:800;pointer-events:none;background:var(--rly-text-bright);color:var(--rly-bg);border-radius:6px;padding:7px 10px;font-size:11.5px;line-height:1.45;max-width:280px;opacity:0;transform:translate(-9999px,-9999px);transition:opacity .12s;display:flex;flex-direction:column;gap:1px}
.am-tip.show{opacity:1}
.am-tip b{font-weight:600}
.am-tip span{opacity:.8;font-family:var(--rly-font-mono);font-size:10px}
.am-empty{padding:26px 18px;text-align:center;color:var(--rly-text-muted)}
.am-empty b{display:block;font-size:13px;color:var(--rly-text-bright);font-weight:600;margin-bottom:4px}
.am-empty p{font-size:12px;max-width:42ch;margin:0 auto;line-height:1.55}
.am-empty--teach{padding:18px 12px}
.am-table{width:100%;border-collapse:collapse;font-size:12px}
.am-table th,.am-table td{padding:7px 9px;border-bottom:.5px solid var(--rly-border);text-align:left;white-space:nowrap}
.am-table th{font-family:var(--rly-font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--rly-text-muted);font-weight:600}
.am-table .num{text-align:right;font-variant-numeric:tabular-nums}
.am-table tr:last-child td{border-bottom:none}

/* ── the day sheet — the touch detail surface (register F5) ─────────────────
   On a coarse pointer this replaces the hover tooltip: a 14px cell cannot be a
   44px target, so the sheet names the day it is showing and carries prev/next,
   making a mis-tap visible and one tap from fixed. */
.am-sheet{position:fixed;left:0;right:0;bottom:0;z-index:820;background:var(--rly-bg);border-top:.5px solid var(--rly-border-hi);border-radius:14px 14px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.18);padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .22s cubic-bezier(.22,1,.36,1);max-height:60vh;overflow-y:auto}
.am-sheet.open{transform:none}
.am-sheet-hd{display:flex;align-items:center;gap:10px}
.am-sheet-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:center}
.am-sheet-t b{font-size:14px;color:var(--rly-text-bright);font-weight:600}
.am-sheet-t span{font-family:var(--rly-font-mono);font-size:11px;color:var(--rly-text-muted)}
.am-sheet-nav,.am-sheet-x{width:44px;height:44px;border:.5px solid var(--rly-border);border-radius:8px;background:var(--rly-bg);color:var(--rly-text-2);font-size:18px;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.am-sheet-nav:disabled{opacity:.3}
.am-sheet-x{font-size:13px}
.am-sheet-nav:focus-visible,.am-sheet-x:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--rly-accent-ui) 34%,transparent)}
.am-sheet-b{margin-top:12px;border-top:.5px solid var(--rly-border);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.am-sheet-row{display:flex;align-items:center;justify-content:space-between;padding:7px 2px;font-size:13px;color:var(--rly-text-2)}
.am-sheet-row b{font-family:var(--rly-font-mono);color:var(--rly-text-bright);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.am-sheet{transition:none}}

/* ── coarse pointers (register G3-G6) ───────────────────────────────────────
   Touch loses the affordances that only work with a mouse, rather than keeping
   them at a size nobody can hit: no hover tooltip, no drag grip (↑↓ do the
   reordering, and they are also the keyboard path), no width control. */
@media (pointer: coarse){
  .am-tip{display:none}
  .mod-grip{display:none}
  .mod-size{display:none}
  .am-scroll{touch-action:pan-x}   /* or a horizontal drag scroll-jacks the page */
}

/* forced-colors / print: levels must survive without the ramp */
@media (forced-colors:active){
  .am-cell{border:1px solid CanvasText;forced-color-adjust:none;background:Canvas}
  .am-cell[data-l="1"]{background:repeating-linear-gradient(45deg,CanvasText 0 1px,Canvas 1px 5px)}
  .am-cell[data-l="2"]{background:repeating-linear-gradient(45deg,CanvasText 0 1px,Canvas 1px 3px)}
  .am-cell[data-l="3"]{background:repeating-linear-gradient(45deg,CanvasText 0 2px,Canvas 2px 3px)}
  .am-cell[data-l="4"]{background:CanvasText}
}
@media print{.am-cell{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* ── host grid + module frame ──────────────────────────────────────────── */
.host{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.mod{grid-column:span 1;border:.5px solid var(--rly-border);border-radius:10px;background:var(--rly-bg);min-width:0;display:flex;flex-direction:column;transition:border-color .14s,box-shadow .14s,opacity .14s}
.mod[data-size="2"]{grid-column:span 2}
.mod[data-size="3"]{grid-column:span 3}
.mod-h{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;min-height:38px}
.mod-glyph{width:20px;height:20px;border-radius:6px;background:var(--rly-panel);color:var(--rly-text-2);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mod-glyph svg{width:12px;height:12px}
.mod-t{font-size:13px;font-weight:600;color:var(--rly-text-bright);margin:0;white-space:nowrap;flex-shrink:0}
.mod-lens{font-family:var(--rly-font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--rly-text-muted);border:.5px solid var(--rly-border);border-radius:4px;padding:1px 6px;white-space:nowrap}
.mod-pin{font-family:var(--rly-font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--rly-text-faint);white-space:nowrap}
.mod-sp{flex:1}
.mod-open{font-size:11.5px;color:var(--rly-accent-text);text-decoration:none;cursor:pointer;white-space:nowrap;opacity:0;transition:opacity .12s}
.mod:hover .mod-open,.mod:focus-within .mod-open{opacity:1}
@media (hover:none){.mod-open{opacity:1}}
.mod-b{padding:0 12px 12px;min-width:0}
.mod[data-tier="counts"] .mod-glyph{background:transparent;border:.5px solid var(--rly-border)}

/* customize mode */
.mod.is-editing{border-style:dashed;border-color:var(--rly-border-hi)}
.mod.is-editing.is-dragging{opacity:.45}
.mod.is-editing.is-over{border-color:var(--rly-accent-ui);box-shadow:0 0 0 3px color-mix(in srgb,var(--rly-accent-ui) 26%,transparent)}
.mod-ctl{display:flex;align-items:center;gap:3px}
.mod-ib{width:24px;height:24px;border:.5px solid var(--rly-border);border-radius:5px;background:var(--rly-bg);color:var(--rly-text-2);font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:var(--rly-font-mono);padding:0}
.mod-ib:hover:not(:disabled){border-color:var(--rly-border-hi);color:var(--rly-text)}
.mod-ib:disabled{opacity:.35;cursor:default}
.mod-ib:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--rly-accent-ui) 34%,transparent)}
.mod-size{width:auto;padding:0 7px;font-size:10px}
.mod-x:hover:not(:disabled){color:var(--rly-error);border-color:var(--rly-error)}
.mod-grip{cursor:grab;color:var(--rly-text-faint);font-size:13px;letter-spacing:-2px;padding:0 4px;user-select:none}
.mod-grip:active{cursor:grabbing}
.mod.is-pinned.is-editing .mod-h::after{content:"";}

/* ── module bodies ─────────────────────────────────────────────────────── */
.am-rows{display:flex;flex-direction:column;gap:2px}
.am-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;min-width:0;transition:background .12s}
.am-row:hover{background:var(--rly-surface)}
.am-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.am-t{font-size:12.5px;color:var(--rly-text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-t b{font-weight:600;color:var(--rly-text-bright)}
.am-s{font-size:11px;color:var(--rly-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.am-mono{font-family:var(--rly-font-mono);font-size:11.5px}
.am-h{font-family:var(--rly-font-mono);font-size:10.5px;color:var(--rly-text-2)}
.am-dot{width:7px;height:7px;border-radius:50%;background:var(--rly-warning);flex-shrink:0}
.am-live{width:8px;height:8px;border-radius:50%;background:var(--rly-success);box-shadow:0 0 0 3px color-mix(in srgb,var(--rly-success) 22%,transparent);flex-shrink:0;animation:am-breathe 2.4s ease-in-out infinite}
@keyframes am-breathe{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--rly-success) 12%,transparent)}}
.am-nd{width:9px;height:9px;flex-shrink:0;border-radius:3px;background:var(--rly-text-2)}
.am-nd.t-stream{background:var(--rly-accent-ui)}
.am-nd.t-relay{background:var(--rly-warning);border-radius:50%}
.am-nd.t-series{background:var(--rly-indigo);border-radius:2px}
.am-nd.t-file{background:var(--rly-text-muted);border-radius:1px}
.am-health{width:90px;height:5px;border-radius:3px;background:var(--rly-panel);overflow:hidden;flex-shrink:0}
.am-health i{display:block;height:100%;background:var(--rly-accent-ui);border-radius:3px}
.am-pct{font-family:var(--rly-font-mono);font-size:10px;color:var(--rly-text-muted);width:30px;text-align:right;flex-shrink:0}
.am-acts{display:flex;gap:6px;flex-shrink:0}
.am-btn{font-family:var(--rly-font);font-size:11.5px;font-weight:500;border:.5px solid var(--rly-border);border-radius:6px;background:transparent;color:var(--rly-text-2);padding:5px 10px;cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s,opacity .12s}
.am-btn:hover{border-color:var(--rly-border-hi);background:var(--rly-panel);color:var(--rly-text)}
.am-btn.primary{background:var(--rly-accent-fill);color:var(--rly-on-accent);border-color:transparent;font-weight:600}
.am-btn.primary:hover{opacity:.88;background:var(--rly-accent-fill);color:var(--rly-on-accent)}
.am-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--rly-accent-ui) 34%,transparent)}
.am-row.is-leaving{opacity:0;transform:translateX(12px);transition:opacity .18s var(--am-ease),transform .18s var(--am-ease)}
.am-resume{display:flex;align-items:center;gap:10px;padding:6px 8px}
.am-sub{font-family:var(--rly-font-mono);font-size:10px;color:var(--rly-text-muted);padding:6px 8px 0}
.am-kv{display:flex;align-items:baseline;gap:8px;padding:4px 8px 0}
.am-big{font-family:var(--rly-font-display);font-style:italic;font-weight:400;font-size:28px;line-height:1;color:var(--rly-text-bright);font-variant-numeric:tabular-nums}
.am-k{font-family:var(--rly-font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--rly-text-muted)}
.am-strip{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px;padding:2px 4px 0}
.am-strip[data-n="2"]{--n:2}.am-strip[data-n="3"]{--n:3}.am-strip[data-n="4"]{--n:4}
.am-stat{display:flex;flex-direction:column;gap:4px;padding:6px 6px;border-radius:6px;min-width:0}
.am-stat .am-big{font-size:22px}
.am-stat .am-k{white-space:normal;line-height:1.4;letter-spacing:.05em}
.am-code{font-family:var(--rly-font-mono);font-size:10.5px;font-weight:600;color:var(--rly-accent-text);background:color-mix(in srgb,var(--rly-accent-ui) 12%,transparent);border:.5px solid var(--rly-border-hi);border-radius:3px;padding:0 5px;letter-spacing:.06em;flex-shrink:0}
.am-chip{font-family:var(--rly-font-mono);font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border:.5px solid transparent;flex-shrink:0}
.am-chip.c-vis,.am-chip.c-claimed{background:color-mix(in srgb,var(--rly-indigo) 12%,transparent);color:var(--rly-indigo);border-color:color-mix(in srgb,var(--rly-indigo) 25%,transparent)}
.am-chip.c-active{background:color-mix(in srgb,var(--rly-accent-ui) 12%,transparent);color:var(--rly-accent-text);border-color:var(--rly-border-hi)}
.am-chip.c-closed{background:var(--rly-panel);color:var(--rly-text-muted);border-color:var(--rly-border)}
.am-av{width:20px;height:20px;border-radius:50%;background:var(--rly-panel);border:.5px solid var(--rly-border);color:var(--rly-text-2);font-family:var(--rly-font-mono);font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.am-av.agent{color:var(--rly-accent-ui);border-color:var(--rly-border-hi)}
.am-feed .am-av{margin-top:1px}
.am-feed .am-t{white-space:normal;line-height:1.4}
.am-coach{padding:4px 8px}
.am-coach b{display:block;font-size:13px;color:var(--rly-text-bright);margin-bottom:3px}
.am-coach p{font-size:12px;color:var(--rly-text-2);line-height:1.5;margin-bottom:10px}
.am-people{display:flex;flex-wrap:wrap;gap:8px;padding:2px 8px 0}
.am-person{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--rly-text-2)}
.am-person .am-av{width:24px;height:24px;font-size:9px}
.am-minimap{width:100%;height:auto;color:var(--rly-text-2);display:block;padding:2px 8px 0}
.am-setup{padding:2px 8px 0}
.am-setup-h{display:flex;align-items:center;gap:10px;font-family:var(--rly-font-mono);font-size:10px;color:var(--rly-text-muted);margin-bottom:8px}
.am-track{flex:1;max-width:160px;height:5px;background:var(--rly-panel);border-radius:3px;overflow:hidden}
.am-track i{display:block;height:100%;background:var(--rly-accent-ui)}
.am-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.am-steps li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;font-size:12.5px;color:var(--rly-text)}
.am-steps li.done{opacity:.55}
.am-steps li.active{background:var(--rly-surface)}
.am-steps li .am-btn{margin-left:auto}
.am-num{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--rly-border-hi);font-family:var(--rly-font-mono);font-size:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--rly-text-muted);flex-shrink:0}
.am-steps li.done .am-num{border-color:var(--rly-success);color:var(--rly-success)}
.am-steps li.active .am-num{border-color:var(--rly-accent-ui);color:var(--rly-accent-text)}

/* ── narrow hosts: one column, band order preserved ─────────────────────── */
@media (max-width:800px){
  .host{grid-template-columns:1fr}
  .mod[data-size="2"],.mod[data-size="3"]{grid-column:span 1}
  .mod-open{opacity:1}
  .mod-h{flex-wrap:wrap;row-gap:4px}
  .mod-lens{max-width:46vw;overflow:hidden;text-overflow:ellipsis}
  .am-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .am-health{width:56px}
}
@media (prefers-reduced-motion:reduce){
  .am-cell,.am-row,.mod{transition:none}
  .am-live{animation:none}
  .am-tip{transition:none}
}