/* The Ranch — light, following lonestarpostproductions.com rather than the
   tracker's dark look. Anton for display, Poppins for body, #EFF4D1 as the
   accent recovered from the live site.

   The full brand palette is not in the site's page source (Squarespace serves
   it from a CSS bundle), so the neutrals below are chosen to sit with the
   accent rather than sampled. Worth replacing with exact values once the
   computed styles have been read off the live site. */

:root {
  --brand:        #EFF4D1;   /* pale chartreuse — from the site */
  --brand-deep:   #C9D48A;   /* a usable border/hover of the same hue */
  --brand-ink:    #3F4A1B;   /* readable text ON the brand colour */

  --ground:       #FBFBF9;   /* page */
  --surface:      #FFFFFF;   /* cards, rows */
  --ink:          #16191C;
  --soft:         #55606B;
  --faint:        #8B949F;
  --line:         #E4E7EA;

  --go:           #1D6B3F;
  --warn:         #8A5A10;
  --stop:         #9C2C2C;

  --radius:       6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, .display {
  font-family: 'Anton', 'Poppins', sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}
h1 { font-size: 34px; }
h2 { font-size: 20px; }
h3 { font-size: 15px; letter-spacing: .06em; }

/* An action is a button, never underlined text — and it sits to the LEFT of
   the thing it acts on. Carried over from LSPP Tracker, where Lars asked for it
   more than once. */
.btn {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { border-color: var(--brand-deep); }
.btn.primary { background: var(--brand); border-color: var(--brand-deep); color: var(--brand-ink); font-weight: 600; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px 60px; }

header.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: 26px;
}
header.top .wrap { padding-bottom: 0; display: flex; align-items: baseline; gap: 14px; }
header.top .sub { color: var(--faint); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

.divider { color: var(--brand-deep); text-align: center; margin: 26px 0; letter-spacing: .5em; }

.quarter { margin-bottom: 30px; }
.quarter-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 4px; }
.quarter-head .when { margin-left: auto; font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.quarter .theme { color: var(--soft); font-size: 13.5px; font-style: italic; margin: 6px 0 12px; }

.task { display: flex; gap: 11px; align-items: flex-start; background: var(--surface);
        border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 7px; }
.task .body { flex: 1; min-width: 0; }
.task .title { font-weight: 600; font-size: 14px; }
.task .detail { color: var(--soft); font-size: 13px; margin-top: 3px; }
.task .meta { color: var(--faint); font-size: 11.5px; margin-top: 5px; letter-spacing: .04em; text-transform: uppercase; }

.pill { display: inline-block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
        font-weight: 600; padding: 2px 6px; border-radius: 3px; background: #F1F3F5; color: var(--soft); }
.pill.gate { background: var(--brand); color: var(--brand-ink); }
.pill.done { background: #EAF5EE; color: var(--go); }
.pill.blocked { background: #FBEDED; color: var(--stop); }

.empty { color: var(--faint); padding: 40px 0; text-align: center; }

/* ── editing a task ──
   The two buttons stack in the first column, left of what they act on, so the
   row keeps the same shape open or closed and nothing below it jumps. */
.task-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.task.is-editing { background: #FFFDF5; border-color: var(--brand-deep); }
.task-edit { margin-top: 9px; display: flex; flex-direction: column; gap: 9px; }
.task-edit .fields { display: grid; grid-template-columns: 2fr 1fr; gap: 9px; }
.task-edit .fields.three { grid-template-columns: 1fr 1fr 1fr; }
.task-edit textarea, .task-edit input, .task-edit select { font-family: inherit; }
.edit-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pinned-note { color: var(--faint); font-size: 11.5px; }
.edit-error { color: var(--stop); font-size: 12.5px; font-weight: 600; }
.pill.pinned { background: #F3EEFB; color: #6B4FA8; }
.task .notes { color: var(--soft); font-size: 12.5px; margin-top: 6px;
               border-left: 2px solid var(--line); padding-left: 8px; white-space: pre-wrap; }

/* One column on a narrow screen — three date fields side by side stop being
   usable long before the page does. */
@media (max-width: 620px) {
  .task-edit .fields, .task-edit .fields.three { grid-template-columns: 1fr; }
}

/* A finished task stays where it was, and reads as finished — quieter, with the
   title struck through. It is not hidden: crossing something off is the point,
   and a plan you cannot see your progress on is just a list of what is left. */
.task.is-done { background: #FCFDFB; border-color: #E8EDE0; }
.task.is-done .title { text-decoration: line-through; text-decoration-color: var(--brand-deep); color: var(--soft); }
.task.is-done .detail, .task.is-done .meta { opacity: .62; }

/* ── nav ── */
.nav { display: flex; gap: 6px; margin: 0 0 22px; }
.navbtn {
  font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 13px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--soft);
}
.navbtn:hover { color: var(--ink); }
.navbtn.on { background: var(--brand); border-color: var(--brand-deep); color: var(--brand-ink); font-weight: 600; }

/* ── the gate ── */
.gate-head { margin-bottom: 26px; }
.gate-when { color: var(--faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 4px 0 12px; }
.gate-lede { color: var(--soft); font-size: 14px; max-width: 62ch; }
.gate-warn {
  background: #FBEDED; border-left: 3px solid var(--stop); padding: 10px 13px;
  border-radius: 0 var(--radius) var(--radius) 0; font-size: 13.5px; color: #6E2222; max-width: 70ch;
}

.cond { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; margin-bottom: 12px; }
.cond-head { display: flex; align-items: baseline; gap: 11px; margin-bottom: 7px; }
.cond-no { font-family: 'Anton', sans-serif; font-size: 20px; color: var(--brand-deep); line-height: 1; }
.cond-head h3 { font-size: 14.5px; letter-spacing: .01em; text-transform: none; }
.verdict { margin-left: auto; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.verdict.v-yes  { background: #EAF5EE; color: var(--go); }
.verdict.v-part { background: #FDF4E3; color: var(--warn); }
.verdict.v-no   { background: #FBEDED; color: var(--stop); }

.cond-detail { color: var(--soft); font-size: 13.5px; margin: 0 0 11px; }
.cond-grid { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
.cond-grid > div { flex: 1 1 200px; }
.lbl { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 2px; }
.cond-note { color: var(--soft); font-size: 12.5px; font-style: italic; margin: 0 0 10px; }

.feeds { border-top: 1px solid var(--line); padding-top: 10px; }
.feeds ul { list-style: none; padding: 0; margin: 6px 0 0; }
.feed { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 3px 0; }
.feed-q { font-family: 'Anton', sans-serif; font-size: 11px; color: var(--faint); width: 26px; flex: none; }
.feed-title { flex: 1; }
.feed-status { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.feed.is-done .feed-title { text-decoration: line-through; color: var(--soft); }
.feed.is-done .feed-status { color: var(--go); }