/* Scripta Care: shared header, menu drawer, footer and buttons. Light only.
   Loaded by every page, including Scripta Check (screening.html) and the Scripta Logs app (clarity-logs/app.html),
   so every class is prefixed cc- to sit on top of those tools' own styles. Tokens come from redesign/tokens.py. */
/* tokens:start (written by build.py from redesign/tokens.py) */
:root{color-scheme:light;
  --cc-text:#13272f;--cc-muted:#4a6470;--cc-bg:#f2f6f7;--cc-surface:#ffffff;--cc-sunken:#edf3f5;--cc-divider:#dde7eb;--cc-control:#768c95;--cc-primary:#0f7389;--cc-primary-hover:#0b5e70;--cc-primary-tint:#ecf5f8;--cc-on-primary:#ffffff;--cc-danger:#9e3a42;--cc-danger-tint:#f8e6e6;--cc-warning:#7f5110;--cc-warning-tint:#f8eedb;--cc-success:#256742;--cc-success-tint:#def0e5;--cc-scrim:rgba(19,39,47,.35);--cc-shadow-overlay:0 2px 6px rgba(19,39,47,.08),0 16px 36px -16px rgba(19,39,47,.35);--cc-r-control:6px;--cc-r-box:8px;--cc-motion:150ms;--cc-head:57px;--cc-font-display:'Inter Display','Inter','Segoe UI',system-ui,sans-serif;--cc-font-body:'Inter','Segoe UI',system-ui,sans-serif;--cc-primary-soft:var(--cc-primary-tint);--cc-primary-highlight:var(--cc-divider);--cc-border:var(--cc-control);--cc-surface-offset:var(--cc-sunken);--cc-shadow:var(--cc-shadow-overlay);
}
/* tokens:end */
html{scroll-padding-top:calc(var(--cc-head) + env(safe-area-inset-top,0px))}
.cc-wrap{max-width:1040px;margin:0 auto;padding-inline:16px}
@media (min-width:640px){.cc-wrap{padding-inline:24px}}
/* Scripta Check's layout is wider (its --content-wide, 1400px): the bar takes the same width so the edges line up */
.cc-wrap-wide{max-width:var(--content-wide,1400px)}

/* Header: one bar, white, divider underneath */
.cc-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--cc-surface);color:var(--cc-text);border-bottom:1px solid var(--cc-divider);font:400 16px/1.5 var(--cc-font-body)}
.cc-header-inner{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:56px;padding-block:8px}
.cc-brand{display:flex;align-items:center;gap:8px;min-width:0;color:var(--cc-text);text-decoration:none}
a.cc-brand:hover{color:var(--cc-text)}
.cc-logo{width:28px;height:28px;flex:none;color:var(--cc-primary)}
.cc-brand-text{display:flex;flex-direction:column;min-width:0}
.cc-brand-name{font:600 18px/1.25 var(--cc-font-display);white-space:nowrap}
.cc-brand-tag{font-size:14px;line-height:1.25;color:var(--cc-muted)}
.cc-status-note{font-size:14px;line-height:1.25;color:var(--cc-muted);padding-left:8px;border-left:1px solid var(--cc-divider)}
.cc-top-nav,.cc-header-end{margin-left:auto;display:flex;align-items:center;gap:4px}
.cc-top-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--cc-r-control);color:var(--cc-text);text-decoration:none}
.cc-top-nav a:hover{background:var(--cc-primary-tint);color:var(--cc-primary-hover)}
.cc-top-nav a[aria-current=page]{background:var(--cc-primary-tint);color:var(--cc-primary);font-weight:600}
.cc-i{display:block;flex:none}

/* Buttons: primary / secondary / quiet / danger, 40px default, 32px compact */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin:0;padding:0 16px;border:1px solid transparent;border-radius:var(--cc-r-control);
  background:none;color:inherit;font:600 16px/1.25 var(--cc-font-body);text-decoration:none;white-space:nowrap;cursor:pointer}
.cc-btn-compact{min-height:32px;padding:0 12px;font-size:14px}
.cc-btn-primary{background:var(--cc-primary);color:var(--cc-on-primary)}
.cc-btn-primary:hover{background:var(--cc-primary-hover);color:var(--cc-on-primary)}
.cc-btn-secondary{background:var(--cc-surface);color:var(--cc-text);border-color:var(--cc-control)}
.cc-btn-secondary:hover{background:var(--cc-sunken);color:var(--cc-text)}
.cc-btn-quiet{background:transparent;color:var(--cc-primary);padding-inline:8px}
.cc-btn-quiet:hover{background:var(--cc-primary-tint);color:var(--cc-primary-hover)}
.cc-btn-danger{background:var(--cc-surface);color:var(--cc-danger);border-color:var(--cc-danger)}
.cc-btn-danger:hover{background:var(--cc-danger-tint);color:var(--cc-danger)}
.cc-btn[aria-busy=true]{cursor:progress}
@media (pointer:coarse){.cc-btn-primary:not(.cc-btn-compact){min-height:44px}.cc-header .cc-btn-quiet{min-height:44px}}
.cc-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:var(--cc-r-control);background:transparent;color:var(--cc-primary);cursor:pointer}
.cc-icon-btn:hover{background:var(--cc-primary-tint);color:var(--cc-primary-hover)}

/* One focus style */
.cc-header :focus-visible,.cc-drawer :focus-visible,.cc-footer :focus-visible,.cc-btn:focus-visible{outline:2px solid var(--cc-primary);outline-offset:2px}

/* Menu drawer */
.cc-scrim{position:fixed;inset:0;background:var(--cc-scrim);z-index:60}
.cc-drawer{position:fixed;top:0;bottom:0;left:0;z-index:70;width:min(320px,86vw);background:var(--cc-surface);color:var(--cc-text);font:400 16px/1.5 var(--cc-font-body);
  border-right:1px solid var(--cc-divider);border-radius:0 var(--cc-r-box) var(--cc-r-box) 0;box-shadow:var(--cc-shadow-overlay);
  transform:translateX(-102%);transition:transform var(--cc-motion) ease-out;visibility:hidden;
  display:flex;flex-direction:column;gap:16px;padding:calc(8px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto}
.cc-drawer.open{transform:none;visibility:visible}
/* while open the menu has role=dialog: keep Scripta Logs' own [role=dialog] sizing and corners off it (full height, square left edge) */
#cc-drawer[role=dialog]{max-height:none;border-radius:0 var(--cc-r-box) var(--cc-r-box) 0}
.cc-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.cc-drawer-title{font:600 18px/1.25 var(--cc-font-display);color:var(--cc-text)}
.cc-drawer-tools{display:grid}
.cc-tool-link{display:grid;gap:2px;padding:12px 8px;border-top:1px solid var(--cc-divider);color:var(--cc-text);text-decoration:none}
.cc-tool-link:last-child{border-bottom:1px solid var(--cc-divider)}
.cc-tool-link:hover{background:var(--cc-primary-tint);color:var(--cc-text)}
.cc-tool-link[aria-current=page]{background:var(--cc-primary-tint)}
.cc-tool-name{font-weight:600}
.cc-tool-link[aria-current=page] .cc-tool-name{color:var(--cc-primary)}
.cc-tool-status{font-size:14px;color:var(--cc-muted)}
.cc-drawer-note{margin:0;font-size:14px;color:var(--cc-muted)}
.cc-drawer-nav{display:none;flex-direction:column;gap:2px}
.cc-drawer-nav a{display:flex;align-items:center;min-height:40px;padding:0 8px;border-radius:var(--cc-r-control);color:var(--cc-text);text-decoration:none}
.cc-drawer-nav a:hover{background:var(--cc-primary-tint)}
.cc-drawer-nav a[aria-current=page]{background:var(--cc-primary-tint);color:var(--cc-primary);font-weight:600}
/* Scripta Logs' records list in the drawer (markup from logs_mobile.py): sentence case like the rest of the drawer */
.cc-drawer .ccl-drawer-title{font:600 14px/1.5 var(--cc-font-body);letter-spacing:normal;text-transform:none;color:var(--cc-muted)}
.cc-drawer .cc-drawer-records a{border-radius:var(--cc-r-control);font:400 16px/1.5 var(--cc-font-body)}
.cc-drawer .cc-drawer-records a:hover{background:var(--cc-primary-tint);color:var(--cc-text)}
.cc-drawer .cc-drawer-records a[aria-current=page]{background:var(--cc-primary-tint);color:var(--cc-primary);font-weight:600}

/* Footer */
.cc-footer{border-top:1px solid var(--cc-divider);background:var(--cc-surface);color:var(--cc-muted);font:400 14px/1.5 var(--cc-font-body);padding-block:24px}
.cc-footer a{color:var(--cc-primary);text-decoration:underline;text-underline-offset:2px}
.cc-footer a:hover{color:var(--cc-primary-hover)}
.cc-email{white-space:nowrap}

/* Phones (below 640px): the site links move into the drawer, button labels hide behind their icons */
@media (max-width:639px){
  .cc-top-nav,.cc-brand-tag,.cc-header .cc-btn-text{display:none}
  .cc-drawer-nav{display:flex}
  .cc-status-note{order:5;flex-basis:100%;padding-left:0;border-left:0}
}
/* Short screens (400% zoom, phone in landscape): no sticky bar */
@media (max-height:480px){.cc-header{position:static}}
@media (prefers-reduced-motion:reduce){.cc-drawer{transition:none}}