/* LoneStarSwitch — "filament & paper"
   Warm editorial light theme · Fraunces display · Hanken Grotesk body
   · JetBrains Mono for meter-style figures · marigold filament accent. */

:root {
  --paper:    #f6f1e7;   /* warm paper */
  --paper-2:  #fdfaf3;   /* card */
  --ink:      #1b1a17;   /* near-black, warm */
  --ink-soft: #6a6557;   /* muted text */
  --ink-faint:#9a937f;
  --line:     #e4dccb;   /* warm hairline */
  --line-2:   #d6ccb6;
  --amber:    #e09226;   /* filament */
  --amber-lo: #f4b24a;
  --amber-hi: #ffd27a;
  --ember:    #b5500f;   /* deep accent for text on paper */
  --sage:     #2f6f53;   /* positive / savings */
  --shadow:   24px 40px 80px -40px rgba(60, 42, 12, .35);
  --shadow-sm:0 2px 6px rgba(60, 42, 12, .06);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Fine grain over everything for a printed-paper texture. */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 24px 88px; }

/* ---------- header / footer ---------- */
header.site, footer.site {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto; padding: 26px 24px;
}
header.site { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand .star { color: var(--amber); filter: drop-shadow(0 0 6px rgba(224,146,38,.5)); }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.wordmark em { font-style: italic; color: var(--ember); }
nav { display: flex; align-items: center; gap: 18px; }
nav > a { color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
nav > a:hover { color: var(--ember); }

.signin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px;
  text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .2s, transform .15s;
}
.signin:hover { border-color: var(--amber); transform: translateY(-1px); }

.user { display: inline-flex; align-items: center; gap: 9px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); object-fit: cover; }
.uname { font-size: 13.5px; font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signout { font-size: 12.5px; color: var(--ink-faint); text-decoration: none; }
.signout:hover { color: var(--ember); }
@media (max-width: 560px) { .uname { display: none; } }

footer.site { text-align: center; padding-top: 8px; padding-bottom: 48px; }
.foot-mark { color: var(--amber); font-size: 16px; margin-bottom: 10px; opacity: .8; }
footer.site p { color: var(--ink-soft); font-size: 13.5px; max-width: 52ch; margin: 0 auto; }
.fine { color: var(--ink-faint); font-size: 12px; margin-top: 8px; }
.fine.center { text-align: center; max-width: 56ch; margin: 28px auto 0; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 40px 0 14px; }
.glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 620px; height: 420px; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(255,201,92,.55), rgba(255,201,92,0) 70%);
  filter: blur(8px);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:.75} 50%{opacity:1} }

.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 18px;
}
h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 8vw, 76px);
  line-height: .98; letter-spacing: -.025em; font-optical-sizing: auto;
}
h1 .accent {
  background: linear-gradient(95deg, var(--ember), var(--amber));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-style: italic;
}
.lede {
  font-size: 19px; color: var(--ink-soft); max-width: 50ch; margin-top: 22px; line-height: 1.55;
}
.lede em { font-style: italic; color: var(--ink); }

/* ---------- card / form ---------- */
.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px; margin: 34px 0; box-shadow: var(--shadow);
}
.field { margin-bottom: 22px; }
.field > label, label.dz-block { display: block; font-weight: 600; font-size: 14px; margin-bottom: 9px; }
.hint { font-weight: 400; color: var(--ink-faint); font-size: 13px; }

select, input[type=number] {
  width: 100%; padding: 13px 14px; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236a6557' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
select:focus, input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(224,146,38,.15); }
small { display: block; color: var(--ink-faint); font-size: 12.5px; margin-top: 7px; }

.money { position: relative; }
.money span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-family: var(--mono); }
.money input { padding-left: 30px; font-family: var(--mono); }

/* drop zone */
.dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 30px 20px; cursor: pointer;
  border: 1.5px dashed var(--line-2); border-radius: 14px; background: #fffdf8;
  transition: border-color .2s, background .2s, transform .15s;
}
.dropzone:hover { border-color: var(--amber); background: #fffaf0; }
.dropzone.drag { border-color: var(--amber); background: #fff4df; transform: scale(1.01); }
.dropzone.has-file { border-style: solid; border-color: var(--sage); background: #f3f8f4; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dz-icon { font-size: 26px; color: var(--amber); }
.has-file .dz-icon { color: var(--sage); }
.dz-text { font-weight: 600; font-size: 15px; word-break: break-all; }
.dz-sub { font-size: 12.5px; color: var(--ink-faint); }

button[type=submit] {
  width: 100%; margin-top: 6px; padding: 16px; cursor: pointer;
  font-family: var(--sans); font-size: 16.5px; font-weight: 600; color: #2a1602;
  background: linear-gradient(180deg, var(--amber-lo), var(--amber));
  border: none; border-radius: 13px; box-shadow: 0 8px 22px -8px rgba(224,146,38,.7), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(224,146,38,.8); filter: brightness(1.03); }
button[type=submit]:active { transform: translateY(0); }
.arr { display: inline-block; transition: transform .2s; }
button[type=submit]:hover .arr { transform: translateX(4px); }

.switch-toggle { margin: 4px 0 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.switch-toggle summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ember); list-style: none; }
.switch-toggle summary::-webkit-details-marker { display: none; }
.switch-toggle[open] summary { margin-bottom: 16px; }
.dropzone.slim { padding: 18px; }

.card.verdict { border-width: 1.5px; }
.card.verdict.go { border-color: var(--sage); background: linear-gradient(165deg, #f1faf4, var(--paper-2)); }
.card.verdict.stay { border-color: var(--line-2); }
.verdict-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.verdict-tag { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 4px 12px; border-radius: 20px; }
.verdict-tag.go { background: var(--sage); color: #fff; }
.verdict-tag.stay { background: #efe7d6; color: var(--ink-soft); }
.cur-badge { font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 5px; }
.cur-badge.exact { background: #e7f3ec; color: var(--sage); }
.cur-badge.est { background: #f4eee2; color: #9a7b3c; }
.verdict-line { font-size: 17px; line-height: 1.5; }
.verdict-line .pos, .verdict-grid .v.pos { color: var(--sage); }
.verdict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.verdict-grid .v { font-family: var(--mono); font-size: 20px; font-weight: 500; display: block; }
.verdict-grid .v.neg { color: var(--ember); }
.verdict-grid .k { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }

.error {
  background: #fbe9e4; border: 1px solid #f0c2b4; color: #9a3412;
  padding: 13px 16px; border-radius: 12px; font-size: 14.5px; margin: 8px 0 0;
}

/* ---------- how it works ---------- */
.how { margin-top: 56px; }
.how h2, .rank-title, .chart-head h2 {
  font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -.01em;
}
.steps { list-style: none; margin-top: 24px; display: grid; gap: 4px; }
.steps li {
  display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 4px 18px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .num { grid-row: span 2; font-family: var(--mono); font-size: 13px; color: var(--amber); font-weight: 500; padding-top: 4px; }
.steps h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; }
.steps p { color: var(--ink-soft); font-size: 15px; max-width: 46ch; }

/* ---------- results ---------- */
.results-top { padding-top: 30px; }
.back { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); text-decoration: none; }
.back:hover { color: var(--ember); }
.ranking.history tr.clickable { cursor: pointer; transition: background .15s; }
.ranking.history tr.clickable:hover { background: #f3faf6; }
.results-top .kicker { margin: 18px 0 14px; }
.big-num { font-family: var(--serif); display: inline-block; font-weight: 600; }
.big-num small { font-family: var(--sans); font-size: .32em; font-weight: 600; color: var(--ink-faint); -webkit-text-fill-color: var(--ink-faint); margin-left: 2px; letter-spacing: 0; }

/* usage chart */
.chart-card { padding: 26px 28px 22px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.chart-meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.usage-chart {
  display: flex; align-items: flex-end; gap: 7px; height: 150px; margin: 22px 0 6px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.bar {
  width: 100%; max-width: 30px; height: var(--h); min-height: 4px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--amber-lo), #ecc98d);
  transition: filter .2s; animation: grow .9s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: bottom;
}
.bar.peak { background: linear-gradient(180deg, var(--amber), var(--ember)); box-shadow: 0 0 14px -2px rgba(224,146,38,.6); }
.bar-col:hover .bar { filter: brightness(1.08); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bar-label { position: absolute; bottom: -20px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.chart-note { color: var(--ink-soft); font-size: 13.5px; margin-top: 18px; max-width: 56ch; }

/* ranking */
.ranking { margin-top: 44px; }
.rank-title { margin-bottom: 20px; }

.plan-card.winner {
  position: relative; background: linear-gradient(165deg, #fffaf0, var(--paper-2));
  border: 1.5px solid var(--amber); border-radius: 18px; padding: 26px 26px 22px;
  box-shadow: var(--shadow); overflow: hidden;
}
.plan-card.winner::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--ember), var(--amber));
}
.winner-tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 12px;
}
.plan-main h3 { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.01em; }
.plan-main .prov { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.badge { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; vertical-align: middle; text-transform: lowercase; }
.badge.exact { background: #e7f3ec; color: var(--sage); border: 1px solid #bfe3cd; }
.badge.est { background: #f4eee2; color: #9a7b3c; border: 1px solid #e6d8be; }
.plan-main h3 .badge { font-size: 11px; }
.efl-link { color: var(--ember); text-decoration: none; font-weight: 600; font-size: .92em; }
.efl-link:hover { text-decoration: underline; }
td.muted, .muted { color: var(--ink-faint); }
.plan-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat .v { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.stat .v small { font-size: .6em; color: var(--ink-faint); }
.stat .k { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }

.plan-row {
  display: grid; grid-template-columns: 28px 1fr auto auto auto; align-items: center; gap: 16px;
  padding: 16px 18px; margin-top: 8px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 13px;
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.plan-row:hover { transform: translateX(3px); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.rank-n { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); }
.row-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.row-name .pn { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-name .pp { font-size: 12.5px; color: var(--ink-faint); }
.row-rate { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.row-cost { font-family: var(--mono); font-size: 16px; font-weight: 500; }
.row-delta { font-family: var(--mono); font-size: 12px; color: var(--ember); background: #fbeede; padding: 3px 9px; border-radius: 20px; }

/* ---------- entrance animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); animation: rise .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .bar, .glow { animation: none; opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .card { padding: 22px; border-radius: 16px; }
  .plan-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .plan-row { grid-template-columns: 22px 1fr auto; row-gap: 4px; }
  .row-rate { display: none; }
  .plan-main h3 { font-size: 23px; }
  .usage-chart { gap: 4px; }
}