/* ============================================================
   ProjectFrenzy — ported from the prototype.
   Two pages: Today (the torn-off daily sheet) and Long Term (the notebook).
   Typography does the hierarchy; color is sparse; ink on paper.
   ============================================================ */

:root{
  --paper:#faf8f3; --paper-edge:#f1ede3; --panel:#fffdf8;
  --ink:#1f1d1a; --ink-soft:#6b665d; --ink-faint:#a8a294;
  --rule:#ddd6c7; --rule-soft:#e9e3d6;
  --accent:#b5452f; --accent-ink:#9a3825; --accent-wash:#f9ece7;
  --done:#b9b2a3;
  --shadow:0 1px 2px rgba(40,34,22,.04), 0 8px 28px rgba(40,34,22,.06);
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:radial-gradient(1200px 600px at 50% -10%, #fffdf8 0%, var(--paper) 55%) fixed;
  color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh;
}
a{ color:inherit; }
button{ font-family:inherit; }
/* inline button_to forms must not break the flex rows they sit in */
.contents-form{ display:contents; }

/* ---------- top chrome ---------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:24px;
  padding:13px 26px; background:rgba(250,248,243,.82);
  backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid var(--rule);
}
.brand{ font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.2px; white-space:nowrap; text-decoration:none; }
.brand .pf-mark{ color:var(--accent); }
.brand small{ display:block; font-family:var(--sans); font-weight:450; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:1px; }
.nav{ display:flex; align-items:center; gap:18px; margin-left:8px; }
.pages{ display:flex; gap:4px; background:var(--paper-edge); padding:3px; border-radius:999px; }
.pages a{
  font-family:var(--serif); font-weight:600; font-size:14px; color:var(--ink-soft);
  background:transparent; border:0; padding:7px 18px; border-radius:999px; cursor:pointer;
  transition:.15s; text-decoration:none;
}
.pages a:hover{ color:var(--ink); }
.pages a.active{ background:var(--ink); color:var(--paper); box-shadow:var(--shadow); }
.topbar__end{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.topbar__end a, .topbar__end button{ font-size:12.5px; color:var(--ink-faint); background:transparent;
  border:0; cursor:pointer; text-decoration:none; }
.topbar__end a:hover, .topbar__end button:hover{ color:var(--ink); }

.stage{ padding:30px 26px 80px; }

/* flash */
.flash{ max-width:1180px; margin:0 auto 14px; font-size:13.5px; color:var(--ink-soft);
  background:#fff; border:1px solid var(--rule); border-radius:10px; padding:10px 16px; box-shadow:var(--shadow); }

/* =========================================================
   SHARED task primitives
   ========================================================= */
.tasks{ list-style:none; margin:0; padding:0; }
.task{ position:relative; display:flex; align-items:flex-start; gap:8px;
  padding:3px 6px 3px 0; margin:1px 0; border-radius:6px; transition:background .12s; }
.task:hover{ background:var(--paper-edge); }
.task__toggle{ flex:1; display:flex; align-items:flex-start; gap:8px; background:transparent;
  border:0; text-align:left; padding:0; cursor:pointer; color:inherit; }
.task .dash{ color:var(--ink-faint); flex:none; width:12px; text-align:center; line-height:1.5; user-select:none; transition:color .15s; }
.task:hover .dash{ color:var(--ink-soft); }
.task .label{ flex:1; position:relative; line-height:1.5; font-size:15px; }
.task .label::after{ content:""; position:absolute; left:-2px; top:51%; width:0; height:1.5px;
  background:var(--ink-soft); transform:translateY(-50%) rotate(-.4deg);
  transition:width .34s cubic-bezier(.65,.02,.27,1); pointer-events:none; }
.task.done .label{ color:var(--done); }
.task.done .label::after{ width:calc(100% + 4px); }
.task.done .dash{ color:var(--done); }
.task .rolled{ flex:none; align-self:center; font-size:10px; color:var(--ink-faint); letter-spacing:.06em; opacity:.85; }
.task.roll2 .rolled{ color:var(--accent); opacity:.7; }
.task__del{ opacity:0; border:0; background:transparent; color:var(--ink-faint); cursor:pointer;
  font-size:13px; padding:0 4px; transition:opacity .12s; align-self:center; }
.task:hover .task__del{ opacity:.7; }
.task__del:hover{ color:var(--accent); }

@keyframes land{ 0%{ background:#f9e9e4; } 100%{ background:transparent; } }
.task.just-landed{ animation:land 1.6s ease; }

/* =========================================================
   TODAY (desktop)
   ========================================================= */
.daysheet{ max-width:1180px; margin:0 auto; }
.daysheet__head{ display:flex; align-items:baseline; gap:16px; margin:0 0 16px; }
.daysheet__date{ font-family:var(--serif); font-weight:600; font-size:30px; letter-spacing:.2px; }
.daysheet__sub{ color:var(--ink-soft); font-size:14px; }
.daysheet__meta{ margin-left:auto; font-size:13px; color:var(--ink-faint); }

.qbar{ max-width:1180px; margin:0 auto 8px; }
.qbar__field{
  display:flex; align-items:center; gap:10px; background:var(--panel);
  border:1px solid var(--rule); border-radius:12px; padding:11px 15px; box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s;
}
.qbar__field:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.qbar__field .lead{ color:var(--accent); font-weight:600; font-size:15px; }

/* transparent input + mirror layer: paints the leading @token in accent color */
.qbar__inputwrap{ position:relative; flex:1; display:flex; align-items:center; }
/* input and mirror MUST share identical metrics so glyphs (and the caret) coincide */
.qbar__inputwrap input,
.qbar__mirror{
  font-family:var(--sans); font-size:15.5px; font-weight:400;
  letter-spacing:normal; line-height:1.4; padding:0; margin:0; border:0;
}
.qbar__inputwrap input{
  width:100%; flex:1; outline:none; background:transparent;
  color:transparent; caret-color:var(--ink);   /* hide glyphs, keep caret */
  position:relative; z-index:1;
}
.qbar__inputwrap input::placeholder{ color:var(--ink-faint); }
.qbar__inputwrap input::selection{ color:var(--ink); background:var(--accent-wash); }
.qbar__mirror{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center;   /* vertical-center the single line */
  color:var(--ink); white-space:pre; overflow:hidden; pointer-events:none;
}
.qbar__tok{ color:var(--accent); }    /* color-only (not bold) to keep the caret aligned */
.qbar__hint{ font-size:12px; color:var(--ink-faint); }
.qbar__hint kbd{ font-family:var(--sans); font-size:11px; background:#fff; color:var(--ink-soft);
  border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px; padding:1px 5px; }
.qbar__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; align-items:center; }
.qbar__chips .lbl{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-right:2px; }
.catchip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500;
  color:var(--ink-soft); border:1px solid var(--rule); background:#fff; border-radius:999px;
  padding:4px 11px; cursor:pointer; transition:.14s; text-decoration:none; }
.catchip:hover{ border-color:var(--ink-faint); color:var(--ink); }
.catchip .dot{ width:7px; height:7px; border-radius:50%; }
.catchip .pin{ font-size:10px; color:var(--accent); }

.daysheet__rule{ height:0; border:0; border-top:1px solid var(--rule); margin:16px 0 26px; }

.columns{ column-count:3; column-gap:48px; }
@media (max-width:1080px){ .columns{ column-count:2; } }
@media (max-width:720px){ .columns{ column-count:1; } }
.context{ break-inside:avoid; margin:0 0 30px; }
.context__header{ display:flex; align-items:center; gap:8px; font-family:var(--serif);
  font-weight:600; font-size:16.5px; letter-spacing:.2px; padding-bottom:5px; margin-bottom:9px;
  border-bottom:1.5px solid var(--ink); }
.context__header .marker{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--ctx,transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.04); }
.context__header .pin{ font-size:10px; color:var(--ink-faint); }
.context__header .count{ margin-left:auto; font-family:var(--sans); font-weight:500; font-size:11px;
  color:var(--ink-faint); letter-spacing:.04em; }
.context.is-empty .context__header{ border-bottom-color:var(--rule); color:var(--ink-soft); }
.context.is-empty .empty-note{ font-size:12.5px; color:var(--ink-faint); font-style:italic; padding:2px 0 0 2px; }

.quickadd{ display:flex; align-items:center; gap:8px; padding:3px 6px 3px 0; margin-top:2px;
  color:var(--ink-faint); border-radius:6px; cursor:text; }
.quickadd .dash{ width:12px; text-align:center; flex:none; }
.quickadd .ph{ font-size:14px; }
.quickadd:hover{ background:var(--paper-edge); }
.quickadd input{ flex:1; border:0; background:transparent; outline:none; font-family:var(--sans);
  font-size:15px; color:var(--ink); padding:0; display:none; }
.quickadd.editing .ph{ display:none; }
.quickadd.editing input{ display:block; }
.quickadd.editing .dash{ color:var(--accent); }

/* =========================================================
   LONG TERM — the notebook (rail + planning surface)
   ========================================================= */
.lt{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:248px 1fr; gap:38px; align-items:start; }
@media (max-width:840px){ .lt{ grid-template-columns:1fr; } .lt__rail{ position:static; } }

.lt__rail{ position:sticky; top:84px; }
.rail__title{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:11px;
  font-weight:600; color:var(--ink-faint); margin:2px 0 10px; display:flex; align-items:center; }
.rail__title .all{ margin-left:auto; text-transform:none; letter-spacing:0; font-size:12px; cursor:pointer;
  color:var(--ink-soft); font-weight:500; text-decoration:none; }
.rail__title .all:hover{ color:var(--accent); }

.catrow{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px;
  transition:background .12s; user-select:none; text-decoration:none; color:inherit; }
.catrow:hover{ background:var(--paper-edge); }
.catrow.active{ background:var(--ink); }
.catrow.active .catrow__name, .catrow.active .catrow__count{ color:var(--paper); }
.catrow.active .grip{ color:rgba(255,255,255,.45); }
.catrow .grip{ color:var(--ink-faint); cursor:grab; font-size:13px; transition:opacity .12s; line-height:1; opacity:.5; }
.catrow:hover .grip{ opacity:.7; }
.catrow .dot{ width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.05); }
.catrow__name{ flex:1; font-size:14.5px; font-weight:500; }
.catrow__count{ font-size:11px; color:var(--ink-faint); font-weight:500; }
/* inline rename — collapsed until the ✎ reveal */
.catrow__rename{ display:none; flex:1; margin:0; }
.catrow.editing .catrow__name,
.catrow.editing .catrow__count,
.catrow.editing .act{ display:none; }
.catrow.editing .catrow__rename{ display:block; }
.catrow__rename input{ width:100%; font-family:var(--sans); font-size:14.5px; font-weight:500;
  color:var(--ink); background:var(--panel); border:1px solid var(--accent); border-radius:6px;
  padding:3px 7px; outline:none; }
.catrow .act{ opacity:0; display:flex; gap:2px; transition:opacity .12s; align-items:center; }
.catrow:hover .act{ opacity:1; }
.catrow .act button{ border:0; background:transparent; cursor:pointer; color:var(--ink-faint);
  font-size:12px; padding:2px 4px; border-radius:5px; line-height:1; }
.catrow .act button:hover{ background:rgba(0,0,0,.06); color:var(--ink); }
.catrow .act button.pinned{ color:var(--accent); }
.catrow.dragover{ box-shadow:inset 0 2px 0 var(--accent); }
.catrow.dragging{ opacity:.4; }

.rail__add{ display:flex; align-items:center; gap:8px; padding:8px 9px; margin-top:6px;
  border-top:1px solid var(--rule-soft); color:var(--ink-faint); cursor:text; }
.rail__add input{ border:0; outline:none; background:transparent; font-family:var(--sans);
  font-size:14px; color:var(--ink); flex:1; }
.rail__add .plus{ color:var(--accent); font-weight:600; }

.rail__archived{ margin-top:14px; }
.rail__archived summary{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  cursor:pointer; padding:6px 9px; list-style:none; }
.rail__archived summary::-webkit-details-marker{ display:none; }
.rail__archived .catrow{ opacity:.7; }
.rail__archived .catrow__name{ font-weight:450; }

.lt__main{ min-width:0; }
.lt__intro{ margin:0 0 22px; }
.lt__intro h1{ font-family:var(--serif); font-weight:600; font-size:27px; margin:0 0 4px;
  display:flex; align-items:center; gap:11px; }
.lt__intro h1 .marker{ width:11px; height:11px; border-radius:50%; }
.lt__intro p{ color:var(--ink-soft); font-size:14px; margin:0; max-width:60ch; }

.ltcat{ margin-bottom:34px; }
.ltcat__head{ display:flex; align-items:center; gap:10px; padding-bottom:6px; margin-bottom:10px;
  border-bottom:1.5px solid var(--ink); }
.ltcat__head .marker{ width:8px; height:8px; border-radius:50%; flex:none; }
.ltcat__head h2{ font-family:var(--serif); font-weight:600; font-size:18px; margin:0; }
.ltcat__head .pin{ font-size:11px; color:var(--ink-faint); }
.ltcat__head .seg{ margin-left:auto; font-size:11px; color:var(--ink-faint); }

.bk-item{ border-radius:8px; padding:6px 10px; margin:1px -10px; transition:background .12s; }
.bk-item:hover{ background:var(--panel); box-shadow:var(--shadow); }
.bk-item__row{ display:flex; align-items:center; gap:10px; }
.bk-item__row .twist{ flex:none; width:14px; color:var(--ink-faint); cursor:pointer; transition:transform .2s; font-size:11px; user-select:none; text-decoration:none; }
.bk-item.open .twist{ transform:rotate(90deg); color:var(--ink-soft); }
.bk-item__row .twist.hidden{ visibility:hidden; }
.bk-item__name{ flex:1; font-size:15.5px; }
button.bk-item__name{ text-align:left; background:transparent; border:0; cursor:pointer; padding:0; color:inherit; font-family:inherit; }
.bk-item__name.done{ color:var(--done); text-decoration:line-through; }
.bk-item.vague .bk-item__name{ font-family:var(--serif); font-style:italic; font-size:16px; }
.bk-item__tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  border:1px solid #e8cfc8; border-radius:999px; padding:1px 7px; background:var(--accent-wash); }
.bk-item__tag.on-today{ color:var(--ink-soft); border-color:var(--rule); background:#fff; }
.bk-item__actions{ display:flex; gap:6px; opacity:0; transition:opacity .14s; align-items:center; }
.bk-item:hover .bk-item__actions{ opacity:1; }
.btn-mini{ border:1px solid var(--rule); background:#fff; border-radius:6px; font-family:var(--sans);
  font-size:12px; font-weight:500; color:var(--ink-soft); padding:3px 9px; cursor:pointer;
  transition:.14s; white-space:nowrap; }
.btn-mini:hover{ border-color:var(--ink-faint); color:var(--ink); }
.btn-mini.accent{ color:var(--accent); border-color:#e8cfc8; }
.btn-mini.accent:hover{ background:var(--accent-wash); }

.breakdown{ margin-left:24px; border-left:2px solid var(--rule); }
.breakdown ul{ list-style:none; margin:6px 0 4px; padding:0; }
.breakdown li{ display:flex; align-items:center; gap:8px; padding:4px 8px; font-size:14.5px;
  color:var(--ink-soft); border-radius:6px; }
.breakdown li:hover{ background:var(--paper-edge); }
.breakdown li .dash{ color:var(--ink-faint); }
.breakdown li .label{ flex:1; text-align:left; background:transparent; border:0; cursor:pointer; color:inherit; font-size:14.5px; padding:0; }
.breakdown li .label.done{ color:var(--done); text-decoration:line-through; }
.breakdown li .promote{ opacity:0; border:0; background:transparent; color:var(--accent); font-weight:600;
  font-size:12px; cursor:pointer; padding:1px 6px; border-radius:5px; transition:.14s; }
.breakdown li:hover .promote{ opacity:1; }
.breakdown li .promote:hover{ background:var(--accent-wash); }
.breakdown li .promote.on-today{ color:var(--ink-faint); }
.breakdown .addchild{ display:flex; align-items:center; gap:8px; padding:4px 8px; color:var(--ink-faint);
  cursor:text; font-size:13.5px; }
.breakdown .addchild input{ border:0; outline:none; background:transparent; font-family:var(--sans);
  font-size:14.5px; color:var(--ink); flex:1; display:none; }
.breakdown .addchild.editing input{ display:block; }
.breakdown .addchild.editing .ph{ display:none; }

.ltadd{ display:flex; align-items:center; gap:8px; padding:5px 10px; margin:4px -10px 0; color:var(--ink-faint);
  cursor:text; border-radius:8px; }
.ltadd:hover{ background:var(--paper-edge); }
.ltadd .plus{ color:var(--accent); font-weight:600; width:14px; text-align:center; }
.ltadd input{ border:0; outline:none; background:transparent; font-family:var(--sans); font-size:15px;
  color:var(--ink); flex:1; display:none; }
.ltadd.editing input{ display:block; }
.ltadd.editing .ph{ display:none; }

.footnote{ max-width:1180px; margin:40px auto 0; padding-top:18px; border-top:1px solid var(--rule);
  font-size:12px; color:var(--ink-faint); line-height:1.6; }
.footnote b{ color:var(--ink-soft); font-weight:600; }

/* =========================================================
   Sign in
   ========================================================= */
.signin{ max-width:340px; margin:14vh auto 0; }
.signin h1{ font-family:var(--serif); font-weight:600; font-size:26px; margin:0 0 4px; }
.signin h1 .pf-mark{ color:var(--accent); }
.signin p{ color:var(--ink-soft); font-size:13.5px; margin:0 0 22px; }
.signin label{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 5px; }
.signin input[type=email], .signin input[type=password]{ width:100%; font-family:var(--sans); font-size:15px;
  padding:10px 12px; border:1px solid var(--rule); border-radius:9px; background:var(--panel); margin-bottom:15px; }
.signin input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.signin button{ width:100%; background:var(--ink); color:var(--paper); border:0; border-radius:9px;
  padding:11px; font-size:14.5px; font-weight:600; cursor:pointer; }
.signin button:hover{ background:#000; }
/* Google button (white, bordered) sits above the email fallback */
.signin .google-btn{ display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; background:#fff; color:var(--ink); border:1px solid var(--rule); border-radius:9px;
  padding:11px; font-size:14.5px; font-weight:600; cursor:pointer; box-shadow:var(--shadow); }
.signin .google-btn:hover{ background:#fff; border-color:var(--ink-faint); }
.google-btn__g{ width:18px; height:18px; }
.signin__divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-faint);
  font-size:12px; letter-spacing:.04em; }
.signin__divider::before, .signin__divider::after{ content:""; flex:1; height:1px; background:var(--rule); }