/* People Mate — styled to Teachmint's own site: a soft blue-grey wash, deep navy
   type, a floating white nav pill and rounded blue actions. Colour and space do
   the work; panels are kept light so the page reads as one surface rather than a
   stack of boxes. */

:root{
  /* Teachmint palette */
  --navy:#132a5e;          /* headlines, primary buttons */
  --navy-deep:#0d1f47;
  --blue:#2e7cf6;          /* links, accents */
  --blue-soft:#e8f0fe;
  --cyan:#29b6f6;

  --wash-top:#dfe5ef;      /* page gradient, as on teachmint.com */
  --wash-bot:#f2f5f9;
  --card:#ffffff;
  --card-quiet:#fbfcfe;

  --ink:#132a5e;
  --ink-2:#4a5878;
  --ink-3:#8592ae;
  --line:#e4e9f2;
  --line-2:#eef1f7;

  --hl:#fff2bd;
  --hl-line:#e8ce62;
  --warn-bg:#fff7e8;  --warn-line:#f0d091;  --warn-ink:#7a5a12;
  --good:#0f9d58;
  --alert:#d1493f;

  /* Solid fills and the text that sits on them. --navy, --blue and --warn-ink
     are TEXT colours: the dark palette flips them light so they read on a dark
     page. Anything using them as a BACKGROUND under hard-coded white text
     therefore went white-on-pale in dark mode (the Ask button and every PL
     pill measured 1.25:1). So fills get their own tokens: the text-on-fill
     colour flips with the mode, and the brand blue used for buttons stays the
     strong blue in both, where white text still reads. */
  --on-navy:#ffffff;       /* text on a --navy fill: .pid, Ask, Save */
  --on-warn:#ffffff;       /* text on a --warn-ink fill: notice pills */
  --blue-fill:#2e7cf6;     /* button/badge blue — NOT flipped in dark mode */
  --chip:rgba(255,255,255,.75);
  color-scheme:light;      /* native selects, checkboxes, scrollbars follow */

  --radius:16px;
  --radius-sm:11px;
  --shadow:0 1px 2px rgba(19,42,94,.05), 0 6px 20px rgba(19,42,94,.06);
  --shadow-lift:0 2px 6px rgba(19,42,94,.07), 0 18px 40px rgba(19,42,94,.10);
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:Poppins, var(--sans);
}

@media (prefers-color-scheme:dark){
  :root{
    --navy:#dce6fb; --navy-deep:#ffffff;
    --blue:#7fb0ff; --blue-soft:#17233d;
    --wash-top:#0d1424; --wash-bot:#111a2c;
    --card:#161f33; --card-quiet:#131b2c;
    --ink:#e7ecf7; --ink-2:#aab6cd; --ink-3:#7d8aa5;
    --line:#243149; --line-2:#1d2740;
    --hl:#4a3f12; --hl-line:#7a6a25;
    --warn-bg:#2b2411; --warn-line:#5d5024; --warn-ink:#e8d69a;
    --on-navy:#0d1f47; --on-warn:#2b2411;
    --chip:rgba(255,255,255,.06);
    color-scheme:dark;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    --shadow-lift:0 12px 34px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* The header floats over the page, so anything scrolled to with a link or by
     the browser would otherwise land underneath it. */
  scroll-padding-top:96px}

/* Motion is opt-out: everything below is wrapped so a person who has asked their
   system for reduced motion simply gets the static page. */
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
body{
  margin:0; color:var(--ink); font:400 15px/1.62 var(--sans);
  background:linear-gradient(180deg, var(--wash-top) 0%, var(--wash-bot) 620px, var(--wash-bot) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------------- floating nav pill ---------------- */
.masthead{padding:18px 0 0;position:sticky;top:0;z-index:30;
  /* The pill's BOX is the full page width even though the white pill you see is
     only part of it, and it floats above the page. Anything scrolled beneath it
     was swallowing clicks: a field scrolled under the pill's right-hand end
     could not be focused at all, and dragging over it selected the text
     underneath instead. (That is what killed the old policy filter, since
     removed.) Nothing in the
     header is clickable on the main page, so it has no need of the pointer
     there: let every click through to the page beneath. The manage and login
     pages DO put controls up here (Sign out, Back to search), so those are
     given the pointer back on the next line — add any new header control to
     that list. */
  pointer-events:none}
.masthead a,.masthead button,.masthead .navform{pointer-events:auto}
/* The one nav item that isn't just a label, so it should look pressable. */
.navadmin{
  padding:5px 12px;border-radius:999px;font-weight:600;
  background:rgba(46,124,246,.10);color:var(--blue);
  white-space:nowrap;flex:0 0 auto
}
.navadmin:hover{background:rgba(46,124,246,.18)}
.masthead .wrap{padding-top:0}
.navpill{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;padding:11px 13px 11px 18px;box-shadow:var(--shadow)
}
@media (prefers-color-scheme:dark){
  .navpill{background:rgba(22,31,51,.85);border-color:rgba(255,255,255,.06)}
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mark{
  width:31px;height:31px;flex:0 0 31px;border-radius:9px;color:#fff;
  background:linear-gradient(135deg,var(--blue-fill),var(--cyan));
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(46,124,246,.32)
}
.wordmark{
  font:700 19px/1 var(--display);color:var(--navy);letter-spacing:-.02em;white-space:nowrap
}
/* Five things live in this bar now: the badge, Admin, who you are, sign out and
   back-to-search. It used to be two, and with no wrapping the useful ones could
   be pushed out of a narrow window entirely — which is how the Admin link
   goes missing on a laptop screen. Wrap rather than clip, and never shrink the
   link itself. */
.navmeta{
  display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  gap:10px 14px;font-size:12.5px;color:var(--ink-3);min-width:0
}
.navstat{
  background:var(--blue-soft);color:var(--blue);font-weight:600;
  border-radius:999px;padding:6px 12px;white-space:nowrap
}
.navlink{
  color:var(--navy);font-weight:600;text-decoration:none;font-size:12.5px;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;white-space:nowrap;
  transition:all .14s ease
}
.navlink:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.navform{display:contents}
button.navlink{font-family:inherit;cursor:pointer;background:none}
.engine-badge{display:flex;align-items:center;gap:7px;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.ok{background:var(--good)} .dot.warn{background:#d99b1c}

/* ---------------- hero ---------------- */
/* A greeting, not a sales headline: two short separate lines, capped well below
   the viewport width so it never spans the whole screen. */
.hero{padding:50px 0 2px;text-align:center}
.hero h1{
  margin:0;font:700 clamp(24px,2.7vw,31px)/1.25 var(--display);
  color:var(--navy);letter-spacing:-.022em
}
.hero-line{
  margin:7px 0 0;font:600 clamp(19px,2.1vw,24px)/1.3 var(--display);
  letter-spacing:-.018em;
  background:linear-gradient(100deg,var(--blue),var(--cyan),var(--blue));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent
}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
  .hero-line{
    animation:rise .55s cubic-bezier(.2,.7,.2,1) .08s both,
              sheen 9s ease-in-out 1s infinite
  }
  @keyframes sheen{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }
}

/* ---------------- ask ---------------- */
.asker{padding:28px 0 6px;max-width:780px;margin:0 auto}
/* The heading already asks the question, so the label would just repeat it —
   hidden visually but kept for screen readers, which still need it. */
.asker>label{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
#ask-form{display:flex;gap:10px}
.field{
  flex:1;min-width:0;display:flex;align-items:center;background:var(--card);
  border:1px solid transparent;border-radius:999px;box-shadow:var(--shadow-lift)
}
.field:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,124,246,.14)}
#q{
  flex:1;min-width:0;padding:16px 22px;font-size:15.5px;font-family:inherit;
  color:var(--ink);background:none;border:0;border-radius:999px
}
#q::placeholder{color:var(--ink-3)}
#q:focus{outline:none}
#ask-btn{
  padding:0 30px;font:600 15px/1 var(--sans);color:var(--on-navy);background:var(--navy);
  border:0;border-radius:999px;cursor:pointer;box-shadow:0 4px 14px rgba(19,42,94,.22);
  transition:transform .12s ease, background .15s ease
}
#ask-btn:hover{background:var(--navy-deep);transform:translateY(-1px)}
#ask-btn[disabled]{opacity:.55;cursor:progress;transform:none}

.mic{
  flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;margin-right:7px;
  color:var(--ink-3);background:none;border:0;border-radius:50%;cursor:pointer
}
.mic:hover{color:var(--blue);background:var(--blue-soft)}
.mic:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.mic.listening{color:#fff;background:var(--alert);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(209,73,63,.45)}50%{box-shadow:0 0 0 8px rgba(209,73,63,0)}}
@media (prefers-reduced-motion:reduce){.mic.listening{animation:none}}

.voice-bar{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin:14px 0 0;font-size:12.5px;color:var(--ink-3)
}
.voice-bar label{font-weight:500}
.voice-bar select{
  font:400 12.5px/1 inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:6px 8px
}
.voice-bar .toggle{display:flex;align-items:center;gap:6px;font-weight:400;cursor:pointer}
.voice-bar input[type=checkbox]{accent-color:var(--blue);margin:0}
.voice-status{color:var(--blue);font-variant-numeric:tabular-nums}
.voice-status.err{color:var(--alert)}

.examples{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  margin:20px 0 0;font-size:12.5px;color:var(--ink-3)
}
.chip{
  font:400 12.5px/1 inherit;color:var(--ink-2);background:var(--chip);
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;
  transition:all .14s ease
}
.chip:hover{border-color:var(--blue);color:var(--blue);background:var(--card);transform:translateY(-1px)}
.disclaimer{
  font-size:12.5px;color:var(--ink-3);margin:26px auto 0;max-width:70ch;text-align:center
}

/* ---------------- talk to me ---------------- */
.live{
  margin:30px auto 0;max-width:900px;padding:24px 26px;
  background:linear-gradient(135deg, rgba(46,124,246,.07), rgba(41,182,246,.05));
  border:1px solid rgba(46,124,246,.16);border-radius:var(--radius)
}
.live-head{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.live-head h2{margin:0 0 4px;font:600 18px/1.25 var(--display);color:var(--navy);letter-spacing:-.015em}
.live-head p{margin:0;font-size:13px;color:var(--ink-2);max-width:50ch;line-height:1.6}
.live-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.live-controls select{
  font:400 12.5px/1 inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:9px
}
.live-mute{
  font:500 12.5px/1 inherit;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:10px 15px;cursor:pointer
}
.live-mute:hover{border-color:var(--blue);color:var(--blue)}
.live-mute.on{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.live-call{
  display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);color:#fff;
  background:linear-gradient(135deg,var(--blue-fill),#1f6fe8);
  border:0;border-radius:999px;padding:13px 24px;cursor:pointer;
  box-shadow:0 5px 18px rgba(46,124,246,.35);transition:transform .12s ease, box-shadow .15s ease
}
.live-call:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(46,124,246,.42)}
.live-call[disabled]{opacity:.62;cursor:progress;transform:none}
.live-call.on{background:linear-gradient(135deg,var(--alert),#b8382f);box-shadow:0 5px 18px rgba(209,73,63,.35)}
.live-dot{
  --level:0%;
  width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 0 calc(var(--level)/22) rgba(255,255,255,.35);transition:box-shadow .08s linear
}
.live-call.on .live-dot{background:#fff}

.live-state{margin:15px 0 0;font-size:12.5px;color:var(--ink-3);min-height:1.2em}
.live-state.listening{color:var(--good);font-weight:500}
.live-state.speaking{color:var(--blue);font-weight:500}
.live-state.err{color:var(--alert)}

.live-transcript{
  margin:13px 0 0;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:10px
}
.live-transcript:empty{display:none}
.live-transcript .line{display:flex;gap:12px;font-size:13.5px;line-height:1.62}
.live-transcript .who{
  flex:0 0 66px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3);padding-top:3px
}
.live-transcript .line.you .said{color:var(--ink);font-weight:500}
.live-transcript .line.bot .said{color:var(--ink-2)}
.live-transcript .said{flex:1;min-width:0}

/* ---------------- answer ---------------- */
.result{margin:34px auto 0;max-width:900px;scroll-margin-top:100px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.answer-wrap{position:relative}
.answer-card{padding:28px 30px;padding-right:118px;font-size:15.5px}
.answer-card.loading{color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .answer-card{animation:rise .42s cubic-bezier(.2,.7,.2,1) both}
  .notices,.escalation,.source{animation:rise .42s cubic-bezier(.2,.7,.2,1) both}
  .source:nth-of-type(2){animation-delay:.05s}
  .source:nth-of-type(3){animation-delay:.1s}
  .source:nth-of-type(4){animation-delay:.15s}
  /* a moving sheen while we wait, instead of static grey text */
  .answer-card.loading{
    background-image:linear-gradient(100deg,
      transparent 20%, rgba(46,124,246,.07) 45%, transparent 70%);
    background-size:420px 100%;background-repeat:no-repeat;
    animation:rise .42s cubic-bezier(.2,.7,.2,1) both, shimmer 1.25s linear infinite
  }
  /* policy cards arrive as they scroll into view */
  .policy.reveal{opacity:0;transform:translateY(12px)}
  .policy.reveal.in{
    opacity:1;transform:none;
    transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1)
  }
}
.answer-card :first-child{margin-top:0}
.answer-card :last-child{margin-bottom:0}
.answer-card p{margin:0 0 12px}
.answer-card ul{margin:0 0 12px;padding-left:20px}
.answer-card li{margin:4px 0}
.answer-card blockquote{
  margin:14px 0;padding:14px 18px;border-left:3px solid var(--blue);
  background:var(--blue-soft);border-radius:0 10px 10px 0;font-size:15px;line-height:1.66
}
.answer-card strong{font-weight:650;color:var(--navy)}
.answer-card .cite{
  display:inline-block;font-size:11.5px;font-weight:600;color:var(--blue);
  background:var(--blue-soft);border-radius:6px;padding:2px 7px;margin:0 1px;white-space:nowrap
}
.answer-card .mode{
  display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--ink-3)
}
.speak{
  position:absolute;top:22px;right:22px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  font:600 12px/1 inherit;color:var(--ink-2);background:var(--card-quiet);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer
}
.speak:hover{color:var(--blue);border-color:var(--blue)}
.speak.playing{color:var(--blue);border-color:var(--blue);background:var(--blue-soft)}
.speak .speak-icon{font-size:9px;line-height:1}

/* ---------------- nothing found ---------------- */
.empty-card{padding:38px 30px 32px !important;text-align:center}
.empty-wrap{max-width:46ch;margin:0 auto}
.empty-icon{
  width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  color:var(--blue);background:var(--blue-soft)
}
@media (prefers-reduced-motion:no-preference){
  .empty-icon{animation:bob 3.4s ease-in-out infinite}
}
.empty-wrap h3{margin:0 0 8px;font:600 20px/1.28 var(--display);color:var(--navy);letter-spacing:-.018em}
.empty-wrap>p, .empty-wrap p{margin:0 0 22px;font-size:14px;line-height:1.68;color:var(--ink-2)}
.empty-cta{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:13px 30px;border-radius:999px;text-decoration:none;
  font:600 14.5px/1.2 var(--sans);color:#fff;
  background:linear-gradient(135deg,var(--blue-fill),#1f6fe8);
  box-shadow:0 5px 18px rgba(46,124,246,.32);transition:transform .13s ease, box-shadow .18s ease
}
.empty-cta:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(46,124,246,.42)}
.empty-cta-sub{font:400 11.5px/1 var(--sans);opacity:.82}
.empty-near{
  margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:7px;font-size:13px
}
.empty-near>span{color:var(--ink-3);font-size:12px;margin-bottom:2px}
.empty-near a{color:var(--ink-2);text-decoration:none}
.empty-near a strong{color:var(--blue);margin-right:6px}
.empty-near a:hover{color:var(--blue)}
.empty-tries{
  margin:22px 0 0;display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--ink-3)
}

/* ---------------- restricted page ---------------- */
.gate{max-width:520px;margin:56px auto 0;padding:38px 34px;text-align:center}
.gate-icon{
  width:56px;height:56px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  color:var(--warn-ink);background:var(--warn-bg)
}
.gate h1{margin:0 0 10px;font:600 21px/1.3 var(--display);color:var(--navy);letter-spacing:-.018em}
.gate>p{margin:0 auto 24px;max-width:44ch;font-size:14px;line-height:1.68;color:var(--ink-2)}
.gate-form{max-width:320px;margin:0 auto;text-align:left}
.gate-form .btn-primary{width:100%;margin-top:16px}
.gate-err{margin:10px 0 0 !important;font-size:12.5px;color:var(--alert);font-weight:500}
.gate-note{
  font-size:13px;color:var(--ink-2);background:var(--card-quiet);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;
  max-width:42ch;margin:0 auto !important;line-height:1.65
}
.gate-note code{
  font:400 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--blue-soft);color:var(--blue);border-radius:5px;padding:2px 6px
}
.gate-foot{margin:24px 0 0 !important;font-size:12.5px}
.gate-foot a{color:var(--ink-3);text-decoration:none}
.gate-foot a:hover{color:var(--blue)}

/* ---------------- sign in with Google ---------------- */
/* The lock icon on the sign-in page isn't a warning — nothing has gone wrong,
   the door is simply shut — so it takes the calm blue rather than the amber the
   restricted page uses. */
.gate.signin .gate-icon{color:var(--blue);background:var(--blue-soft)}
.signin-err{
  max-width:38ch;margin:0 auto 20px !important;padding:11px 15px;text-align:left;
  background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:var(--radius-sm);color:var(--warn-ink);font-weight:400;line-height:1.6
}
.gbtn{
  display:inline-flex;align-items:center;gap:12px;
  /* Google's brand guidance for the button: white face, its own mark, and the
     wording left alone. Only the radius follows this page. */
  background:#fff;color:#3c4043;font:600 14.5px/1 var(--sans);text-decoration:none;
  border:1px solid #dadce0;border-radius:999px;padding:13px 26px 13px 20px;
  box-shadow:0 1px 3px rgba(60,64,67,.15);transition:box-shadow .15s ease, background .15s ease
}
.gbtn:hover{background:#f8f9fa;box-shadow:0 2px 8px rgba(60,64,67,.22)}
.gbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.gbtn-mark{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px}
.signin-foot{max-width:40ch;margin:26px auto 0 !important;color:var(--ink-3);line-height:1.6}

/* who's signed in, in the nav pill */
.whoami{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-size:12.5px;color:var(--ink-2);font-weight:500
}
.whoami img{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  border:1px solid var(--line);background:var(--card-quiet)
}
.whoami .initial{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-fill),var(--cyan));color:#fff;
  font:700 12px/1 var(--sans)
}
.whoami .who-name{
  max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* On a phone the pill has room for the avatar or the name, not both. */
@media (max-width:620px){
  .whoami .who-name{display:none}
}

.escalation{
  margin:14px 0 0;padding:15px 18px;border:1px solid var(--warn-line);
  background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--radius-sm);font-size:13.5px
}

.notices{margin:0 0 14px;display:grid;gap:10px}
.notice-banner{
  display:flex;gap:13px;align-items:flex-start;padding:15px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn-ink)
}
.notice-banner .pid{
  flex:0 0 auto;font:700 11px/1 inherit;color:var(--on-warn);background:var(--warn-ink);
  border-radius:6px;padding:5px 8px;letter-spacing:.03em
}
.notice-banner strong{display:block;font-size:14px;font-weight:650;margin-bottom:5px}
.notice-banner p{margin:0;font-size:13px;line-height:1.6;opacity:.92}

.sources-head{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  margin:30px 0 12px;font-weight:600
}
.source{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.source-head{display:flex;align-items:baseline;gap:11px;padding:15px 19px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.pid{font:700 11px/1 inherit;color:var(--on-navy);background:var(--navy);border-radius:6px;padding:5px 8px;letter-spacing:.03em}
.source-head h4{margin:0;font:600 14.5px/1.3 var(--sans);flex:1;min-width:180px;color:var(--navy)}
.source-head .meta{font-size:11.5px;color:var(--ink-3)}
.source-head a{font-size:12.5px;color:var(--blue);text-decoration:none;font-weight:600}
.source-head a:hover{text-decoration:underline}
.source .clause{padding:15px 19px;border-top:1px solid var(--line-2)}
.source .clause:first-of-type{border-top:0}
.source .ref{display:block;font-size:11.5px;font-weight:600;color:var(--blue);margin-bottom:6px}
.source .clause p{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink-2)}
mark{background:var(--hl);color:inherit;border-bottom:1.5px solid var(--hl-line);border-radius:3px;padding:0 2px}

/* ---------------- browse ---------------- */
.browse{margin:64px 0 0}
.browse-head{margin-bottom:22px;scroll-margin-top:96px}
.browse-head h2{margin:0;font:600 24px/1.2 var(--display);color:var(--navy);letter-spacing:-.02em}
.cat{margin-bottom:36px}
.cat h3{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  margin:0 0 14px;font-weight:600;display:flex;align-items:center;gap:9px
}
.cat .count{font-size:11px;background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:2px 8px;letter-spacing:0;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.policy{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease
}
.policy:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(46,124,246,.32)}
.policy-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.policy-top .ver{font-size:11px;color:var(--ink-3)}
.policy h4{margin:0 0 5px;font:600 15.5px/1.35 var(--sans);color:var(--navy);letter-spacing:-.01em}
.policy .aud{margin:0 0 11px;font-size:11.5px;color:var(--blue);font-weight:500}
.policy .sum{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.facts{margin:0 0 15px;display:grid;gap:7px;font-size:12.5px}
.facts>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-2);padding-bottom:6px}
.facts>div:last-child{border-bottom:0}
.facts dt{margin:0;color:var(--ink-3)}
.facts dd{margin:0;font-weight:650;text-align:right;color:var(--navy)}
.policy-foot{margin-top:auto;padding-top:5px;display:flex;gap:16px;align-items:center}
.link{background:none;border:0;padding:0;font:600 12.5px/1 inherit;color:var(--blue);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}
.clauses{margin-top:15px;border-top:1px solid var(--line-2);padding-top:13px;max-height:340px;overflow-y:auto}
.clauses .clause{margin-bottom:13px}
.clauses .ref{display:block;font-size:11px;font-weight:600;color:var(--blue);margin-bottom:4px}
.clauses .clause p{margin:0;font-size:13px;line-height:1.62;color:var(--ink-2)}

/* ---------------- numbering ---------------- */
.numbering{margin:56px 0 0}
.numbering h2{margin:0 0 7px;font:600 24px/1.2 var(--display);color:var(--navy);letter-spacing:-.02em}
.numbering .lead{margin:0 0 22px;font-size:14px;color:var(--ink-2);max-width:70ch}
.scheme{
  display:grid;gap:9px;margin-bottom:22px;padding:18px 20px;font-size:13px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.scheme>div{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.tag{font:700 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;border-radius:6px;padding:6px 8px;white-space:nowrap}
.tag.ism{background:var(--blue-soft);color:var(--blue)}
.tag.pims{background:#eee9fd;color:#6541c8}
.tag.hr{background:#e2f5ea;color:#0f7a45}
@media (prefers-color-scheme:dark){
  .tag.pims{background:#231a3c;color:#c0abf7}
  .tag.hr{background:#12291d;color:#8ed9ae}
}
.notice-list{display:grid;gap:12px}
.notice-item{
  display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--warn-line);
  border-radius:var(--radius);box-shadow:var(--shadow)
}
.notice-item.unaccounted{border-left-color:var(--alert)}
.notice-item .notice-id{flex:0 0 96px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.notice-item .status{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600}
.notice-item .notice-body{flex:1;min-width:0}
.notice-item .former{margin:0 0 6px;font-size:12.5px;color:var(--ink-3)}
.notice-item .headline{margin:0 0 7px;font-size:14px;font-weight:600;line-height:1.5;color:var(--navy)}
.notice-item .detail{margin:0 0 9px;font-size:13.5px;line-height:1.68;color:var(--ink-2)}
.notice-item .meta{margin:0;font-size:12px;color:var(--ink-3)}

/* ---------------- add a policy ---------------- */
.mg-lead{max-width:70ch;margin:0 auto 26px;text-align:center;font-size:14.5px;color:var(--ink-2);line-height:1.7}
.mg-step{padding:26px 28px;margin:0 auto 20px;max-width:860px}
.mg-step h2{
  margin:0 0 16px;font:600 18px/1.3 var(--display);color:var(--navy);
  display:flex;align-items:center;gap:11px;letter-spacing:-.015em
}
.stepno{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-fill);color:#fff;font:700 13px/1 var(--sans)
}
.mg-hint{font-size:12.5px;color:var(--ink-3);margin:0 0 14px}
.mg-warn{color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:var(--radius-sm);padding:11px 14px}

.mg-drop{
  border:2px dashed var(--line);border-radius:var(--radius);padding:30px;text-align:center;
  background:var(--card-quiet);transition:all .15s ease
}
.mg-drop.over{border-color:var(--blue);background:var(--blue-soft)}
.mg-drop p{margin:0 0 6px;font-size:14px;color:var(--ink-2)}
.mg-drop strong{color:var(--navy)}
.mg-drop .mg-hint{margin:0}

.mg-paste{margin:16px 0 0;font-size:13px}
.mg-paste summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:12.5px}
.mg-paste textarea{margin-top:10px}

.mg-field{display:block;margin:16px 0 0}
.mg-field>span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.mg-field>span em{font-style:normal;font-weight:400;color:var(--ink-3)}
.mg-field input[type=text], .mg-field input[type=password],
.mg-field select, .mg-field textarea, .mg-paste textarea{
  width:100%;padding:11px 14px;font:400 14px/1.55 var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:10px
}
.mg-field textarea, .mg-paste textarea{resize:vertical}
.mg-field input:focus, .mg-field select:focus, .mg-field textarea:focus, .mg-paste textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,124,246,.13)
}
.mg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.mg-sub{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line-2)}
.mg-subhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mg-subhead h3{margin:0;font:600 14px/1 var(--sans);color:var(--navy)}
.mg-count{color:var(--ink-3);font-weight:400}
.mg-pair{display:grid;grid-template-columns:1fr 1fr 30px;gap:9px;margin-bottom:9px}
.mg-pair input{
  padding:9px 12px;font:400 13.5px/1.4 var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:9px;min-width:0
}
.mg-clause{display:grid;grid-template-columns:170px 1fr 30px;gap:9px;margin-bottom:11px;align-items:start}
.mg-clause input, .mg-clause textarea{
  padding:9px 12px;font:400 13.5px/1.55 var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:9px;min-width:0;resize:vertical
}
.mg-clause input{font-weight:600;color:var(--blue)}
.mg-x{color:var(--ink-3);font-size:19px;line-height:1;padding:6px 0;text-align:center}
.mg-x:hover{color:var(--alert);text-decoration:none}

.mg-actions{display:flex;align-items:center;gap:16px;margin:24px 0 0;flex-wrap:wrap}
.btn-primary{
  padding:12px 26px;font:600 14px/1 var(--sans);color:var(--on-navy);background:var(--navy);
  border:0;border-radius:999px;cursor:pointer;box-shadow:0 4px 14px rgba(19,42,94,.2)
}
.btn-primary:hover{background:var(--navy-deep)}
.btn-primary[disabled]{opacity:.55;cursor:progress}
.mg-state{font-size:12.5px;color:var(--ink-3)}
.mg-state.ok{color:var(--good);font-weight:500}
.mg-state.err{color:var(--alert);font-weight:500}
.mg-problems{
  margin:14px 0 0;padding:12px 16px 12px 32px;background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:var(--radius-sm);
  color:var(--warn-ink);font-size:13px
}
.mg-problems li{margin:3px 0}

.mg-list{display:grid;gap:2px}
.mg-row{
  display:grid;grid-template-columns:62px 1fr auto auto;gap:14px;align-items:center;
  padding:11px 4px;border-bottom:1px solid var(--line-2);font-size:13.5px
}
.mg-row:last-child{border-bottom:0}
.mg-row-title{font-weight:500;color:var(--navy);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-row-meta{font-size:12px;color:var(--ink-3);white-space:nowrap}
.mg-del{color:var(--ink-3)}
.mg-del:hover{color:var(--alert)}
.foot code{
  font:400 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--blue-soft);color:var(--blue);border-radius:5px;padding:2px 6px
}

@media (max-width:640px){
  .mg-grid{grid-template-columns:1fr}
  .mg-clause{grid-template-columns:1fr}
  .mg-pair{grid-template-columns:1fr 1fr}
  .mg-row{grid-template-columns:56px 1fr auto;row-gap:4px}
  .mg-row-meta{display:none}
}

.foot{border-top:1px solid var(--line);margin:52px 0 0;padding:26px 0 48px;font-size:12.5px;color:var(--ink-3)}
.foot p{margin:0 0 6px}
.foot .small{font-size:12px}

@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero{padding:40px 0 4px}
  .grid{grid-template-columns:1fr}
  #ask-form{flex-direction:column}
  .field{border-radius:var(--radius)}
  #q{border-radius:var(--radius)}
  #ask-btn{padding:15px;border-radius:var(--radius)}
  .answer-card{padding:22px;padding-right:22px}
  .speak{position:static;margin-bottom:14px}
  .navmeta .engine-badge{display:none}
  .notice-item{flex-direction:column;gap:10px}
  .notice-item .notice-id{flex-direction:row;align-items:center;flex-basis:auto}
}