/* Terabase brand palette — from Terabase Brand Guidelines (June 2023):
   Primary #1B3359 · Secondary #086EC1 · Light Blue #50B8E2 · Orange #FE9E2F
   Bright Red-Orange #F75200 · Green #67B218 · Light Green #9ED84C
   Medium Gray #4D5454 (15% tint as background) · Dark Gray #222525
   Type: Inter (web), Inter Tight (headers), Chivo Mono (numbers/labels) */
:root{
  --paper:#e9eaea;          /* medium gray @ ~15% on white */
  --panel:#ffffff;
  --panel-2:#f3f5f5;
  --line:#d6dbdb;
  --line-soft:#e4e7e7;
  --ink:#222525;            /* brand dark gray */
  --ink-soft:#4d5454;       /* brand medium gray */
  --ink-faint:#838a8a;
  --brand:#1b3359;          /* brand primary — headings */
  --callout:#f75200;        /* brand callout orange — eyebrow/badges */
  --accent:#086ec1;         /* brand secondary — buttons/links */
  --accent-ink:#ffffff;
  --accent-soft:#e3f0fb;
  --good:#67b218;           /* brand green */
  --good-soft:#eef7e0;
  --warn:#fe9e2f;           /* brand orange */
  --warn-soft:#fef2e0;
  --bad:#f75200;            /* brand bright red-orange */
  --bad-soft:#feeae0;
  --empty:#c9cdcd;
  --best:#086ec1;           /* "best fit" column — brand secondary blue */
  --best-soft:#e6f2fc;
  --logo-light:block;
  --logo-dark:none;
  --shadow: 0 1px 2px rgba(27,51,89,0.06), 0 4px 14px rgba(27,51,89,0.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171a1a;
    --panel:#222525;        /* brand dark gray */
    --panel-2:#2a2e2e;
    --line:#3d4343;
    --line-soft:#333838;
    --ink:#eef1f1;
    --ink-soft:#b0b8b8;
    --ink-faint:#7c8585;
    --brand:#bcd7f0;
    --callout:#fe9e2f;
    --accent:#50b8e2;       /* brand light blue */
    --accent-ink:#0d1a24;
    --accent-soft:#1c3a4d;
    --good:#74c223;
    --good-soft:#223512;
    --warn:#fe9e2f;
    --warn-soft:#3a2c14;
    --bad:#ff6a1f;
    --bad-soft:#3d2013;
    --empty:#414848;
    --best:#50b8e2;
    --best-soft:#16303f;
    --logo-light:none;
    --logo-dark:block;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.28);
  }
}
:root[data-theme="dark"]{
  --paper:#171a1a;
  --panel:#222525;
  --panel-2:#2a2e2e;
  --line:#3d4343;
  --line-soft:#333838;
  --ink:#eef1f1;
  --ink-soft:#b0b8b8;
  --ink-faint:#7c8585;
  --brand:#bcd7f0;
  --callout:#fe9e2f;
  --accent:#50b8e2;
  --accent-ink:#0d1a24;
  --accent-soft:#1c3a4d;
  --good:#74c223;
  --good-soft:#223512;
  --warn:#fe9e2f;
  --warn-soft:#3a2c14;
  --bad:#ff6a1f;
  --bad-soft:#3d2013;
  --empty:#414848;
  --best:#50b8e2;
  --best-soft:#16303f;
  --logo-light:none;
  --logo-dark:block;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.28);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter", Arial, system-ui, sans-serif;
  padding:0 16px;
}
.wrap{max-width:920px; margin:0 auto; padding-block:32px 64px;}

h1,h2,h3{font-family:"Inter Tight", "Inter", Arial, sans-serif; text-wrap:balance; margin:0;}
.eyebrow{
  font-family:"Chivo Mono", monospace;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--callout); font-weight:500;
}

header.top{margin-bottom:28px;}
/* Teracal product logo, built to the official product-logo pattern (brand
   mark + Terabase wordmark + product name in its own brand color, matching
   the Terabase Construct logo's geometry). Color version on light theme,
   white version on dark (toggled via the --logo-* display tokens). */
.brand-logo{margin-bottom:22px;}
.brand-logo img{height:56px; width:auto; display:block;}
.brand-logo .logo-light{display:var(--logo-light);}
.brand-logo .logo-dark{display:var(--logo-dark);}
header.top h1{font-size:clamp(24px,4vw,32px); font-weight:600; color:var(--brand); margin-top:6px;}
.meeting-head h2{color:var(--brand);}
.instructions{color:var(--ink-soft); font-size:14.5px; line-height:1.55; max-width:62ch; margin-top:8px;}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:20px 22px;
  margin-bottom:18px;
}

/* identity bar */
.idbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.idbar .who{font-size:14px; color:var(--ink-soft);}
.idbar select, .idbar input[type=text]{
  font:inherit; font-size:14px; padding:8px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
}
.idbar .name-pill{
  font-weight:600; color:var(--accent); background:var(--accent-soft);
  padding:4px 10px; border-radius:999px; font-size:13.5px;
}
.idbar-err{font-size:12.5px; color:var(--bad); background:var(--bad-soft); padding:5px 10px; border-radius:8px;}
.linklike{
  background:none; border:none; color:var(--accent); font:inherit; font-size:13px;
  cursor:pointer; text-decoration:underline; padding:0;
}
.btn{
  font:inherit; font-size:13.5px; font-weight:600; padding:8px 14px;
  border-radius:8px; border:1px solid var(--accent); background:var(--accent);
  color:var(--accent-ink); cursor:pointer;
}
.btn.secondary{ background:transparent; color:var(--accent); }
.btn.ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.btn.small{padding:5px 10px; font-size:12.5px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* meeting cards */
.meeting-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px;}
.meeting-head h2{font-size:19px; font-weight:600;}
.meeting-time{color:var(--ink-faint); font-size:13px; font-family:"Chivo Mono", monospace;}
.confirmed-banner{
  display:flex; align-items:center; gap:10px; background:var(--good-soft); color:var(--good);
  border-radius:10px; padding:10px 14px; font-size:14px; font-weight:600; margin-top:10px;
}
.confirmed-banner .dot{width:8px;height:8px;border-radius:50%;background:var(--good);}

.pending-line{font-size:13px; color:var(--ink-faint); margin:8px 0 14px;}
.pending-line b{color:var(--ink-soft); font-weight:600;}

/* mini month calendars */
.cal-strip{display:flex; gap:14px; flex-wrap:wrap; margin:4px 0 6px;}
.cal{background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px;}
.cal-title{
  font-family:"Chivo Mono", monospace; font-size:11px; font-weight:500;
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;
}
.cal-grid{display:grid; grid-template-columns:repeat(7, 26px); gap:2px;}
.cal-dow{font-family:"Chivo Mono", monospace; font-size:9.5px; color:var(--ink-faint); text-align:center; padding-bottom:2px;}
.cal-day{
  font-size:11.5px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; color:var(--ink-soft);
  font:inherit; font-size:11.5px; border:none; background:transparent; padding:0; margin:0;
}
.cal-day.clickable{cursor:pointer;}
.cal-day.clickable:hover{filter:brightness(0.92); transform:scale(1.08);}
.cal-day.blank{visibility:hidden;}
.cal-day.wknd{color:var(--ink-faint);}
.cal-day.cand{
  background:var(--accent-soft); color:var(--accent);
  font-weight:700; box-shadow:inset 0 0 0 1px var(--accent);
}
.cal-day.cand.ans-yes{background:var(--good); color:#fff; box-shadow:inset 0 0 0 1px var(--good);}
.cal-day.cand.ans-maybe{background:var(--warn); color:#fff; box-shadow:inset 0 0 0 1px var(--warn);}
.cal-day.cand.ans-no{background:var(--bad); color:#fff; box-shadow:inset 0 0 0 1px var(--bad);}
.cal-day.cand.confirmed{outline:2px solid var(--good); outline-offset:1px;}

/* your-response controls */
.respond-grid{display:flex; flex-direction:column; gap:8px; margin:14px 0 18px;}
.respond-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 12px; border:1px solid var(--line-soft); border-radius:10px; background:var(--panel-2);
  flex-wrap:wrap;
}
.respond-row .date-label{font-size:14px; font-weight:500; min-width:150px;}
.seg{display:flex; gap:6px;}
.seg button{
  font:inherit; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:7px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); cursor:pointer;
}
.seg button[data-v="yes"].active{background:var(--good); border-color:var(--good); color:#fff;}
.seg button[data-v="maybe"].active{background:var(--warn); border-color:var(--warn); color:#fff;}
.seg button[data-v="no"].active{background:var(--bad); border-color:var(--bad); color:#fff;}
.save-hint{font-size:11.5px; color:var(--ink-faint); font-family:"Chivo Mono", monospace;}

/* results table */
.table-scroll{overflow-x:auto; border:1px solid var(--line-soft); border-radius:10px;}
table.grid{border-collapse:collapse; width:100%; font-size:13px; min-width:480px;}
table.grid th, table.grid td{padding:8px 10px; text-align:center; border-bottom:1px solid var(--line-soft); white-space:nowrap;}
table.grid th.rowhead, table.grid td.rowhead{text-align:left; font-weight:500; position:sticky; left:0; background:var(--panel); min-width:130px;}
table.grid thead th{font-family:"Chivo Mono", monospace; font-weight:500; font-size:11.5px; color:var(--ink-soft); background:var(--panel-2);}
table.grid thead th.best{color:var(--best); background:var(--best-soft);}
table.grid td.best-col{background:var(--best-soft);}
.resp-dot{display:inline-flex; width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff;}
.resp-dot.yes{background:var(--good);}
.resp-dot.maybe{background:var(--warn);}
.resp-dot.no{background:var(--bad);}
.resp-dot.empty{background:var(--empty); color:var(--ink-faint);}
tr.tally td{font-family:"Chivo Mono", monospace; font-weight:600; color:var(--ink-soft); border-top:2px solid var(--line);}
.best-badge{display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700; color:var(--best); font-family:"Chivo Mono", monospace; letter-spacing:.03em;}

/* admin */
details.admin{margin-top:26px;}
details.admin > summary{
  cursor:pointer; font-weight:600; color:var(--ink-soft); font-size:14px; list-style:none;
  display:flex; align-items:center; gap:8px; padding:10px 0;
}
details.admin > summary::-webkit-details-marker{display:none;}
details.admin > summary:before{content:"⚙"; color:var(--accent);}
.admin-body{padding-top:8px;}
.field-row{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
.field-row label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.field-row input[type=text], .field-row input[type=password], .field-row textarea, .field-row input[type=number]{
  font:inherit; font-size:14px; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); width:100%;
}
.field-row textarea{resize:vertical; min-height:56px;}
.field-row .hint{font-size:11.5px; color:var(--ink-faint); font-weight:400;}
.meeting-edit{border:1px dashed var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px;}
.meeting-edit .row2{display:flex; gap:10px; flex-wrap:wrap;}
.meeting-edit .row2 .field-row{flex:1; min-width:160px;}
.date-edit-row{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.date-edit-row input[type=date]{font:inherit; font-size:13px; padding:6px 8px; border-radius:7px; border:1px solid var(--line); background:var(--panel);}
.confirm-row{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap;}
.confirm-row select{font:inherit; font-size:13px; padding:6px 8px; border-radius:7px; border:1px solid var(--line); background:var(--panel);}
.roster-list{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 14px;}
.roster-chip{
  display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:999px; padding:4px 6px 4px 12px; font-size:13px;
}
.roster-chip button{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:14px; padding:2px 4px;}
.danger-zone{margin-top:20px; padding-top:14px; border-top:1px solid var(--line-soft);}
.msg{font-size:12.5px; padding:8px 10px; border-radius:8px; margin-top:8px;}
.msg.err{background:var(--bad-soft); color:var(--bad);}
.msg.ok{background:var(--good-soft); color:var(--good);}
.empty-state{color:var(--ink-faint); font-size:14px; padding:20px 0; text-align:center;}
footer.note{color:var(--ink-faint); font-size:12px; margin-top:30px; text-align:center;}