/* SciMedFace ONE‑UI — styles-extra.css (STEP 7: Accessibility & Contrast) */

:root{
  --smf-ink:#e6f4ff; --smf-muted:#9fb6c6; --smf-line:rgba(255,255,255,.12);
  --smf-bgglass:rgba(10,18,28,.55);
  --c-cyan:#22d3ee; --c-sky:#60a5fa; --c-emerald:#22c55e; --c-amber:#f59e0b; --c-violet:#a78bfa; --c-pink:#ec4899; --c-red:#ef4444;
  --focus:#22d3ee; --focus-shadow:rgba(34,211,238,.35);
}

/* Inline chips navbar */
.smf-inline-nav{display:flex; align-items:center; gap:10px; padding:8px 4px; margin:6px 0 12px 0}
.smf-inline-nav .burger{display:none; width:36px; height:34px; border:1px solid var(--smf-line); border-radius:10px; background:rgba(255,255,255,.06); cursor:pointer}
.smf-inline-nav .burger:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--focus-shadow) }
.smf-inline-nav .burger span{display:block; width:18px; height:2px; margin:5px auto; background:var(--smf-ink); border-radius:2px}
.nav-list{display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; padding:2px}
.nav-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid var(--smf-line); background:rgba(255,255,255,.05); color:var(--smf-ink); text-decoration:none; font-size:13px; opacity:.95; white-space:nowrap}
.nav-chip:hover{background:rgba(255,255,255,.07)}
.nav-chip:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--focus-shadow) }
.nav-chip.active{box-shadow:0 0 0 2px rgba(255,255,255,.08) inset}
.pill{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:11px; background:rgba(255,255,255,.08)}
.pill.cyan{background:rgba(34,211,238,.18); color:var(--c-cyan)}
.pill.sky{background:rgba(96,165,250,.18); color:var(--c-sky)}
.pill.emerald{background:rgba(34,197,94,.18); color:var(--c-emerald)}
.pill.violet{background:rgba(167,139,250,.18); color:var(--c-violet)}
.pill.pink{background:rgba(236,72,153,.18); color:var(--c-pink)}
.pill.amber{background:rgba(245,158,11,.18); color:var(--c-amber)}

/* Mobile drawer */
.nav-drawer{position:fixed; inset:auto 0 0 0; height:65vh; max-height:520px; border-top-left-radius:14px; border-top-right-radius:14px; background:var(--smf-bgglass); backdrop-filter: blur(10px); border:1px solid var(--smf-line); transform:translateY(100%); transition:transform .22s ease; z-index:60}
.nav-open .nav-drawer{transform:translateY(0)}
.nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:50}
.nav-open .nav-backdrop{opacity:1; pointer-events:auto}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--smf-line)}
.drawer-head .logo{font-weight:700; letter-spacing:.4px; color:var(--smf-ink)}
.drawer-head .close{width:36px; height:34px; border-radius:10px; border:1px solid var(--smf-line); background:rgba(255,255,255,.06); color:var(--smf-ink); cursor:pointer}
.drawer-head .close:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--focus-shadow) }
.drawer-links{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px}
.drawer-link{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid var(--smf-line); background:rgba(255,255,255,.05); color:var(--smf-ink); text-decoration:none}
.drawer-link:hover{background:rgba(255,255,255,.08)}
.drawer-link:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--focus-shadow) }

/* View switching */
.view{display:none}
.view.active{display:block}
.smf-view{display:none}
.smf-view.active{display:block}
[hidden]{display:none !important}

/* Content shells for non-analyze views */
#view-library .shell-lib,
#view-history .shell-hist,


#view-privacy .shell-privacy,
#view-settings .shell-settings{
  background:rgba(255,255,255,.03);
  border:1px solid var(--smf-line);
  border-radius:12px;
  padding:16px;
  margin:12px 8px 0 8px;
}

/* Interpretation readability */
.panel.interpretation .card{ line-height:1.5; }
.panel.interpretation .card h3{ margin:0 0 6px 0; font-size:15px; }
.panel.interpretation ul{ margin:0 0 0 16px; padding:0; }
.panel.interpretation li{ margin:4px 0; }

/* Desktop tighten */
@media (min-width: 981px){
  .app-main{ gap:10px; }
}

/* Mobile polish */
@media (max-width: 980px){
  body{ padding-left: max(env(safe-area-inset-left), 6px); padding-right: max(env(safe-area-inset-right), 6px); }
  .smf-inline-nav .burger{display:block}
  .smf-inline-nav .nav-list{display:none}

  .app-main{ display:block; padding:10px 6px; }
  .panel{ padding:12px; margin: 10px 2px; border-radius:12px }
  .panel.stage .stage-wrap{ width:100%; max-height:68vh; min-height:320px; }
  .findings{ grid-template-columns: 1fr 1fr; gap:8px 10px }

  #view-library .shell-lib,
  #view-history .shell-hist,


  #view-privacy .shell-privacy,
  #view-settings .shell-settings{ padding:12px; margin: 10px 4px 0 4px; }
}

/* Narrow phones */
@media (max-width: 540px){
  .findings{ grid-template-columns: 1fr; }
  .panel{ padding:10px; margin: 8px 2px; }
  .drawer-links{ grid-template-columns:1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav-drawer{ transition:none }
  .nav-backdrop{ transition:none }
}

/* === Interpretation Bottom‑Sheet & FAB (mobile ≤860px) === */
@media (max-width: 860px){
  #interpretationPanel{ display:none !important; }
  #smfInterpFab{ display:inline-flex; }
}
@media (min-width: 861px){
  #smfInterpFab{ display:none !important; }
}

/* Floating Action Button */
.smf-fab{
  position:fixed; right:16px; bottom:16px;
  z-index:70; gap:10px; padding:10px 14px; min-height:40px;
  border-radius:999px; border:1px solid #2a3a4f;
  background:rgba(15,18,24,.7); backdrop-filter: blur(6px);
  color:#e6f4ff; cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.smf-fab .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#22d3ee; }
.smf-fab .txt{ font-size:14px; letter-spacing:.3px; }

/* Sheet */
.smf-sheet{ position:fixed; inset:0; z-index:75; pointer-events:none; }
.smf-sheet-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.4);
  opacity:0; transition:opacity .18s ease;
}
.smf-sheet-panel{
  position:absolute; left:0; right:0; bottom:0;
  max-height:75vh; transform:translateY(100%);
  background:rgba(18,24,32,.92); border-top-left-radius:16px; border-top-right-radius:16px;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 -8px 32px rgba(0,0,0,.45);
  outline:none;
}
.interp-open .smf-sheet{ pointer-events:auto; }
.interp-open .smf-sheet-backdrop{ opacity:1; }
.interp-open .smf-sheet-panel{ transform:translateY(0); transition:transform .22s ease; }

/* Sheet content */
.smf-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.smf-sheet-head h3{ margin:0; font-size:16px; }
.smf-sheet-head .ghost{ background:transparent; border:1px solid rgba(255,255,255,.14); border-radius:10px; width:32px; height:32px; color:#e6f4ff; }

.smf-sheet-body{ padding:12px 14px 18px 14px; overflow:auto; max-height:calc(75vh - 52px); }
.smf-sheet-body .summary{ margin-bottom:10px; }
.sev{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); font-size:14px; }
.sev-neutral{ background:rgba(96,165,250,.06); color:#a8b3c2; }
.sev-info{ background:rgba(34,211,238,.12); color:#a8e4ff; }
.sev-ok{ background:rgba(34,197,94,.12); color:#b6f3c7; }

.cards{ display:grid; grid-template-columns:1fr; gap:10px; }
.card{ padding:12px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(255,255,255,.04); }
.card h4{ margin:0 0 8px 0; font-size:14px; }
.card.small p{ margin:0; font-size:12px; opacity:.8; }

/* Respect safe areas */
@supports (padding: max(0px)){
  .smf-fab{ right: max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); }
  .smf-sheet-panel{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}
/* === STEP 8 — Static views (Privacy/Settings) polish — UI-only === */
/* Container: gentle max-width + centered */


#view-privacy .shell-privacy,
#view-settings .shell-settings{
  max-width: 1100px;
  margin: 12px auto 0 auto;
  padding: 16px 16px;
}

/* Headings & text rhythm */
#view-privacy h2, #view-settings h2{ margin:0 0 8px 0; font-size:18px; }
#view-privacy h3, #view-settings h3{ margin:12px 0 6px 0; font-size:15px; }
#view-privacy p, #view-settings p{ margin:0 0 10px 0; line-height:1.65; }
#view-privacy ul, #view-settings ul, 
#view-privacy ol, #view-settings ol{ margin:0 0 10px 18px; }
#view-privacy li, #view-settings li{ margin:5px 0; }
#view-privacy a, #view-settings a{
  color: var(--smf-ink); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25);
}
#view-privacy a:hover, #view-settings a:hover{
  border-bottom-color: rgba(255,255,255,.45);
}

/* Code blocks inside static pages */
#view-privacy pre, #view-settings pre{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:12px; overflow:auto;
}

/* Settings — form layout (safe-scoped) */
#view-settings .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 720px){
  #view-settings .row{ grid-template-columns: 1fr; }
}
#view-settings input[type="text"],
#view-settings input[type="email"],
#view-settings input[type="number"],
#view-settings select{
  width:100%;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:var(--smf-ink);
}
#view-settings button{
  min-height:40px; padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; background:rgba(255,255,255,.05);
  color:var(--smf-ink); cursor:pointer;
}
#view-settings button:hover{ background:rgba(255,255,255,.08); }
#view-settings button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--focus-shadow); }