:root {
  color-scheme: dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #071713;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled) {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid #d6ff57;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Thought Parking — acid-lit utility lot */
.parking { min-height: 100svh; box-sizing: border-box; background: #071713; color: #d6ff57; font-family: Arial, sans-serif; padding: 20px; }
.parking * { box-sizing: border-box; }
.parking button { font: inherit; cursor: pointer; }
.parkingSign { border: 2px solid #d6ff57; display: flex; justify-content: space-between; padding: 14px 18px; font: 700 .72rem ui-monospace, monospace; letter-spacing: .14em; }
.parkingGrid { display: grid; grid-template-columns: minmax(320px, .8fr) 1.2fr; min-height: calc(100svh - 75px); }
.captureBay { position: relative; padding: 8vh clamp(24px, 5vw, 70px); border-right: 2px solid #d6ff57; background: repeating-linear-gradient(90deg, transparent 0 95%, #203d2f 96% 97%, transparent 98%); }
.bayNumber { font: 900 clamp(7rem, 16vw, 15rem)/.7 Impact, sans-serif; color: #15392b; position: absolute; right: 20px; top: 35px; }
.captureBay h1 { font: 800 clamp(3rem, 6vw, 6.8rem)/.84 Arial, sans-serif; letter-spacing: -.07em; color: #efffe7; max-width: 7ch; position: relative; margin: 0 0 20px; }
.captureBay textarea { width: 100%; min-height: 140px; background: #e8f5df; color: #102119; border: 0; padding: 20px; font: 1.1rem/1.5 ui-monospace, monospace; resize: vertical; position: relative; }
.lanePicker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0; }
.lanePicker button { border: 1px solid #4a6b5c; background: transparent; color: #b8cdbf; padding: 10px 4px; text-transform: uppercase; font: 600 .62rem ui-monospace, monospace; }
.parkButton { width: 100%; border: 0; background: #d6ff57; color: #071713; padding: 17px; font-weight: 900; text-transform: uppercase; }
.parkButton:disabled { opacity: .5; cursor: not-allowed; }
.captureBay > p { font: 500 .72rem ui-monospace, monospace; color: #8faa9d; margin: 8px 0 0; }
.parkingLot { padding: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; background: linear-gradient(#0c2119 1px, transparent 1px), linear-gradient(90deg, #0c2119 1px, transparent 1px); background-size: 42px 42px; }
.lotTop { grid-column: 1 / -1; display: flex; justify-content: space-between; text-transform: uppercase; font: 600 .68rem ui-monospace, monospace; letter-spacing: .1em; gap: 10px; }
.lotTop button { border: 1px solid #d6ff57; background: #071713; color: #d6ff57; padding: 9px; }
button.activeLane { background: #d6ff57; color: #071713; }
.parkingLot article { min-height: 170px; border: 2px solid #456956; border-left: 9px solid #d6ff57; background: #0d261c; padding: 20px; color: #e7f6e9; }
.parkingLot article > span, .parkingLot time { font: 600 .62rem ui-monospace, monospace; color: #91ad9b; text-transform: uppercase; display: block; }
.parkingLot article p { font-size: 1.2rem; line-height: 1.35; margin: 10px 0; }
.emptyLot { grid-column: 1 / -1; min-height: 400px; border: 2px dashed #375645; display: grid; place-content: center; text-align: center; color: #789b86; }
.emptyLot strong { font: 900 clamp(4rem, 10vw, 9rem)/1 Impact, sans-serif; color: #15392b; }
.lotTabs { display: flex; gap: 8px; }
.thoughtActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.thoughtActions button { border: 1px solid #456956; background: transparent; color: #b8cdbf; padding: 8px 10px; text-transform: uppercase; font: 600 .62rem ui-monospace, monospace; }
.thoughtActions button:hover { border-color: #d6ff57; color: #d6ff57; }
.shredButton { border-color: #7a4a3a !important; color: #d8977c !important; }
.shredButton:hover { border-color: #e08a5f !important; color: #f3b48f !important; }
.cancelShred { opacity: .6; }
.snoozeRow { display: flex; gap: 8px; margin-top: 10px; }
.snoozeRow input { flex: 1; border: 1px solid #456956; background: #0a1f18; color: #e7f6e9; padding: 8px; font: .75rem ui-monospace, monospace; }
.snoozeRow button { border: 1px solid #d6ff57; background: #d6ff57; color: #071713; padding: 8px 12px; font: 700 .62rem ui-monospace, monospace; text-transform: uppercase; }
.snoozeRow button:disabled { opacity: .4; }
.snoozed { opacity: .55; }

@media (max-width: 780px) {
  .parkingSign span { display: none; }
  .parkingGrid { grid-template-columns: 1fr; min-height: auto; }
  .captureBay { border-right: 0; border-bottom: 2px solid #d6ff57; }
  .parkingLot { grid-template-columns: 1fr; padding: 20px; }
  .snoozeRow { flex-direction: column; }
  .lotTop { flex-direction: column; gap: 10px; align-items: stretch; }
  .lotTabs { justify-content: space-between; }
}