/* Shared card + depth-drawer kit — Platform-owned.
   Extracted from Networks' client cards (.net-card*) on Devin's 2026-09-21 decision:
   one shared, token-based part set for any tab that shows a card grid, and one shared
   "click for depth" drawer for any tab that wants a figure to open into detail, history
   and a source-record link (Devin, 2026-09-22: "Is anything clickable to reveal
   additional information about what was clicked? We need Ops to have depth and
   multiple layers of usage.").

   Every colour here is an existing token (--card-bg, --border, --text*, --accent,
   --accent2, --on-accent, --ok/--warn/--danger — see css/base.css). No new tokens: Ops's
   theme engine already solves "readable text on a solid accent fill" via --on-accent, so
   this file does not reinvent it.

   ck-exp-* deliberately does not name a vendor: Networks built this reading Meraki
   licence wording, but the part is generic — "days until X, with warn and critical
   bands" — so Finance and Backup don't inherit Meraki-shaped class names.
*/

/* ── Card shell ───────────────────────────────────────────────────────── */
.ck-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.ck-card-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border)}
.ck-card-abbr{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;background:var(--accent-faint,color-mix(in srgb,var(--accent) 12%,transparent));color:var(--accent2)}
.ck-card-name{flex:1;min-width:0;font-weight:600;color:var(--text);font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-card-sub{display:block;font-size:10px;font-weight:400;color:var(--text3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ck-card-w1{grid-column:span 1}
.ck-card-w2{grid-column:span 2}
.ck-card-w3{grid-column:span 3}
.ck-card-w4{grid-column:span 4}
.ck-card-h1{grid-row:span 1}
.ck-card-h2{grid-row:span 2}
.ck-card-h3{grid-row:span 3}

/* Narrow-width collapse: the header wraps and the abbr shrinks, same breakpoint
   Networks already tuned (net-card-w1). */
.ck-card-w1 .ck-card-hdr{flex-wrap:wrap;align-items:center;row-gap:0}
.ck-card-w1 .ck-card-abbr{width:28px;height:28px;font-size:9px}
.ck-card-w1 .ck-card-name{font-size:12px}

/* ── Device/section tabs inside a card ───────────────────────────────── */
.ck-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);overflow-x:auto;flex-shrink:0;scrollbar-width:none}
.ck-tabs::-webkit-scrollbar{display:none}
.ck-tab{padding:8px 14px;font-size:11px;font-weight:500;color:var(--text3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;display:flex;align-items:center;gap:5px;flex-shrink:0}
.ck-tab:hover{color:var(--text)}
.ck-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
/* Own ink, not the tab's muted --text3: on a tinted card header band it measured
   4.42:1 in the light theme (Finance, Rates page). A caller's status class
   (e.g. Networks' net-badge-ok) still overrides this, loading later. */
.ck-tab-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:10px;line-height:1.5;letter-spacing:.01em;color:var(--text2)}

/* ── Expiry/status bar: "days until X", warn and critical bands ─────────
   Generic on purpose. A caller supplies its own icon/label text; the colour
   classes are the reusable part. */
.ck-exp-bar{display:flex;align-items:center;gap:5px;padding:4px 14px;font-size:11px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.ck-exp-icon{font-size:11px;opacity:.55;flex-shrink:0}
.ck-exp-label{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text4);margin-right:3px;flex-shrink:0}
.ck-exp-status{font-weight:600;color:var(--text);font-size:11px}
.ck-exp-sep{color:var(--text4);font-size:10px;margin:0 1px}
.ck-exp-date{color:var(--text2);font-family:ui-monospace,monospace;font-size:10px}
.ck-exp-days{color:var(--text3);font-size:10px}
.ck-exp-warn{color:var(--warn);font-weight:600}
.ck-exp-critical{color:var(--danger);font-weight:600}
.ck-exp-tier{display:inline-flex;align-items:center;background:var(--accent-faint,color-mix(in srgb,var(--accent) 12%,transparent));border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:3px;padding:1px 5px;margin-left:3px;font-size:9px;font-weight:700;color:var(--accent2);letter-spacing:.02em}
.ck-exp-btn{background:none;border:1px solid var(--border);border-radius:4px;padding:1px 7px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);cursor:pointer;flex-shrink:0;transition:color .15s,border-color .15s,background .15s;line-height:1.6}
.ck-exp-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-faint,color-mix(in srgb,var(--accent) 7%,transparent))}

/* ── Alert badge ──────────────────────────────────────────────────────── */
.ck-alert-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap}

/* ── Depth: any element with class="ck-lk" and data-d="<key>" gets a hover
   tip and, on click/Enter, opens the shared drawer at that key. js/card-kit.js
   drives this; see DESIGN.md section 8. ───────────────────────────────── */
.ck-lk{cursor:pointer;border-radius:6px;transition:background .12s,box-shadow .12s}
.ck-lk:hover{background:var(--accent-faint,color-mix(in srgb,var(--accent) 10%,transparent));box-shadow:0 0 0 1px var(--accent)}
.ck-lk:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent)}
.ck-lk.ck-sel{box-shadow:0 0 0 2px var(--accent)}
/* ck-inset: for a ck-lk that IS (or fills) an overflow:hidden/auto ancestor -
   .ck-card, .ck-dr-body, .ck-dr-lst - where the plain outer ring above gets
   silently clipped rather than refused (Devin: "the highlighting is still
   behind the corners"; found building this kit against Finance's rates
   mockup, which uses this exact split for .lk vs .tile.lk). Match the
   element's own outer radius to its parent panel's radius minus the panel's
   border width, or the inset ring's corners won't follow the panel's curve. */
.ck-lk.ck-inset:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.ck-lk.ck-inset:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.ck-lk.ck-inset.ck-sel{box-shadow:inset 0 0 0 2px var(--accent)}

#ck-tip{position:fixed;z-index:2600;max-width:260px;padding:7px 10px;border-radius:7px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:11px;line-height:1.4;pointer-events:none;opacity:0;transition:opacity .1s}
#ck-tip b{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2);margin-bottom:2px}

/* Same slide-in-from-right shape as .cp-drawer (css/panels.css) on purpose —
   one drawer primitive, not two. This one is content-driven by the registry
   rather than tied to Control Panel. */
#ck-drawer{--ck-tier-w:min(440px,90vw);position:fixed;top:var(--ck-top,56px);right:0;bottom:0;height:calc(100dvh - var(--ck-top,56px));width:var(--ck-drawer-w,var(--ck-tier-w));visibility:hidden;z-index:2500;display:flex;flex-direction:column;background:var(--bg2);border-left:1px solid var(--border2);box-shadow:-10px 0 34px rgba(0,0,0,.34);transform:translateX(100%);transition:transform .18s ease,visibility 0s .18s;overflow:hidden}
/* visibility is what takes a closed drawer out of the tab order and away from screen
   readers; it flips after the slide-out finishes, and at once on open. Consumers whose
   sticky header is not 56px set --ck-top on :root. */
#ck-drawer.ck-open{transform:none;visibility:visible;transition:transform .18s ease,visibility 0s}
/* Size tiers, chosen by the builder's w field. narrow is the default; wide fits a
   two-column detail; full is for a record with its own sub-tabs (Inventory's
   asset panel was 960px). Every tier is capped to the viewport. */
#ck-drawer[data-size="wide"]{--ck-tier-w:min(720px,94vw)}
#ck-drawer[data-size="full"]{--ck-tier-w:min(960px,96vw)}
.ck-dr-grip{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:2;touch-action:none}
.ck-dr-grip::after{content:'';position:absolute;left:4px;top:0;bottom:0;width:2px;background:transparent;transition:background .12s}
.ck-dr-grip:hover::after,.ck-dr-grip.ck-grip-active::after{background:var(--accent)}
body.ck-resizing{user-select:none;-webkit-user-select:none;cursor:col-resize}
body.ck-resizing #ck-drawer{transition:none}
.ck-dr-hdr{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.ck-dr-back{display:none;border:1px solid var(--border2);background:none;color:var(--text);border-radius:6px;padding:3px 6px;cursor:pointer}
.ck-dr-back.ck-on{display:inline-flex}
.ck-dr-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--accent-faint,color-mix(in srgb,var(--accent) 12%,transparent));color:var(--accent2);flex-shrink:0}
.ck-dr-title{font-size:14px;font-weight:600;display:block;color:var(--text)}
.ck-dr-sub{font-size:11px;color:var(--text2)}
.ck-dr-close{margin-left:auto;font-size:18px;color:var(--text3);cursor:pointer;padding:0 4px;background:none;border:0}
.ck-dr-crumb{font-size:10px;color:var(--text3);padding:6px 14px 0}
.ck-dr-crumb a{color:var(--accent2);cursor:pointer}
.ck-dr-body{padding:10px 14px;overflow:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
.ck-dr-body>*{flex-shrink:0}
.ck-dr-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ck-dr-kv div{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:7px 9px}
.ck-dr-kv small{display:block;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
.ck-dr-kv b{font-size:15px;color:var(--text)}
.ck-dr-sec{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.ck-dr-lst{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.ck-dr-lst div{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 60px;gap:8px;padding:6px 9px;border-bottom:1px solid var(--border);font-size:11px;align-items:center;color:var(--text2)}
.ck-dr-lst div:last-child{border-bottom:none}
.ck-dr-lst div.ck-hd{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);background:var(--bg3)}
.ck-dr-go{color:var(--accent2);cursor:pointer;border-radius:4px}
.ck-dr-go:focus-visible{outline:2px solid var(--accent)}
.ck-dr-r{text-align:right;font-variant-numeric:tabular-nums}
.ck-dr-para{font-size:12px;color:var(--text2);line-height:1.5}
.ck-dr-acts{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--border)}

@media(max-width:768px){
  #ck-drawer{top:auto;right:0;left:0;bottom:0;height:70vh;width:auto;border-radius:12px 12px 0 0;box-shadow:0 -10px 28px rgba(0,0,0,.34);transform:translateY(100%)}
  #ck-drawer.ck-open{transform:none}
  .ck-dr-grip{display:none}
}
/* Touch targets: 40px on a coarse pointer (WCAG 2.5.8 asks 24px), where the mouse sizes
   were tuned for a cursor. */
@media(pointer:coarse){
  .ck-exp-btn,.ck-tab,.ck-dr-close,.ck-dr-back{min-height:40px;min-width:40px}
  .ck-exp-btn,.ck-dr-close,.ck-dr-back.ck-on{display:inline-flex;align-items:center;justify-content:center}
  /* An inline link cannot be 40px tall without breaking its line, so the hit area grows
     with padding cancelled by a negative margin. */
  .ck-dr-go{padding:10px 6px;margin:-10px -6px}
}