/* Home: one long notepad (web/lib/ui/home.js). Headings carry the structure, lines are the items.
   Soft Focus light skin, straight on the wall: no cards, no shadows, no boxes. Scoped under .la .nb. */

.la .nb {
  --nb-lh: 1.6;
  --nb-text: 1.06rem;
  --nb-gut: 1.9rem;                                  /* the checkbox column; text lines up after it */
  --nb-rule: color-mix(in srgb, var(--bg-line) 42%, transparent);
  width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.4rem 0 6rem; min-width: 0;
}

/* ---- the title and the slim filter row ---- */
.la .nb-head { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem 1.2rem; flex-wrap: wrap; min-width: 0; }
.la .nb-title { margin: 0; font: var(--display-w) clamp(1.8rem, 2.1vw, 2.4rem)/1.1 var(--f-display); letter-spacing: var(--display-track); color: var(--display-ink); }
.la .nb-filters {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--nb-rule);
}
.la .nb-fright { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.la .nb-seg { display: flex; align-items: center; gap: .15rem; }
.la .nb-seg button {
  border: 0; background: none; cursor: pointer; padding: .35rem .55rem; min-height: 2.1rem; border-radius: 8px;
  font: 600 .9rem/1 var(--f-util); color: var(--ink-2);
}
.la .nb-seg button:hover { color: var(--ink); }
.la .nb-seg button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.la .nb-seg button:first-child { padding-left: 0; }
.la .nb-mode button:first-child { padding-left: .55rem; }
.la .nb-pick {
  max-width: 13rem; min-width: 0; min-height: 2.1rem; padding: .25rem 1.6rem .25rem .7rem; border: 1px solid var(--bg-line); border-radius: 999px;
  background: transparent; color: var(--ink-2); font: 600 .88rem/1 var(--f-util); cursor: pointer; text-overflow: ellipsis;
}
.la .nb-pick.on { color: var(--ink); border-color: var(--ink); }

/* ---- headings ---- */
.la .nb-doc { display: flex; flex-direction: column; min-width: 0; }
.la .nb-sec { min-width: 0; }
.la .nb-h2 {
  display: flex; align-items: baseline; gap: .55rem; margin: 2.3rem 0 .2rem;
  font: 800 1.6rem/1.2 var(--f-display); letter-spacing: -.025em; color: var(--display-ink);
}
.la .nb-inbox .nb-h2 { margin-top: 1.5rem; }
.la .nb-n { font: 600 .85rem/1 var(--f-util); color: var(--ink-2); letter-spacing: 0; }
.la .nb-h3 {
  display: flex; align-items: center; gap: .5rem; margin: 1.5rem 0 .1rem;
  font: 700 .78rem/1.3 var(--f-util); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.la .nb-h3.plain { padding: .2rem 0; }
.la .nb-h4 { display: flex; align-items: baseline; gap: .6rem; margin: .85rem 0 0; font: 650 1.14rem/1.35 var(--f-title); letter-spacing: -.01em; color: var(--ink); }
.la .nb-h3 + .nb-proj .nb-h4 { margin-top: .25rem; }
.la .nb-hb {
  display: inline-flex; align-items: center; gap: .5rem; padding: .2rem 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; min-width: 0; overflow-wrap: anywhere;
}
.la .nb-hb:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.la .nb-h3 .nb-hb:hover { color: var(--ink); }
.la .nb-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: hsl(var(--h, 200) 62% var(--dot-l)); }

/* ---- lines ---- */
.la .nb-lines { display: flex; flex-direction: column; min-width: 0; }
.la .nb-line {
  position: relative; display: flex; align-items: flex-start; gap: .15rem; min-width: 0;
  border-bottom: 1px solid var(--nb-rule);
}
.la .nb-text, .la .nb-add {
  flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: .3rem 0; border: 0; border-radius: 0; background: none; resize: none; overflow: hidden;
  font: 400 var(--nb-text)/var(--nb-lh) var(--f-body); color: var(--ink); field-sizing: content; min-height: calc(var(--nb-text) * var(--nb-lh) + .6rem);
  outline: none; -webkit-appearance: none; appearance: none;
}
.la .nb-text:focus, .la .nb-add:focus { background: color-mix(in srgb, var(--card) 55%, transparent); }
.la .nb-text::placeholder { color: var(--ink-3); }
.la .nb-add::placeholder { color: transparent; }
.la .nb-line:hover .nb-add::placeholder, .la .nb-add:focus::placeholder { color: var(--ink-3); }
.la .nb-writeline .nb-add::placeholder, .la .nb-write::placeholder { color: var(--ink-3); }
.la .nb-text[readonly] { cursor: default; }

/* the checkbox: a small square in a finger-sized hit area */
.la .nb-check {
  flex: none; width: var(--nb-gut); height: calc(var(--nb-text) * var(--nb-lh) + .6rem); display: grid; place-items: center start;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.la .nb-box {
  width: 1rem; height: 1rem; display: grid; place-items: center; border: 1.5px solid var(--ink-3); border-radius: 5px;
  font: 700 .72rem/1 var(--f-util); color: transparent; transition: background .12s, border-color .12s;
}
.la .nb-check:hover .nb-box { border-color: var(--good); color: var(--good); }
.la .nb-check[aria-pressed="true"] .nb-box { background: var(--good); border-color: var(--good); color: #fff; }
.la .nb-check.ghost { cursor: default; }
.la .nb-check.ghost .nb-box { border-style: dashed; border-color: transparent; }
.la .nb-line:hover .nb-check.ghost .nb-box, .la .nb-line:focus-within .nb-check.ghost .nb-box { border-color: var(--bg-line); }
.la .nb-plus, .la .nb-bullet {
  flex: none; width: var(--nb-gut); height: calc(var(--nb-text) * var(--nb-lh) + .6rem); display: grid; place-items: center start;
  font: 500 1.2rem/1 var(--f-util); color: var(--accent);
}
.la .nb-bullet::before { content: ''; width: .4rem; height: .4rem; margin-left: .3rem; border-radius: 50%; background: var(--ink-3); }

/* status / due / star after the text, and the ⋯ that opens the detail panel */
.la .nb-meta { flex: none; display: flex; align-items: center; gap: .35rem; height: calc(var(--nb-text) * var(--nb-lh) + .6rem); padding-left: .4rem; }
.la .nb-tag { font: 600 .74rem/1 var(--f-util); color: var(--ink-2); letter-spacing: .02em; white-space: nowrap; }
.la .nb-tag.late { color: var(--mark-ink); background: var(--mark); padding: .2rem .4rem; border-radius: 6px; }
.la .nb-tag.star { color: var(--accent); font-size: .9rem; }
.la .nb-tag.wait { color: var(--accent); border: 1px dashed currentColor; border-radius: 6px; padding: .12rem .32rem; }
.la .nb-tag.claude { color: var(--accent); }
.la .nb-h4 .nb-tag { font-weight: 600; }
.la .nb-line .chip.ref { font-size: .74rem; padding: .15rem .45rem; }
.la .nb-more {
  flex: none; width: 2rem; height: calc(var(--nb-text) * var(--nb-lh) + .6rem); padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 1.1rem/1 var(--f-util); color: var(--ink-2); border-radius: 8px; opacity: 0; transition: opacity .12s;
}
.la .nb-line:hover .nb-more, .la .nb-line:focus-within .nb-more, .la .nb-more:focus-visible { opacity: 1; }
.la .nb-more:hover { color: var(--ink); background: color-mix(in srgb, var(--card) 70%, transparent); }

/* quieter lines: someday / waiting, and done ones in the Done view */
.la .nb-line[data-status="someday"] .nb-text, .la .nb-line[data-status="waiting"] .nb-text { color: var(--ink-2); }
.la .nb-line[data-status="done"] .nb-text { color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-2) 55%, transparent); }

/* the Inbox: captures as lines, with File into… and × */
.la .nb-cap { flex-wrap: wrap; }
.la .nb-cap .nb-text { flex: 1 1 14rem; }
.la .nb-capact { flex: none; display: flex; align-items: center; gap: .35rem; min-height: calc(var(--nb-text) * var(--nb-lh) + .6rem); padding-left: .4rem; }
.la .nb-capact .nb-meta { height: auto; padding: 0; }
.la .nb-file {
  max-width: 10rem; min-width: 0; min-height: 1.9rem; padding: .15rem 1.4rem .15rem .6rem; border: 1px solid var(--bg-line); border-radius: 999px;
  background: transparent; color: var(--accent); font: 600 .82rem/1 var(--f-util); cursor: pointer;
}
.la .nb-del { width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--ink-2); font: 500 1.2rem/1 var(--f-util); }
.la .nb-del:hover { color: var(--bad); }
.la .nb-writeline { border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.la .nb-writeline .nb-write { font-size: 1.12rem; }

.la .nb-empty { margin: 2rem 0 0; color: var(--ink-2); }
@keyframes nb-landed { from { background: var(--mark); } to { background: transparent; } }
.la .nb-line.landed { animation: nb-landed 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) { .la .nb-line.landed { animation: none; } }

/* ---- phone: typing is the main thing ---- */
@media (pointer: coarse) {
  .la .nb { --nb-gut: 2.15rem; }
  .la .nb-more { opacity: 0; }
  .la .nb-line:focus-within .nb-more { opacity: .8; }
  .la .nb-check.ghost .nb-box { border-color: var(--bg-line); }
}
@media (max-width: 720px) {
  .la .nb { padding-top: .3rem; }
  .la .nb-head { display: none; }
  .la .nb-head:has(.ticker:not(:empty)) { display: flex; }
  .la .nb-head .nb-title { display: none; }
  .la .nb-filters { margin-top: .2rem; }
  .la .nb-fright { flex: 1 1 100%; justify-content: space-between; }
  .la .nb-pick { flex: 1 1 0; width: 0; min-width: 0; max-width: none; }
  .la .nb-h2 { margin-top: 1.8rem; font-size: 1.45rem; }
  .la .nb-inbox .nb-h2 { margin-top: .9rem; }
  .la .nb-capact { flex: 1 1 100%; justify-content: flex-end; padding: 0 0 .3rem; min-height: 0; }
}
/* the blank line at the end of a project is just white space until you reach for it */
.la .nb-blank:not(.nb-writeline) { border-bottom-color: transparent; }
.la .nb-blank:not(.nb-writeline):hover, .la .nb-blank:not(.nb-writeline):focus-within { border-bottom-color: var(--nb-rule); }