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

:root {
  --bg: #000000;
  --fg: #ffffff;
  --red: #FF3333;
  --green: #00FF00;
  --dim: #555555;
  --border: #333333;
  --panel-bg: #0a0a0a;
}

body {
  font-family: 'Space Mono', monospace;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
}

/* The input column stays narrow and readable; the schedule gets the extra room,
   because a day line is ~97 monospace characters wide. */
.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
header, main, footer { max-width: 780px; margin-left: auto; margin-right: auto; }

/* Header — month controls live up here so ACCOUNTS is the first real block */
header {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.when { display: flex; gap: 8px; flex-wrap: wrap; }
.when select { font-size: 0.78rem; padding: 8px 10px; }

.brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

#mascot {
  width: 64px;
  height: 64px;
  object-fit: contain;
  animation: mascot-bob 3s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

#mascot.munching { animation: mascot-munch 0.25s ease-in-out infinite; }
@keyframes mascot-munch {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.75); }
}

#mascot.celebrate { animation: mascot-celebrate 0.6s ease-in-out 3; }
@keyframes mascot-celebrate {
  0% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-12deg) translateY(-6px); }
  50% { transform: rotate(12deg) translateY(-10px); }
  75% { transform: rotate(-6deg) translateY(-4px); }
  100% { transform: rotate(0deg) translateY(0); }
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--fg);
  line-height: 1;
  letter-spacing: -0.5px;
}

.tagline {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Tool nav — jump between the Munchr family (Audit / Find Link / Schedule) */
.tool-nav {
  display: flex;
  gap: 4px;
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.tool-nav a {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.tool-nav a:hover { color: var(--fg); border-color: var(--border); }
.tool-nav a.active { color: var(--fg); border-color: var(--fg); }

/* Panels */
main { display: flex; flex-direction: column; gap: 16px; }

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  padding: 24px;
}

.panel h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 14px;
}

.hint {
  font-family: 'Space Mono', monospace;
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Inputs */
select, textarea, input {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: 0.82rem;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s;
}
select:focus, textarea:focus, input:focus { border-color: var(--fg); }

textarea {
  width: 100%;
  line-height: 1.6;
  resize: vertical;
}
textarea::placeholder { color: var(--dim); }

/* Date preview chips */
.date-preview {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.72rem;
}
.date-preview span {
  border: 1px solid var(--border);
  padding: 3px 8px;
  color: var(--dim);
  letter-spacing: 0.5px;
}

/* Confirmed-visit rows */
.confirmed-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.confirmed-row select { flex: 1; min-width: 104px; }
.confirmed-row input.acct { flex: 3; min-width: 200px; }
.confirmed-row .remove {
  border: 1px solid var(--red);
  color: var(--red);
  background: var(--bg);
  padding: 8px 12px;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  transition: background 0.15s, color 0.15s;
}
.confirmed-row .remove:hover { background: var(--red); color: var(--bg); }

/* Buttons */
button { cursor: pointer; }

#generate {
  width: 100%;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  padding: 14px;
  transition: background 0.15s, color 0.15s;
}
#generate:hover { background: var(--bg); color: var(--fg); }
#generate:disabled {
  background: var(--border);
  color: var(--dim);
  border-color: var(--border);
  cursor: not-allowed;
}

.ghost {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 10px 18px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Status line */
#status {
  margin-top: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  min-height: 18px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#status.error { color: var(--red); }
#status.working { color: var(--fg); }
#status.working::after {
  content: " munching…";
  animation: munch 1s steps(4) infinite;
}
@keyframes munch {
  0% { content: " munching"; }
  33% { content: " munching."; }
  66% { content: " munching.."; }
  100% { content: " munching…"; }
}

/* ---------- Schedule output ----------
   One line per day: FRI 8/7 · 12–2 <account> · 4–6 <account> · 9 mi · why.
   Fixed ch-width columns line up because everything here is Space Mono. */
.panel.output { margin-top: 16px; overflow-x: auto; }

.output-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
#outputMeta { display: flex; flex-direction: column; gap: 4px; }
.meta-main {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 1px;
}
.meta-sub {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: var(--dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.meta-sub.legend { display: flex; align-items: center; gap: 6px; }

.notice {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: var(--dim);
  border-left: 2px solid var(--border);
  padding: 4px 0 4px 10px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.weekends { font-family: 'Space Mono', monospace; font-size: 0.8rem; }

.weekend { margin-bottom: 20px; }
.wk-label {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.day {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 4px 0;
  white-space: nowrap;
}
.day-label { width: 9ch; flex: none; font-weight: 700; }
.slot { display: inline-flex; align-items: baseline; width: 34ch; flex: none; gap: 1ch; }
.slot-time { width: 5ch; flex: none; color: var(--dim); }
.acct-name {
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot.empty .acct-name { color: var(--dim); }
.conf-dot { color: var(--red); margin-right: 0.5ch; }
.tail { color: var(--dim); flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Backups */
#backups {
  margin-top: 16px;
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
}
#backups h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--red);
  margin-bottom: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#backups li { margin-left: 18px; line-height: 1.8; }
#backups .bk-name { margin-right: 1ch; }
#backups .why { color: var(--dim); }

#copy { flex: none; }
#copy.copied { border-color: var(--green); color: var(--green); }

.warn { color: var(--red); }
#status.note-line { color: var(--fg); text-transform: none; letter-spacing: 0; }

footer {
  margin-top: 48px;
  color: var(--dim);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}

[hidden] { display: none !important; }

/* Responsive.
   Two dispensary names cannot share a line on a phone — no column budget saves
   that — so below 700px a day line stacks into its two slots with the mileage
   and reason underneath, keeping the weekend heading. */
@media (max-width: 700px) {
  .day {
    display: grid;
    grid-template-columns: 1fr;
    white-space: normal;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .day-label { width: auto; color: var(--fg); margin-bottom: 2px; }
  .slot { width: 100%; }
  .acct-name { max-width: none; white-space: normal; }
  .tail { flex: none; white-space: normal; margin-top: 2px; }
}

@media (max-width: 600px) {
  .app { padding: 24px 16px 60px; }
  header { margin-bottom: 24px; }
  .brand { gap: 14px; }
  .brand-name { font-size: 1.5rem; }
  #mascot { width: 52px; height: 52px; }
  .when select { flex: 1; min-width: 96px; }
  .output-head { flex-direction: column; }
  #copy { width: 100%; }
}

/* The header is a flex row (brand | month controls). The tool nav is a third
   child and must take its own full-width line rather than squeezing in beside
   the selects. */
header .tool-nav { flex-basis: 100%; margin-top: 18px; }

/* Intro callout. Sentence case on purpose — `.hint` is uppercase + letterspaced,
   which reads as shouting for a full sentence. The left bar is deliberately the
   same treatment as `.notice` in the output panel: as a bare paragraph between
   the nav and the first panel it read as stray text, because every other block
   on this page is bordered. Borrowing an existing element's language makes it
   look intentional instead of leftover. */
.intro {
  max-width: 780px;
  margin: 0 auto 24px;
  border-left: 2px solid var(--border);
  padding: 2px 0 2px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--dim);
}

.legend-sep { margin: 0 6px; opacity: 0.6; }