/* Kingsport Smells — "The Stack" theme. Drop-in replacement for internal/web/static/style.css. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800&family=Barlow:wght@400;500&display=swap");

:root {
  --bg: #15181d;
  --bg-deep: #0b0d10;
  --ink: #e8e3d8;
  --ink-bright: #f4efe6;
  --muted: #9a9ea6;
  --faint: #a4a8ae;
  --accent: #c9a227;
  --accent-hover: #e0b93a;
  --accent-ink: #15181d;
  --brick: #b5462a;
  --field: #22262d;
  --line: #3a3f48;
  --steel: #2a2e35;
  --plant: #1a1e25;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Barlow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse 120% 60% at 50% 100%, #1c2128 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.4;
}
main { width: 100%; max-width: 560px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

header { padding: 44px 22px 0; text-align: center; }
.kicker {
  font: 700 12px/1 var(--cond);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}
h1 {
  font: 800 clamp(40px, 11vw, 54px)/.95 var(--cond);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 14px 0 10px;
  color: var(--ink-bright);
  text-wrap: balance;
}
.date { margin: 0; font-size: 14px; color: var(--muted); }

.flash {
  margin: 22px 22px 0;
  padding: 10px 14px;
  background: #2a2410;
  border: 1px solid #6b5a1c;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #e8d48a;
}

.submit { padding: 26px 22px 0; display: flex; flex-direction: column; gap: 8px; margin: 0; max-width: none; }
.submit label {
  font: 700 12px/1 var(--cond);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.submit .row { display: flex; gap: 8px; flex-wrap: wrap; }
.submit input {
  flex: 1;
  min-width: 160px;
  height: 48px;
  padding: 0 14px;
  font: 400 17px var(--sans);
  color: var(--ink-bright);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
}
.submit input::placeholder { color: #6f747c; }
.submit input:focus { border-color: var(--accent); }
button { font: inherit; cursor: pointer; }
.submit button, .pick button, form > div > button {
  height: 48px;
  padding: 0 18px;
  font: 700 15px var(--cond);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 4px;
}
.submit button:hover { background: var(--accent-hover); }

.hint { margin: 28px 22px 0; text-align: center; font-size: 13px; color: var(--muted); }
.empty {
  margin: 28px 22px 0;
  text-align: center;
  font: 700 clamp(20px, 5.5vw, 26px)/1.2 var(--cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-bright);
  text-wrap: balance;
}
/* Past-day empty state stays inside the sky, above the stack. */
.sky .empty { position: relative; z-index: 1; padding-bottom: 72px; font-size: 18px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; text-shadow: 0 0 12px var(--bg); }

/* Sky: holds the cloud, the plant (with its smoke) and the lingering strip; pushes everything to the bottom. */
.sky { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-height: 520px; }
.plume {
  position: absolute;
  left: 50%;
  bottom: 170px;
  width: min(560px, 120vw);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 45% 100% at 50% 100%, rgba(190,196,208,.42), rgba(190,196,208,.16) 45%, rgba(190,196,208,.04) 70%, transparent 85%);
  pointer-events: none;
}
.puffs { position: absolute; left: 50%; bottom: 206px; width: 0; height: 0; pointer-events: none; }
.puffs span {
  position: absolute;
  width: var(--s); height: var(--s);
  left: calc(var(--s) / -2); top: calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(205,210,220,.5), rgba(205,210,220,0) 68%);
  filter: blur(8px);
  animation: puff var(--t) linear var(--d) infinite;
}
@keyframes puff {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  20%  { opacity: .7; }
  100% { transform: translate(var(--dx), var(--dy)) scale(2.6); opacity: 0; }
}
.puffs span:nth-child(1) { --s: 60px;  --dx: -10px; --dy: -220px; --t: 7s;    --d: 0s; }
.puffs span:nth-child(2) { --s: 97px;  --dx: 63px;  --dy: -291px; --t: 8.4s;  --d: 1.1s; }
.puffs span:nth-child(3) { --s: 84px;  --dx: -66px; --dy: -362px; --t: 9.8s;  --d: 2.2s; }
.puffs span:nth-child(4) { --s: 71px;  --dx: 69px;  --dy: -273px; --t: 11.2s; --d: 3.3s; }
.puffs span:nth-child(5) { --s: 108px; --dx: -22px; --dy: -344px; --t: 7s;    --d: 4.4s; }
.puffs span:nth-child(6) { --s: 95px;  --dx: 15px;  --dy: -255px; --t: 8.4s;  --d: 5.5s; }
.puffs span:nth-child(7) { --s: 82px;  --dx: -68px; --dy: -326px; --t: 9.8s;  --d: 6.6s; }
.puffs span:nth-child(8) { --s: 69px;  --dx: 61px;  --dy: -237px; --t: 11.2s; --d: 0.7s; }
@media (prefers-reduced-motion: reduce) {
  .puffs { display: none; }
  .plant .beacon { animation: none; }
}

/* The cloud. Sizes computed server-side (classes s1..s7). */
.cloud {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .45em .6em;
  padding: 10px 18px 84px;
  overflow-wrap: anywhere;
  font-family: var(--cond);
}
.cloud .w { display: inline-block; margin: 0; line-height: 1.1; }
.cloud .w button, .cloud .w span {
  background: none;
  border: 0;
  padding: .05em .2em;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(21,24,29,.9);
}
.cloud .w button:hover, .cloud .w button:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  outline: none;
  text-shadow: none;
}
.cloud sup { font-size: .45em; font-weight: 500; color: var(--faint); margin-left: .2em; }
.cloud .w button:hover sup { color: var(--accent-ink); }

.s1 { font-size: min(15px, 4.0vw); font-weight: 500; color: #a4a8ae; }
.s2 { font-size: min(19px, 5.0vw); font-weight: 500; color: #b3b7bd; }
.s3 { font-size: min(24px, 6.2vw); font-weight: 700; color: #c2c5ca; }
.s4 { font-size: min(30px, 7.6vw); font-weight: 700; color: #d0d2d6; }
.s5 { font-size: min(38px, 9.6vw); font-weight: 800; color: #dedbd4; }
.s6 { font-size: min(48px, 12vw);  font-weight: 800; color: #e8e3d8; }
.s7 { font-size: min(60px, 15vw);  font-weight: 800; color: #f4efe6; }

/* The plant: rectangles, a sphere, and clip-path trapezoids. Purely decorative. */
.plant { position: relative; height: 170px; margin-top: -6px; pointer-events: none; }
.plant > * { position: absolute; }
.plant .ground { left: 0; right: 0; bottom: 0; height: 46px; background: var(--bg-deep); }
.plant .rail { left: 0; right: 0; bottom: 46px; height: 2px; background: var(--steel); }
.plant .tank { left: 6%; bottom: 46px; width: 58px; height: 58px; background: #1d2128; border-radius: 6px 6px 0 0; }
.plant .tank-lid { left: 6%; bottom: 104px; width: 58px; height: 8px; background: #262b33; border-radius: 4px 4px 0 0; }
.plant .shed { left: calc(6% + 66px); bottom: 46px; width: 96px; height: 38px; background: var(--plant); display: flex; gap: 8px; padding: 10px; }
.plant .shed i { width: 8px; height: 8px; background: var(--accent); }
.plant .shed i:nth-child(1) { opacity: .85; } .plant .shed i:nth-child(2) { opacity: .4; }
.plant .shed i:nth-child(3) { opacity: .85; } .plant .shed i:nth-child(4) { opacity: .55; }
.plant .stack-small { left: calc(6% + 80px); bottom: 84px; width: 22px; height: 52px; background: linear-gradient(90deg, #3a3f48, #5b616b 50%, #2f343c); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.plant .pipe { left: calc(6% + 170px); right: calc(6% + 120px); bottom: 70px; height: 6px; background: var(--steel); }
.plant .pipe-2 { left: calc(6% + 170px); right: calc(6% + 120px); bottom: 82px; height: 4px; background: var(--steel); }
.plant .stack { left: 50%; bottom: 46px; width: 74px; height: 160px; transform: translateX(-50%); background: linear-gradient(90deg, #464b54, #858b95 45%, #363b43); clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%); }
.plant .stack i { position: absolute; left: 0; right: 0; height: 11px; background: var(--brick); }
.plant .stack i:nth-child(1) { top: 10px; } .plant .stack i:nth-child(2) { top: 34px; } .plant .stack i:nth-child(3) { top: 58px; }
.plant .stack-cap { left: 50%; bottom: 204px; width: 40px; height: 8px; transform: translateX(-50%); background: #262b33; }
.plant .beacon { left: 50%; bottom: 212px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 10px 2px rgba(255,90,60,.6); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
.plant .sphere { right: calc(6% + 70px); bottom: 64px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3038, #161a20); }
.plant .leg-1 { right: calc(6% + 78px); bottom: 46px; width: 6px; height: 22px; background: var(--steel); }
.plant .leg-2 { right: calc(6% + 110px); bottom: 46px; width: 6px; height: 22px; background: var(--steel); }
.plant .shed-2 { right: 6%; bottom: 46px; width: 62px; height: 26px; background: var(--plant); }
.plant .vent { right: calc(6% + 8px); bottom: 72px; width: 14px; height: 30px; background: var(--steel); }

/* Lingering strip: recent terms offered as chips on a lean day. Sits on the
   plant's ground so it reads as a footnote from yesterday, not a report. */
.lingering {
  position: relative;
  background: var(--bg-deep);
  border-top: 1px solid var(--steel);
  padding: 14px 22px 6px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.lingering p {
  flex-basis: 100%; margin: 0 0 2px; text-align: center;
  font: 700 11px/1 var(--cond); letter-spacing: .22em;
  text-transform: uppercase; color: #6f747c;
}
.lingering form { margin: 0; }
.lingering button {
  font: 500 13px/1 var(--cond); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: none;
  border: 1px dashed var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer;
}
.lingering button:hover, .lingering button:focus-visible {
  color: var(--accent-ink); background: var(--accent);
  border-color: var(--accent); border-style: solid; outline: none;
}

.days {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px;
  margin: 0;
  background: var(--bg-deep);
  font: 500 13px var(--cond);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.days a { text-decoration: none; }
.days span { color: var(--muted); }
.about {
  margin: 0;
  padding: 16px 22px 24px;
  background: var(--bg-deep);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.credit {
  margin: 0;
  padding: 0 22px 20px;
  background: var(--bg-deep);
  text-align: center;
  font: 500 12px var(--cond);
  letter-spacing: .08em;
  color: var(--muted);
}

/* Admin (unchanged look, re-tinted for dark) */
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .25rem; }
.muted { color: var(--muted); font-size: .9rem; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
td.term { font-family: var(--cond); font-size: 1.15rem; text-transform: uppercase; }
td.actions { white-space: nowrap; }
td.actions form { display: inline; }
td.actions button { background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: .25rem .6rem; margin-right: .25rem; font-size: .85rem; }
td.actions button.danger { border-color: var(--brick); color: #e0745a; }
.pick { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: 0 22px; }
.pick input { font: inherit; padding: .3rem; background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; }
textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; padding: .5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--field); color: var(--ink); margin-bottom: .5rem; }
.admin main { padding: 0 22px 2rem; max-width: 52rem; }