:root{
  /* Theme tokens */
  --primary:  #405630;   /* primary action buttons */
  --bg:       #F4EAD5;   /* page background */
  --card:     #FFFFFF;   /* surfaces (sidebar, cards, dialog) */
  --ink:      #222222;   /* primary text */
  --muted:    #6b7280;   /* secondary text */
  --accent:   #DCC48E;   /* links + buttons */
  --line:     #E7D9B3;   /* subtle borders (derived from accent) */
  --alert:    #b91c1c;   /* alert for validation */

  /* App bar height var for mobile computations (fallback in CSS below) */
  --appbar-h: 56px;
  --footer-h: 44px;        /* fixed footer height */
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}

/* Reusable form control */
.form-control{
  width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Focus/hover states */
.form-control:hover{ border-color: color-mix(in srgb, var(--line) 70%, var(--ink) 30%); }
.form-control:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(220,196,142,.25);
}

/* Invalid hint (ARIA) */
.form-control[aria-invalid="true"]{
  border-color: var(--alert);
  box-shadow: 0 0 0 2px rgba(185,28,28,.12);
}

.alert{
  border:1px solid var(--line);
  background: var(--card);
  border-radius:10px;
  padding:12px 14px;
}
.alert.success{ box-shadow: inset 0 3px 0 0 #16a34a22; }

/* Links now use accent; add hover underline for contrast */
a{ color:var(--primary); font-weight:600; text-decoration:none }
a:hover{ text-decoration:underline; }

.layout{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height: calc(100vh - var(--footer-h));
}

/* Sidebar becomes light */
.sidebar{
  position:sticky; top:0;
  height: calc(100vh - var(--footer-h));
  border-right:1px solid var(--line);
  background:var(--bg);
  padding:20px;
  display:flex; flex-direction:column; gap:16px;
}

/* Sidebar separators use the same color as the vertical divider */
.sidebar hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}

.brand{font-weight:600;font-size:24px}

.nav{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.navlink{padding:8px 10px;border-radius:10px;color:var(--muted)}
/* light hover/active states */
.navlink:hover{ background:rgba(68,68,68,.06); color:var(--ink); }
.navlink.active{ background:rgba(220,196,142,.25); border:1px solid var(--accent); color:var(--ink); }

.spacer{flex:1}
.small{font-size:12px}
.muted{color:var(--muted)}
.content{
  padding:32px;
  padding-bottom: calc(32px + var(--footer-h));
  max-width:920px;
}
h1{margin:0 0 12px 0}

/* Logo & brand (unchanged) */
.logo{ height:50px; vertical-align:-3px; display:inline-block; opacity:.9; }
.brand a{ display:inline-flex; align-items:center; font-weight:600; font-size:24px; }

/* Monospace stack */
:root{
  --mono-stack: SFMono-Regular, Menlo, Monaco, Consolas,
                "Liberation Mono", "DejaVu Sans Mono",
                "Courier New", monospace;
}
code, pre, kbd, samp,
.mono,
.gradio-container code,
.gradio-container pre,
.gr-prose code,
.gr-prose pre{
  font-family:var(--mono-stack)!important;
  font-feature-settings:"liga" 0, "calt" 0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Responsive base tweaks */
.content img{max-width:100%;height:auto;}
.content table{width:100%;border-collapse:collapse;overflow:auto;display:block;}
.content pre{overflow:auto;}

/* Top app bar (hidden on desktop) */
.appbar{
  position:sticky; top:0; z-index:40;
  display:none; align-items:center; gap:12px;
  height:var(--appbar-h,56px); padding:0 12px;
  background:var(--bg);   border-bottom:1px solid var(--line);
}
.appbar-brand{display:inline-flex;align-items:center;font-weight:600;}

/* Hamburger button (light) */
.hamburger{
  width:44px; height:44px; border:0; border-radius:10px;
  background:rgba(68,68,68,.08); display:grid; place-items:center; cursor:pointer;
}
.hamburger:focus-visible,
.navlink:focus-visible,
a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.hamburger .bar{ width:18px; height:2px; background:var(--ink); display:block; margin:2px 0; border-radius:1px; }

/* Overlay (for off-canvas) */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30;
}
.nav-open .overlay{ opacity:1; pointer-events:auto; }

/* --- Media query: mobile & tablets --- */
@media (max-width:960px){
  .layout{
    grid-template-columns:1fr;
    min-height: calc(100dvh - var(--appbar-h,56px) - var(--footer-h));
  }

  .appbar{ display:flex; }

  /* Off-canvas sidebar */
  .sidebar{
    position:fixed; z-index:50; inset:0 auto 0 0;
    width:min(82vw,320px); 
    height: calc(100dvh - var(--footer-h));
    transform:translateX(-100%);
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    transition:transform .2s ease;
    padding-top:calc(20px + env(safe-area-inset-top));
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .nav-open .sidebar{ transform:translateX(0); }

  .content{
    padding:20px;
    padding-bottom: calc(20px + var(--footer-h));
    max-width:100%;
  }
  .navlink{ padding:12px 12px; }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .sidebar,.overlay{ transition:none!important; }
}

/* Chat iframe height under the app bar */
@media (max-width:960px){
  .frame{ height:calc(100dvh - var(--appbar-h,56px)); }
}

/* Touch-only hover */
@media (hover:hover) and (pointer:fine){
  .navlink:hover{ background:rgba(68,68,68,.06); color:var(--ink); }
}

/* Footer look */
.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  font-size: .875rem;
  z-index: 20;
}

/* styles used by templates (.html) */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.feature-list { list-style:none; padding:0; margin:1rem 0; }
.feature-list li { display:flex; gap:.5rem; margin:.5rem 0; align-items:flex-start; }
.feature-list .icon { flex:0 0 auto; line-height:1.4; }
.roadmap-note { margin-top:1rem; }

#privacy-policy .lede { margin-top:.5rem; font-size:1.05rem; }
#privacy-policy .policy-sections { list-style:none; padding:0; margin:1rem 0; }
#privacy-policy .policy-sections > li { margin:1rem 0; }
#privacy-policy hr { border:0; border-top:1px solid var(--line, #e5e7eb); margin:1rem 0; }
.note { color: var(--muted, #6b7280); font-size:.95rem; }

.lede { margin-top:.5rem; font-size:1.05rem; }
.feature-list { margin:1rem 0; padding-left:1.2rem; }
#about-lymescope h3 { margin-top:1.25rem; }

/* FAQ layout */
.faq-header {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem;
}

/* Buttons (lightweight ghost style, tweak if you have a button system) */
.btn.btn-ghost{
  border:1px solid var(--line,#d1d5db);
  background:transparent; color:inherit; padding:.4rem .7rem;
  border-radius:.5rem; cursor:pointer; font-weight:600;
}
.btn.btn-ghost:hover{ background:color-mix(in oklab, currentColor 8%, transparent); }
.btn.btn-ghost:focus-visible{ outline:2px solid var(--accent,#0ea5e9); outline-offset:2px; }

/* FAQ items */
.faq-list{ display:grid; gap:.5rem; }
.faq-item{
  border:1px solid var(--line,#e5e7eb);
  border-radius:.75rem; background:var(--card,#fff);
  overflow:hidden;
}

/* Question (summary) */
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.85rem 1rem; list-style:none; cursor:pointer;
}
.faq-q::-webkit-details-marker{ display:none; } /* hide default marker */
.faq-q-text{
  font-weight:800; /* make question stand out */
  font-size:1.02rem; line-height:1.35;
}

/* Chevron rotation on open */
.faq-item[open] .chev{ transform:rotate(180deg); }
.chev{ transition:transform .18s ease; opacity:.8; }

/* Answer */
.faq-a{ padding:0 1rem 1rem 1rem; color:var(--muted-ink,#374151); }
.faq-a p{ margin:.75rem 0 0; }

/* Focus states */
.faq-q:focus-visible{
  outline:2px solid var(--accent,#0ea5e9);
  outline-offset:2px; border-radius:.5rem;
}

/* Optional subtle hover */
.faq-q:hover{ background:color-mix(in oklab, currentColor 6%, transparent); }