/* =========================================================================
   Field Notes — Two-Person GTD Dispatch
   House style: vivid late-1930s / early-1940s adventure print.
   ========================================================================= */

:root{
  --night:  #11151C;
  --cream:  #F1D7A2;
  --gold:   #F2B705;
  --brick:  #A92D32;
  --blue:   #214B78;
  --smoke:  #59616B;

  --cream-soft:#F7E6C1;
  --paper:  #F6ECD2;
  --paper-deep:#ECDDb6;
  --ink-soft:#2A3140;
  --white: #FDF8EC;
  --ok:  #2E7D45;
  --danger:#A92D32;

  --display: "Anton", "Arial Narrow", "Impact", sans-serif;
  --text: "Lora", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --shadow: 5px 5px 0 rgba(17,21,28,0.92);
  --shadow-soft: 4px 4px 0 rgba(17,21,28,0.28);
  --radius: 3px;
  --border: 2px solid var(--night);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--text);
  color:var(--night);
  background:
    radial-gradient(circle at 20% 0%, rgba(242,183,5,0.10), transparent 40%),
    linear-gradient(180deg, #efe0bb 0%, var(--cream) 30%, var(--cream-soft) 100%);
  background-attachment:fixed;
  line-height:1.55;
  position:relative;
}
/* subtle paper grain */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1000; pointer-events:none;
  opacity:0.14; mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(45deg, rgba(17,21,28,0.35) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(17,21,28,0.25) 0 1px, transparent 1px 4px);
  background-size:6px 6px, 5px 5px;
}
body.no-noise::before{display:none;}

.app-shell{max-width:1180px;margin:0 auto;padding:0 clamp(14px,4vw,32px) 60px;}

h1,h2,h3{font-family:var(--text);line-height:1.15;}

/* ---------- masthead ---------- */
.masthead{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:18px 0 14px;border-bottom:3px solid var(--night);
  margin-bottom:8px;
}
.brand-mark{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--night);
}
.brand-stamp{
  font-family:var(--display);font-size:22px;letter-spacing:1px;
  background:var(--blue);color:var(--cream);padding:6px 10px;
  box-shadow:var(--shadow);transform:rotate(-2deg);
}
.brand-name{font-family:var(--display);font-size:30px;letter-spacing:1px;text-transform:uppercase;}
.brand-tag{margin:0;font-family:var(--mono);font-size:12px;color:var(--smoke);letter-spacing:.5px;}

.topnav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;}
.nav-link{
  font-family:var(--display);font-size:14px;letter-spacing:1px;text-transform:uppercase;
  text-decoration:none;color:var(--night);padding:8px 12px;border:2px solid transparent;
  transition:.15s;
}
.nav-link:hover{border-color:var(--night);}
.nav-link.is-active{background:var(--gold);border-color:var(--night);box-shadow:var(--shadow-soft);}

.mast-actions{margin-left:12px;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display);font-size:14px;letter-spacing:1px;text-transform:uppercase;
  color:var(--night);background:var(--cream);border:var(--border);cursor:pointer;
  padding:9px 16px;box-shadow:var(--shadow-soft);transition:transform .08s, box-shadow .08s;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow);}
.btn:active{transform:translate(2px,2px);box-shadow:none;}
.btn-ink{background:var(--night);color:var(--cream);}
.btn-ink:hover{background:#000;}
.btn-ghost{background:transparent;}
.btn-danger{background:var(--brick);color:var(--cream);border-color:var(--brick);}
.btn-success{background:var(--ok);color:var(--white);border-color:var(--night);}
.btn-glyph{font-size:18px;font-weight:700;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

/* ---------- next action strip ---------- */
.nextaction-strip{
  background:var(--night);color:var(--cream);
  border-bottom:3px solid var(--gold);margin:8px 0 26px;
}
.strip-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 4px;}
.strip-label{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);}
.strip-title{font-family:var(--text);font-style:italic;font-size:16px;flex:1 1 260px;min-width:200px;}
.strip-controls{display:flex;gap:8px;}

/* ---------- tab panes ---------- */
.tab-pane{display:none;}
.tab-pane.is-active{display:block;animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--brick);margin:0 0 6px;}
.disp-title{font-family:var(--display);font-size:clamp(38px,7vw,72px);letter-spacing:1px;line-height:.98;margin:0 0 10px;text-transform:uppercase;}
.sec-title{font-family:var(--display);font-size:clamp(30px,5vw,48px);letter-spacing:1px;text-transform:uppercase;margin:0;}
.lede{font-size:18px;max-width:60ch;margin:0;}
.muted{color:var(--smoke);}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px;border-bottom:3px solid var(--night);padding-bottom:12px;}
.section-head .muted{margin:12px 0 20px;}

/* ---------- daily briefing ---------- */
.brief-hero{
  display:grid;grid-template-columns:1.3fr auto;gap:24px;align-items:center;
  padding:10px 0 22px;position:relative;
}
.brief-hero::after{
  content:"";position:absolute;left:0;bottom:4px;right:40%;height:3px;background:var(--gold);
}
.brief-badge{
  display:grid;grid-template-columns:repeat(2,minmax(90px,1fr));gap:10px;
  background:var(--blue);color:var(--cream);padding:16px;box-shadow:var(--shadow);transform:rotate(1deg);
}
.stat{display:flex;flex-direction:column;align-items:flex-start;}
.stat-num{font-family:var(--display);font-size:38px;line-height:1;color:var(--gold);}
.stat-lab{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--cream);}

.brief-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px;}
.brief-block,.brief-panel,.project-card,.lane,.conn-card{
  background:var(--white);border:var(--border);box-shadow:var(--shadow-soft);
  padding:18px;position:relative;
}
.block-head{font-family:var(--display);font-size:18px;letter-spacing:1px;text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.block-tick{color:var(--gold);font-size:12px;}
.block-tick.warn{color:var(--brick);}
.empty-note{font-style:italic;color:var(--smoke);font-size:14px;margin:4px 0;}
.brief-panel{margin-top:20px;background:var(--cream-soft);}
.daily-note{
  width:100%;font-family:var(--text);font-size:15px;color:var(--night);resize:vertical;
  padding:10px;border:2px solid var(--night);background:var(--white);min-height:80px;
}
.daily-note:focus{outline:3px solid var(--gold);outline-offset:1px;}

/* ---------- task list / cards ---------- */
.tasklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.taskli{
  display:flex;gap:10px;align-items:flex-start;background:var(--paper);
  border:2px solid var(--night);padding:10px 12px;cursor:grab;
  transition:transform .08s, box-shadow .08s;
}
.taskli:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-soft);}
.taskli.dragging{opacity:.4;border-style:dashed;}
.taskli.drag-over{outline:3px solid var(--gold);outline-offset:1px;background:var(--paper-deep);}
.taskli.done .t-title{text-decoration:line-through;color:var(--smoke);}
.taskli.done{background:transparent;border-style:dashed;}
.t-grip{font-family:var(--mono);color:var(--smoke);cursor:grab;font-size:14px;line-height:1.2;}
.t-main{flex:1;min-width:0;}
.t-title{font-weight:600;font-size:15px;line-height:1.3;}
.t-meta{font-family:var(--mono);font-size:11px;color:var(--smoke);display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;letter-spacing:.3px;}
.t-badge{display:inline-block;padding:0 6px;border:1px solid var(--smoke);color:var(--smoke);font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;}
.t-badge.proj{color:var(--blue);border-color:var(--blue);}
.t-badge.owner{color:var(--brick);border-color:var(--brick);}
.t-badge.due{color:var(--night);border-color:var(--night);}
.t-badge.due.overdue{background:var(--brick);color:var(--cream);border-color:var(--brick);}
.t-actions{display:flex;flex-direction:column;gap:4px;}
.t-btn{
  border:none;background:transparent;cursor:pointer;font-family:var(--mono);font-size:15px;
  color:var(--smoke);padding:0 2px;line-height:1;
}
.t-btn:hover{color:var(--night);}
.t-btn.check:hover{color:var(--ok);}
.t-btn.del:hover{color:var(--brick);}

/* ---------- lanes ---------- */
.lane{
  min-height:120px;display:flex;flex-direction:column;gap:8px;
  background:var(--cream-soft);
}
.lane.drag-target{outline:3px dashed var(--gold);outline-offset:2px;background:var(--paper-deep);}
.lane-empty{font-style:italic;color:var(--smoke);padding:14px;text-align:center;}

/* ---------- projects ---------- */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.project-card{border-top:6px solid var(--blue);}
.project-card h3{font-family:var(--display);font-size:20px;letter-spacing:1px;text-transform:uppercase;margin:0 0 4px;}
.proj-outcome{font-style:italic;color:var(--smoke);font-size:14px;margin:0 0 12px;}
.proj-next{padding:10px;background:var(--paper);border:2px solid var(--night);margin-bottom:12px;}
.proj-next .pn-lab{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brick);display:block;margin-bottom:4px;}
.proj-next .pn-val{font-weight:600;}
.project-card .proj-actions{display:flex;gap:8px;flex-wrap:wrap;}
.proj-count{font-family:var(--mono);font-size:11px;color:var(--smoke);margin-bottom:10px;display:block;}

/* ---------- tickler ---------- */
.tickler-view{display:flex;flex-direction:column;gap:10px;}
.tick-group h3{font-family:var(--display);font-size:16px;letter-spacing:1px;text-transform:uppercase;margin:16px 0 8px;display:flex;align-items:center;gap:8px;}
.tick-group h3::after{content:"";flex:1;height:2px;background:var(--night);opacity:.3;}

/* ---------- connect ---------- */
.connect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:8px;}
.conn-title{font-family:var(--display);font-size:18px;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px;}
.stack-form{display:flex;flex-direction:column;gap:12px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field-lab{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--smoke);}
input[type=text],input[type=url],input[type=password],input[type=date],textarea,select{
  font-family:var(--text);font-size:15px;color:var(--night);border:2px solid var(--night);
  background:var(--white);padding:9px 11px;width:100%;
}
input:focus,textarea:focus,select:focus{outline:3px solid var(--gold);outline-offset:1px;}
select{font-family:var(--text);}
.grammar{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.grammar li{display:flex;gap:10px;align-items:baseline;font-size:14px;}
.grammar code{font-family:var(--mono);font-size:12px;background:var(--paper);border:1px solid var(--night);padding:1px 6px;white-space:nowrap;}
.send-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center;}
.send-row input[type=text]{flex:1 1 200px;min-width:160px;}
.filebtn{position:relative;overflow:hidden;cursor:pointer;}
.console{
  font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;
  background:var(--night);color:var(--cream);padding:12px;margin:14px 0 0;min-height:70px;
  border-left:4px solid var(--gold);max-height:160px;overflow:auto;
}
.conn-status{font-family:var(--mono);font-size:12px;color:var(--smoke);margin-top:10px;}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal[hidden]{display:none;}
.modal-back{position:absolute;inset:0;background:rgba(17,21,28,0.6);}
.modal-card{
  position:relative;background:var(--white);border:var(--border);box-shadow:var(--shadow);
  width:min(560px,94vw);padding:26px;max-height:90vh;overflow:auto;animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal-title{font-family:var(--display);font-size:26px;letter-spacing:1px;text-transform:uppercase;margin:0 0 18px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px;}

/* ---------- next action dialog ---------- */
.na-modal .modal-card{width:min(560px,94vw);border-top:8px solid var(--gold);background:var(--cream);}
.na-body{margin:6px 0 22px;min-height:70px;}
.na-note{font-size:22px;font-weight:600;line-height:1.25;margin:0 0 10px;}
.na-meta{font-family:var(--mono);font-size:13px;color:var(--smoke);}
.na-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- toasts ---------- */
.toast-region{position:fixed;bottom:18px;right:18px;z-index:3000;display:flex;flex-direction:column;gap:10px;}
.toast{
  background:var(--night);color:var(--cream);border-left:5px solid var(--gold);
  padding:12px 16px;font-size:14px;box-shadow:var(--shadow);max-width:320px;
  animation:pop .2s ease;
}
.toast.err{border-left-color:var(--brick);}
.toast.succ{border-left-color:var(--ok);}
.toast.fade{opacity:0;transition:opacity .4s;}

/* ---------- footer ---------- */
.page-foot{text-align:center;padding:30px 0 10px;border-top:3px solid var(--night);margin-top:30px;}
.page-foot p{margin:4px 0;font-size:14px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .brief-hero{grid-template-columns:1fr;}
  .brief-badge{transform:none;}
}
@media (max-width:720px){
  .topnav{order:3;width:100%;margin-left:0;}
  .mast-actions{margin-left:auto;}
  .brief-grid{grid-template-columns:1fr;}
  .disp-title{font-size:44px;}
  .strip-title{flex:1 1 100%;}
}
@media (max-width:480px){
  .brand-name{font-size:24px;}
  .brief-badge{grid-template-columns:repeat(2,1fr);}
  .masthead{gap:10px;}
  .modal-card{padding:18px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}