/* Casebreaker / Peartree — site styles.
   Palette and fonts are the game's own (plan/reference/brooke-breaker-web.html). */

:root{
  --paper:#ece4d3;
  --paper-deep:#ddcfae;
  --surface:#f7f1e3;
  --ink:#2b2420;
  --ink-soft:#5c5044;
  --ink-faint:#8a7c68;
  --accent:#a8352b;
  --accent-soft:#c07a2e;
  --line:#c3b28c;
  --shadow:rgba(43,36,32,0.22);
  --hole:#c9bb98;
  --hole-shadow:rgba(43,36,32,0.35);
  --win:#3f7a4a;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#201b16;
    --paper-deep:#171310;
    --surface:#2a2319;
    --ink:#ece2cd;
    --ink-soft:#b7a88c;
    --ink-faint:#7d715d;
    --accent:#e2685a;
    --accent-soft:#e8a750;
    --line:#4a3f31;
    --shadow:rgba(0,0,0,0.55);
    --hole:#3a3226;
    --hole-shadow:rgba(0,0,0,0.6);
    --win:#5fae6c;
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(0,0,0,0.05), transparent 40%),
    radial-gradient(circle at 85% 92%, rgba(0,0,0,0.05), transparent 40%);
  color:var(--ink);
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:1rem;
  line-height:1.55;
  display:flex;
  justify-content:center;
  padding:36px 16px 64px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--accent-soft);}
a:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:2px;}

.case{width:100%;max-width:640px;}

/* ---- Folder tab header ---- */
.tab-row{display:flex;align-items:flex-end;gap:10px;padding-left:24px;}
.tab{
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:10px 10px 0 0;
  padding:8px 20px 10px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.72rem;
  letter-spacing:0.09em;
  color:var(--ink-soft);
  text-transform:uppercase;
  text-decoration:none;
}
a.tab:hover{color:var(--ink);}
.tab.current{background:var(--surface);color:var(--ink);position:relative;top:1px;}

.folder{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:2px 14px 14px 14px;
  box-shadow:0 18px 40px -20px var(--shadow), 0 2px 0 var(--line);
  padding:32px clamp(20px,5vw,44px) 40px;
  position:relative;
}

/* ---- Masthead ---- */
.masthead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  border-bottom:2px solid var(--ink);
  padding-bottom:16px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
h1{
  font-family:'Special Elite', 'IBM Plex Mono', monospace;
  font-size:clamp(1.6rem, 5vw, 2.2rem);
  font-weight:400;
  margin:0 0 4px;
  letter-spacing:0.02em;
  text-wrap:balance;
}
h2{
  font-family:'Special Elite', 'IBM Plex Mono', monospace;
  font-size:1.15rem;
  font-weight:400;
  letter-spacing:0.03em;
  margin:32px 0 8px;
}
.subtitle{
  margin:0;
  font-size:0.85rem;
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing:0.03em;
}
.case-id{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.75rem;
  color:var(--ink-faint);
  text-align:right;
  line-height:1.6;
  white-space:nowrap;
}
.case-id strong{color:var(--ink-soft);font-weight:600;}

p{margin:0 0 1em;}
.lede{font-size:1.05rem;}

/* ---- Policy and support pages ---- */
h3{
  font-size:1rem;
  font-weight:600;
  margin:22px 0 4px;
}
.folder ul{margin:0 0 1em;padding-left:1.3em;}
.folder li{margin-bottom:0.5em;}
.faq h3{text-wrap:balance;}

/* ---- Board mock ---- */
.board{
  margin:28px 0;
  padding:16px;
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-radius:8px;
  position:relative;
}
.row-label{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
}
.log-row{
  display:grid;
  grid-template-columns:2.2rem 1fr auto;
  align-items:center;
  gap:12px;
  padding:8px 0;
  border-top:1px dashed var(--line);
}
.log-row:first-of-type{border-top:none;}
.log-num{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.72rem;
  color:var(--ink-faint);
  letter-spacing:0.08em;
}
.pegs{display:flex;gap:10px;}
.peg-hole{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--hole) 0%, var(--hole) 40%, var(--hole-shadow) 100%);
  box-shadow:inset 0 2px 4px var(--hole-shadow);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.peg{
  width:100%;height:100%;border-radius:50%;
  box-shadow:inset -3px -4px 6px rgba(0,0,0,0.28), inset 2px 3px 4px rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.22);
}
.c-white{background:#f7f4ec;}
.c-gray{background:#8f9089;}
.c-yellow{background:#e8c93f;}
.c-orange{background:#ed851d;}
.c-red{background:#d13b34;}
.c-pink{background:#dc6a98;}
.c-blue{background:#4fa8e0;}
.c-green{background:#3f7d4a;}

.fb{
  display:grid;
  grid-template-columns:repeat(2, 10px);
  gap:5px;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
}
.fb-pin{width:10px;height:10px;border-radius:50%;background:transparent;}
.fb-pin.exact{
  background-color:#1c1c1a;
  box-shadow:0 0 0 1px rgba(255,255,255,0.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%233ecf6b' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:62%;background-position:center;background-repeat:no-repeat;
}
.fb-pin.partial{background:#f7f4ec;box-shadow:0 0 0 1px rgba(0,0,0,0.4);}

.stamp{
  position:absolute;
  right:20%;
  bottom:10px;
  transform:rotate(-9deg);
  font-family:'Special Elite', monospace;
  font-size:clamp(1.2rem, 4.5vw, 1.7rem);
  letter-spacing:0.08em;
  padding:6px 18px;
  border:4px double currentColor;
  border-radius:4px;
  text-transform:uppercase;
  color:var(--win);
  opacity:0.88;
  pointer-events:none;
}

@media (max-width:420px){
  .peg-hole{width:26px;height:26px;}
  .pegs{gap:8px;}
  .stamp{right:14%;bottom:8px;}
}

/* ---- Notice, links, footer ---- */
.notice{
  margin:28px 0 8px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:4px;
  background:var(--paper);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.85rem;
  letter-spacing:0.02em;
}
.links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.85rem;
  letter-spacing:0.03em;
}
footer{
  margin-top:40px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:0.85rem;
  color:var(--ink-soft);
}
footer p{margin:0 0 6px;}

.placeholder{color:var(--ink-soft);}