/* NWOW v2 — IIIIV. Ink on paper. Radius 0. No shadows but the key-block. */

/* ---- Tokens: light (default) --------------------------------------- */
:root {
  --paper:        #E9E5DC;
  --paper-raised: #F2EFE8;
  --paper-sunk:   #DED9CE;
  --ink:          #191813;
  --ink-2:        #46443C;
  --ink-3:        #86816F;
  --hairline:     #C6C1B4;
  --hairline-2:   #B0AB9C;
  --sig-red:      #D73713;
  --sig-red-ink:  #A8290D;
  --hover-tint:   rgba(25, 24, 19, 0.06);
  --press-tint:   rgba(25, 24, 19, 0.12);

  --font-grotesque: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'Space Mono', 'SF Mono', ui-monospace, monospace;

  --key-block: 3px 3px 0 0 var(--ink);
}

/* dark theme = token override only, nothing else changes */
[data-nw-theme="dark"] {
  --paper:        #16150F;
  --paper-raised: #1E1D16;
  --paper-sunk:   #100F0A;
  --ink:          #E9E5DC;
  --ink-2:        #BDB8A9;
  --ink-3:        #837E6D;
  --hairline:     #37352B;
  --hairline-2:   #4A4839;
  --sig-red:      #E8552D;
  --sig-red-ink:  #E8552D;
  --hover-tint:   rgba(233, 229, 220, 0.07);
  --press-tint:   rgba(233, 229, 220, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-grotesque);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; overscroll-behavior-y: none; }

::selection { background: var(--sig-red); color: var(--paper); }
input::placeholder { color: var(--ink-3); opacity: .6; }
button { font: inherit; color: inherit; }

/* ---- App root ------------------------------------------------------ */
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Header -------------------------------------------------------- */
.nw-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px 12px;
}
.nw-wordmark { font-weight: 800; font-size: 21px; letter-spacing: -.01em; line-height: 1; }
.nw-stamp {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--ink-3); text-transform: uppercase; cursor: default;
}
.nw-spacer { flex: 1; }
.nw-hbtn {
  background: none; border: none; padding: 8px 10px; cursor: pointer;
  font-family: var(--font-mono); color: var(--ink-2);
  transition: background 90ms linear, transform 60ms linear;
}
.nw-hbtn:hover { background: var(--hover-tint); }
.nw-hbtn:active { transform: translate(1px, 1px); }
.nw-wait-btn { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .08em; }
.nw-theme-btn {
  border: 1px solid var(--hairline-2); padding: 6px 10px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.nw-regmark {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em;
  color: var(--ink-2); border: 1px solid var(--hairline-2);
  padding: 3px 5px 2px; line-height: 1; text-align: center; user-select: none;
}
.nw-regmark small { display: block; font-size: 7px; letter-spacing: .22em; color: var(--ink-3); margin-top: 2px; }

/* ---- Domain filter row --------------------------------------------- */
.nw-filter {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 0 16px 10px; border-bottom: 1px solid var(--hairline-2);
}
.nw-dot-btn {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  padding: 10px 9px; min-height: 40px;
  transition: background 90ms linear;
}
.nw-dot-btn:hover { background: var(--hover-tint); }
.nw-dot-btn[data-active="true"] { outline: 1px solid var(--ink); outline-offset: -1px; }
.nw-dot { width: 8px; height: 8px; flex: none; display: block; }
.nw-dot-name {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.nw-fdivider { width: 1px; height: 16px; background: var(--hairline-2); margin: 0 6px; }
.nw-wait-dot { padding: 8px 9px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }

/* ---- Board: two-pane ----------------------------------------------- */
.nw-board {
  flex: 1;
  display: grid; grid-template-columns: 1.6fr 1fr; align-items: stretch;
}
.nw-day { min-width: 0; display: flex; flex-direction: column; padding: 0 0 14px; grid-column: 2; border-left: 1px solid var(--hairline); }
.nw-day[data-idx="0"] { grid-column: 1; grid-row: 1 / 8; min-height: 70vh; border-left: none; }

.nw-dayhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 12px 14px 7px; border-bottom: 1px solid var(--hairline);
}
.nw-daylabel {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-3);
}
.nw-day[data-idx="0"] .nw-daylabel { color: var(--ink); }
.nw-daysub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-3); }

.nw-list { display: flex; flex-direction: column; padding: 6px 6px 0; flex: 1; }

/* ---- Task line ----------------------------------------------------- */
.nw-line {
  display: flex; align-items: baseline; gap: 9px; padding: 6px 8px;
  user-select: none; -webkit-user-select: none;
  cursor: grab; touch-action: pan-y;
  transition: background 90ms linear;
}
.nw-line:hover { background: var(--hover-tint); }
.nw-mark {
  display: inline-block; width: 20px; flex: none; text-align: center;
  font-family: var(--font-mono); font-size: 15px; line-height: 1.3;
  color: var(--ink-2); cursor: pointer;
}
.nw-domdot { width: 7px; height: 7px; flex: none; align-self: center; display: block; }
.nw-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; overflow-wrap: break-word; cursor: text; }
.nw-meta {
  flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-3); white-space: nowrap;
}

.nw-line[data-done="true"] .nw-text { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.nw-line[data-done="true"] .nw-mark { color: var(--ink-3); }
.nw-line[data-wait="true"] .nw-text,
.nw-line[data-wait="true"] .nw-mark { color: var(--ink-3); }
.nw-line[data-must="true"] .nw-text { font-weight: 600; }
.nw-line[data-must="true"] .nw-mark { color: var(--sig-red); font-weight: 700; }
.nw-line[data-dim="true"] { opacity: .22; }
.nw-line[data-just="true"] .nw-mark { animation: nw-pop .32s linear; }
@keyframes nw-pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* inline inputs (capture / edit / waiting name) */
.nw-inline-input {
  background: transparent; border: none; border-bottom: 1px dashed var(--hairline-2);
  outline: none; color: var(--ink); padding: 0 0 2px;
}
.nw-capture-input { flex: 1; min-width: 0; font-family: var(--font-grotesque); font-size: 15px; }
.nw-edit-input { flex: 1; min-width: 0; font-family: var(--font-grotesque); font-size: 15px; line-height: 1.45; }
.nw-wait-input { width: 110px; flex: none; font-family: var(--font-mono); font-size: 11px; padding: 0 0 1px; }

.nw-capture-row { display: flex; align-items: baseline; gap: 9px; padding: 6px 8px; }
.nw-capture-mark { display: inline-block; width: 20px; flex: none; text-align: center; font-family: var(--font-mono); font-size: 15px; color: var(--ink-3); }

.nw-add {
  padding: 6px 8px 2px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  cursor: text; opacity: 0; transition: opacity 80ms linear;
}
.nw-day:hover .nw-add { opacity: .45; }

/* ---- Drag ---------------------------------------------------------- */
.nw-drop { height: 0; border-top: 2px solid var(--sig-red); margin: 0 6px; }
.nw-ghosting { opacity: .3; }
.nw-ghost {
  position: fixed; z-index: 999; margin: 0; pointer-events: none; box-sizing: border-box;
  display: flex; align-items: baseline; gap: 9px; padding: 6px 8px;
  background: var(--paper-raised); border: 1px solid var(--ink); box-shadow: var(--key-block);
}

/* ---- Legend footer ------------------------------------------------- */
.nw-legend {
  padding: 16px 22px 22px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
}
.nw-legend-domains { cursor: pointer; }
.nw-legend-domains:hover { color: var(--ink-2); }
.nw-sync { cursor: pointer; }
.nw-sync:hover { color: var(--ink-2); }
.nw-sync[data-state="ok"] { color: var(--ink-3); }
.nw-sync[data-state="syncing"] { color: var(--sig-red); }
.nw-sync[data-state="error"] { color: var(--sig-red); }

/* ---- Overlays (waiting review / config) ---------------------------- */
.nw-scrim {
  position: fixed; inset: 0; background: rgba(25, 24, 19, .2); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding: 72px 18px 18px;
}
.nw-panel {
  background: var(--paper-raised); border: 1px solid var(--ink); box-shadow: var(--key-block);
  width: 440px; max-width: 100%; max-height: 78vh; overflow: auto;
}
.nw-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--hairline-2);
}
.nw-panel-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
}
.nw-close { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 15px; color: var(--ink-2); padding: 2px 6px; }
.nw-wgroup-person {
  padding: 12px 16px 2px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.nw-wline { display: flex; align-items: baseline; gap: 9px; padding: 7px 16px; cursor: pointer; transition: background 90ms linear; }
.nw-wline:hover { background: var(--hover-tint); }
.nw-wline-mark { font-family: var(--font-mono); font-size: 14px; color: var(--ink-3); }
.nw-wline-text { flex: 1; font-size: 14px; line-height: 1.45; }
.nw-panel-foot {
  padding: 12px 16px 14px; border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--ink-3); text-transform: uppercase;
}
.nw-panel-empty { padding: 24px 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: center; }

/* config form */
.nw-form { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.nw-field { display: flex; flex-direction: column; gap: 4px; }
.nw-field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.nw-field input {
  background: var(--paper-sunk); border: 1px solid var(--hairline-2); border-radius: 0;
  padding: 8px 9px; font-family: var(--font-mono); font-size: 12px; color: var(--ink); outline: none;
}
.nw-field input:focus { outline: 2px solid var(--sig-red); outline-offset: -1px; }
.nw-dm-row { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.nw-dm-name { flex: 1; }
.nw-dm-keyinput {
  width: 34px; flex: none; text-align: center; text-transform: lowercase;
  font-family: var(--font-mono);
}
.nw-dm-color {
  width: 34px; height: 30px; flex: none; padding: 2px; border: 1px solid var(--hairline-2);
  background: var(--paper-sunk); border-radius: 0; cursor: pointer;
}
.nw-dm-remove {
  background: none; border: none; cursor: pointer; color: var(--ink-3);
  font-family: var(--font-mono); font-size: 15px; padding: 4px 6px; line-height: 1;
}
.nw-dm-remove:hover { color: var(--sig-red); }
.nw-dm-add { margin-top: 4px; align-self: flex-start; }

/* ---- Actions menu (right-click / long-press) ----------------------- */
.nw-menu-scrim { position: fixed; inset: 0; z-index: 70; }
.nw-menu {
  position: fixed; z-index: 71; min-width: 156px;
  background: var(--paper-raised); border: 1px solid var(--ink); box-shadow: var(--key-block);
}
.nw-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 10px 14px; font-family: var(--font-grotesque); font-size: 14px; color: var(--ink);
  transition: background 90ms linear;
}
.nw-menu-item + .nw-menu-item { border-top: 1px solid var(--hairline); }
.nw-menu-item:hover { background: var(--hover-tint); }
.nw-menu-del { color: var(--sig-red); }
.nw-settings-btn { font-size: 13px; padding: 6px 9px; }
.nw-panel-actions { padding: 10px 16px 16px; display: flex; gap: 10px; justify-content: flex-end; }
.nw-btn {
  background: none; border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
  padding: 8px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); transition: background 90ms linear, transform 60ms linear;
}
.nw-btn:hover { background: var(--hover-tint); }
.nw-btn:active { transform: translate(1px, 1px); }
.nw-btn-primary { background: var(--ink); color: var(--paper); }
.nw-btn-primary:hover { background: var(--ink-2); }

/* ---- Responsive: stack to a single journal column below 860px ------ */
@media (max-width: 860px) {
  .nw-board { display: block; max-width: 620px; margin: 0 auto; width: 100%; }
  .nw-day { border-left: none !important; min-height: 0 !important; margin-bottom: 22px; grid-column: auto !important; grid-row: auto !important; }
  .nw-day[data-idx="0"] { min-height: 0; }
}
@media (max-width: 760px) {
  .nw-header { padding: 16px 16px 10px; }
  .nw-add { opacity: .35; }
  /* hit targets ≥44px on touch */
  .nw-mark { min-height: 24px; }
  .nw-line { padding: 8px 8px; }
}

/* ---- Lock screen --------------------------------------------------- */
.nw-lock {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--paper);
}
.nw-lock-box { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.nw-lock-mark { font-size: 32px; letter-spacing: -.01em; text-align: center; }
.nw-lock-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; margin-bottom: 10px;
}
.nw-lock-input {
  background: var(--paper-sunk); border: 1px solid var(--hairline-2); border-radius: 0;
  padding: 11px 12px; font-family: var(--font-mono); font-size: 14px; color: var(--ink); outline: none;
  text-align: center; letter-spacing: .04em;
}
.nw-lock-input:focus { outline: 2px solid var(--sig-red); outline-offset: -1px; }
.nw-lock-btn { text-align: center; justify-content: center; }
.nw-lock-error {
  min-height: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sig-red); text-align: center;
}
.nw-signout { color: var(--sig-red); border-color: var(--sig-red); width: 100%; }
.nw-signout:hover { background: var(--hover-tint); }

/* iOS Safari zooms the page when you focus an input smaller than 16px.
   On touch devices, float every field to 16px so focusing never zooms —
   without locking the viewport (pinch-zoom stays available). */
@media (pointer: coarse) {
  #app input, #app textarea, #app select { font-size: 16px; }
}

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