/* ============================================================
   CHEMWITHABI — WEEKEND 25
   Design language: the chemistry notebook + the titration bench.
   Paper backgrounds, indicator-color accents, periodic-tile
   question cards, a burette-style countdown.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* paper + ink — matched to the ChemWithAbi logo */
  --paper: #F4F1EA;
  --paper-line: rgba(29,29,29,0.06);
  --ink: #1D1D1D;
  --ink-soft: #5A5652;

  /* brand crimson, from the logo mark, used with intent */
  --iodine: #7A1F2B;      /* brand mark, headers, primary buttons */
  --iodine-dim: #F3E3E5;
  --brand-rose: #B3384F;  /* "Chemistry Tutoring" rose — secondary accent */
  --amber: #C97A2E;       /* timer, in-progress, warnings */
  --amber-dim: #FBEBD4;
  --titration: #1F7A6C;   /* success / selected / correct — indicator green */
  --titration-dim: #E1F1EC;
  --flag: #A6432E;        /* fraud flags, errors — distinct from brand crimson */
  --flag-dim: #F6E4DE;

  --gold: #C9971F;
  --silver: #8B93A0;
  --bronze: #A66430;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(29,29,29,0.06), 0 6px 20px rgba(29,29,29,0.05);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  background:
    linear-gradient(var(--paper-line) 1px, transparent 1px) 0 0/100% 28px,
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body{ min-height:100vh; }

a{ color: var(--iodine); }

.wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

/* ---------- header / brand ---------- */
.brandbar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.brandmark{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--iodine);
  text-transform: uppercase;
  display:flex;
  align-items:center;
  gap:9px;
}
.brandmark span{ color: var(--ink-soft); font-weight:500; }
.brandmark img{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink:0;
}

/* ---------- side molecule decoration ---------- */
.side-decor{
  position: fixed;
  top: 0;
  bottom: 0;
  width: 200px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 200px 240px;
}
.side-decor.left{
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='240' viewBox='0 0 200 240'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='2'%3E%3Cpolygon points='60,10 82,23 82,49 60,62 38,49 38,23'/%3E%3Cpolygon points='60,62 82,75 82,101 60,114 38,101 38,75'/%3E%3Cpolygon points='104,36 126,49 126,75 104,88 82,75 82,49'/%3E%3Cpolygon points='60,114 82,127 82,153 60,166 38,153 38,127'/%3E%3Cpolygon points='104,140 126,153 126,179 104,192 82,179 82,153'/%3E%3Cline x1='60' y1='166' x2='60' y2='192'/%3E%3Cline x1='60' y1='192' x2='82' y2='205'/%3E%3C/g%3E%3Cg fill='%237A1F2B'%3E%3Ccircle cx='60' cy='10' r='3.5'/%3E%3Ccircle cx='126' cy='49' r='3.5'/%3E%3Ccircle cx='38' cy='23' r='2.8'/%3E%3Ccircle cx='60' cy='192' r='2.8'/%3E%3Ccircle cx='82' cy='205' r='3.5'/%3E%3Ccircle cx='104' cy='192' r='2.8'/%3E%3C/g%3E%3C/svg%3E");
}
.side-decor.right{
  right: 0;
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='240' viewBox='0 0 200 240'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='2'%3E%3Cpolygon points='60,10 82,23 82,49 60,62 38,49 38,23'/%3E%3Cpolygon points='60,62 82,75 82,101 60,114 38,101 38,75'/%3E%3Cpolygon points='104,36 126,49 126,75 104,88 82,75 82,49'/%3E%3Cpolygon points='60,114 82,127 82,153 60,166 38,153 38,127'/%3E%3Cpolygon points='104,140 126,153 126,179 104,192 82,179 82,153'/%3E%3Cline x1='60' y1='166' x2='60' y2='192'/%3E%3Cline x1='60' y1='192' x2='82' y2='205'/%3E%3C/g%3E%3Cg fill='%237A1F2B'%3E%3Ccircle cx='60' cy='10' r='3.5'/%3E%3Ccircle cx='126' cy='49' r='3.5'/%3E%3Ccircle cx='38' cy='23' r='2.8'/%3E%3Ccircle cx='60' cy='192' r='2.8'/%3E%3Ccircle cx='82' cy='205' r='3.5'/%3E%3Ccircle cx='104' cy='192' r='2.8'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 1100px){
  .side-decor{ display:none; }
}
.wrap{ position:relative; z-index:1; }

.title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.08;
  margin: 4px 0 6px;
  letter-spacing: -0.01em;
}
.subtitle{
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 22px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- cards / panels ---------- */
.card{
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}

.notice{
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.notice.amber{ background: var(--amber-dim); border-color: rgba(219,138,46,0.3); color:#7A4E14; }
.notice.ok{ background: var(--titration-dim); border-color: rgba(31,122,108,0.3); color:#144E44; }
.notice.err{ background: var(--flag-dim); border-color: rgba(178,59,59,0.3); color:#7C2626; }

/* ---------- burette timer ---------- */
.burette-row{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.burette{
  position: relative;
  width: 14px;
  height: 40px;
  border-radius: 3px;
  background: #E7E9E2;
  border: 1px solid var(--paper-line);
  overflow: hidden;
  flex-shrink: 0;
}
.burette-fill{
  position:absolute;
  bottom:0; left:0; right:0;
  background: var(--amber);
  transition: height 0.6s linear, background 0.4s ease;
}
.burette-fill.low{ background: var(--flag); }
.timer-label{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.timer-clock{ font-family: var(--font-mono); font-weight:600; font-size: 22px; letter-spacing: 0.02em; }
.timer-clock.low{ color: var(--flag); }

/* ---------- form fields ---------- */
label{
  display:block;
  font-size: 13px;
  font-weight:600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=datetime-local], select, textarea{
  width:100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid #D7DAD0;
  background: #FCFCFA;
  color: var(--ink);
  margin-bottom: 16px;
}
input:focus, select:focus, textarea:focus, button:focus-visible{
  outline: 2px solid var(--iodine);
  outline-offset: 1px;
}
.field-row{ display:flex; gap:12px; }
.field-row > div{ flex:1; }

/* ---------- element tiles (question cards) ---------- */
.tile{
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background:#fff;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.tile-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom: 12px;
}
.tile-num{
  font-family: var(--font-mono);
  font-weight:600;
  font-size: 13px;
  color: #fff;
  background: var(--ink);
  width: 28px; height:28px;
  border-radius: 6px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.tile-num.answered{ background: var(--titration); }
.tile-q{ font-size: 14px; color: var(--ink-soft); padding-top:4px; }
.opts{ display:grid; grid-template-columns: repeat(5,1fr); gap:6px; }
.opt{
  font-family: var(--font-mono);
  font-weight:600;
  font-size: 15px;
  padding: 10px 0;
  text-align:center;
  border-radius: 8px;
  border: 1px solid #D7DAD0;
  background: #FCFCFA;
  cursor:pointer;
  color: var(--ink);
  transition: all 0.12s ease;
}
.opt:hover{ border-color: var(--iodine); }
.opt.selected{
  background: var(--titration);
  border-color: var(--titration);
  color: #fff;
}

/* ---------- buttons ---------- */
button{ font-family: var(--font-body); cursor:pointer; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding: 14px 20px;
  border-radius: 8px;
  border: none;
  font-weight:600;
  font-size: 15px;
  background: var(--iodine);
  color: #fff;
  transition: transform 0.08s ease, opacity 0.15s ease;
}
.btn:hover{ opacity:0.92; }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ background:#B9BEC9; cursor:not-allowed; }
.btn.secondary{ background:#fff; color: var(--ink); border: 1px solid #D7DAD0; }
.btn.small{ width:auto; padding: 8px 14px; font-size:13px; }
.btn.danger{ background: var(--flag); }

/* ---------- leaderboard ---------- */
table{ width:100%; border-collapse: collapse; font-size: 14px; }
th{
  text-align:left;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 8px 10px;
  border-bottom: 2px solid var(--ink);
}
td{ padding: 10px; border-bottom: 1px solid var(--paper-line); }
tr.rank-1 td{ background: linear-gradient(90deg, rgba(201,151,31,0.12), transparent); }
tr.rank-2 td{ background: linear-gradient(90deg, rgba(139,147,160,0.12), transparent); }
tr.rank-3 td{ background: linear-gradient(90deg, rgba(166,100,48,0.12), transparent); }
.rankcell{ font-family: var(--font-mono); font-weight:700; }
.score-cell{ font-family: var(--font-mono); font-weight:600; }
.flag-badge{
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--flag-dim);
  color: var(--flag);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.center{ text-align:center; }
.muted{ color: var(--ink-soft); }
.footer-note{ text-align:center; font-size:12px; color: var(--ink-soft); margin-top: 30px; }

@media (max-width: 420px){
  .opts{ grid-template-columns: repeat(5,1fr); gap:5px; }
  .opt{ font-size:13px; padding:8px 0; }
}