/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --bg:      #f0f2f5;
  --surface: #ffffff;
  --border:  #e1e5eb;
  --text:    #1a1d23;
  --muted:   #666d7a;
  --accent:  #4361ee;
  --high:    #e63946;
  --med:     #4361ee;

  /* Ink variants: the same hues, adjusted until they clear 4.5:1 as TEXT both
     on the surface and on their own tinted badge fill, which is the harder of
     the two. Every text-bearing tint in this file is at 10% for that reason —
     15% put several pairs just under 4.5:1. The plain tokens above stay as
     they are: they are fills and borders, where the threshold is 3:1, and
     darkening --accent would break white-on-accent (5.02:1). */
  --accent-ink: #3e5dee;
  --high-ink:   #cd1a27;
  --green-ink:  #1f7d3e;
  --warn-ink:   #b25209;
  --low-ink:    #818a99;

  /* --border is the hairline for dividers and card edges, which 1.4.11 exempts.
     --control-border is for anything whose outline is the only thing saying
     "this is a control" — a text field, a segmented toggle, an outlined button
     on --surface — where that 1.26:1 hairline fails the 3:1 requirement. */
  --control-border: #788aa5;

  --radius:  10px;
  --shadow:  0 1px 4px rgba(0,0,0,.08);
  --header-h:56px;
  --tab-h:   44px;

  /* Safe-area insets. These are 0px in a browser tab and only become non-zero
     once the app is installed to the home screen and runs standalone, where
     the page draws under the status bar and the home indicator. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg:      #0d1117;
  --surface: #161b22;
  --border:  #30363d;
  --text:    #e6edf3;
  --muted:   #8b949e;
  --shadow:  0 1px 4px rgba(0,0,0,.3);
  /* Lightened instead of darkened — same hues, same 4.5:1 target against the
     dark surface and its tints. Green already clears it unchanged. */
  --accent-ink: #6b82f2;
  --high-ink:   #eb5d68;
  --green-ink:  #2eb85c;
  --warn-ink:   #fb923c;
  --low-ink:    #9ca3af;
  --control-border: #5e6a77;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:      #f0f2f5;
    --surface: #ffffff;
    --border:  #e1e5eb;
    --text:    #1a1d23;
    /* 4.64:1 on --bg; #6b7280 was 4.31:1 there. */
    --muted:   #666d7a;
    --shadow:  0 1px 4px rgba(0,0,0,.08);
    /* Back to the darkened inks — the dark block above is the default here. */
    --accent-ink: #3e5dee;
    --high-ink:   #cd1a27;
    --green-ink:  #1f7d3e;
    --warn-ink:   #b25209;
    --low-ink:    #818a99;
    --control-border: #788aa5;
  }
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The `hidden` attribute is only `display: none` from the UA stylesheet, so any
   explicit `display` on an ID (#modal-overlay, #app-shell, #login-screen, the FABs)
   outranks it and the element stays on screen. Every show/hide in this file toggles
   `hidden`, so it needs to win. */
[hidden] { display: none !important; }

html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; }
input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  width: 100%;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; }
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .25rem; color: var(--muted); }

/* ── Focus ───────────────────────────────────────────────────────────────── */
/* A visible focus ring is the only way a keyboard user can tell where they are.
   :focus-visible shows it for keyboard and assistive tech but not for mouse
   clicks, which is why the ring can be bold without looking noisy in use. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Suppress the UA ring only where :focus-visible has already replaced it, so a
   browser without :focus-visible support still shows something. */
:focus:not(:focus-visible) { outline: none; }

/* ── Visually hidden ─────────────────────────────────────────────────────── */
/* Text for screen readers only. Not `display:none` and not `visibility:hidden`,
   either of which would remove it from the accessibility tree too. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Same, until focused — the skip link. */
.skip-link {
  position: absolute;
  left: .5rem;
  top: -4rem;
  z-index: 400;
  background: var(--accent);
  color: #fff;
  padding: .55rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: .9rem;
  font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: var(--safe-t); }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Login screen ────────────────────────────────────────────────────────── */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 1.5rem;
}
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
  text-align: center;
}
.login-box h1 { font-size: 1.75rem; margin-bottom: .25rem; }
.login-box p  { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }
.login-box input { margin-bottom: 1rem; text-align: center; font-size: 1.1rem; letter-spacing: .05em; }
.btn-primary {
  display: block;
  width: 100%;
  padding: .65rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  transition: opacity .15s;
}
.btn-primary:hover { opacity: .88; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
#login-error { color: var(--high-ink); font-size: .875rem; margin-top: .75rem; min-height: 1.2em; }

/* ── App shell ───────────────────────────────────────────────────────────── */
#app-shell { display: flex; flex-direction: column; height: 100dvh; }

/* header */
.app-header {
  height: calc(var(--header-h) + var(--safe-t));
  padding-top: var(--safe-t);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-left: calc(1rem + var(--safe-l));
  padding-right: calc(1rem + var(--safe-r));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.app-header h1 { font-size: 1.125rem; font-weight: 700; flex-shrink: 0; }
.search-wrap {
  flex: 1;
  max-width: 360px;
  position: relative;
}
.search-wrap input {
  padding-left: 2rem;
  padding-top: .375rem;
  padding-bottom: .375rem;
  font-size: .9rem;
  border-radius: 20px;
}
.search-icon {
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .9rem;
  pointer-events: none;
}
.btn-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.1rem;
  transition: background .15s;
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--border); }

/* tabs */
.tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 0 1.25rem;
  height: var(--tab-h);
  display: flex;
  align-items: center;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-ink); border-color: var(--accent); }

/* main content */
.content-area {
  flex: 1;
  overflow-y: auto;
  /* Bottom padding clears the home indicator and the two FABs stacked above
     it, so the last card in a list is never trapped under them. */
  padding: 1rem;
  padding-left: calc(1rem + var(--safe-l));
  padding-right: calc(1rem + var(--safe-r));
  padding-bottom: calc(6.5rem + var(--safe-b));
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  /* Stop the whole app rubber-banding when a list is scrolled past its end —
     in standalone mode that reads as the app coming unstuck. */
  overscroll-behavior-y: contain;
}

/* ── Item cards ──────────────────────────────────────────────────────────── */
.section-header {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .75rem 0 .375rem;
}
.item-list { display: flex; flex-direction: column; gap: .5rem; }

.item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--low-ink);
  padding: .75rem 1rem;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem .75rem;
  align-items: start;
  transition: box-shadow .15s;
  cursor: pointer;
}
.item-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.item-card[data-priority="high"] { border-left-color: var(--high); }
.item-card[data-priority="med"]  { border-left-color: var(--med); }
.item-card[data-priority="low"]  { border-left-color: var(--low-ink); }

.item-title {
  font-weight: 600;
  font-size: .95rem;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
/* The card is a div, so the title is the real control that opens it — a button
   a keyboard user can reach. Making the whole card a button is not an option:
   it already contains the four action buttons, and buttons cannot nest. */
.item-open {
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.item-title .kind-emoji { font-size: 1rem; flex-shrink: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: .1rem .5rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
  background: var(--border);
  color: var(--muted);
  flex-shrink: 0;
}
.badge.high { background: rgba(230,57,70,.1); color: var(--high-ink); }
.badge.med  { background: rgba(67,97,238,.1); color: var(--accent-ink); }
.badge.domain { background: rgba(67,97,238,.1); color: var(--accent-ink); }

.item-meta {
  font-size: .8rem;
  color: var(--muted);
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  align-items: center;
}
.meta-chip { display: flex; align-items: center; gap: .2rem; }
.recur-icon { color: var(--accent-ink); font-size: .8rem; }

.item-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: .25rem;
  align-items: flex-start;
  flex-shrink: 0;
}
.act-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  color: var(--muted);
}
.act-btn:hover { background: var(--bg); color: var(--text); }
.act-btn.done:hover  { background: rgba(46,184,92,.1); color: var(--green-ink); }
.act-btn.snz:hover   { background: rgba(251,146,60,.1); color: var(--warn-ink); }
.act-btn.note:hover  { background: rgba(67,97,238,.1); color: var(--accent-ink); }
.act-btn.edit:hover  { background: var(--bg); }

/* Bigger hit areas on touch, where there is no cursor to aim with. Scoped to
   coarse pointers so the desktop layout keeps its tighter row — four 44px
   buttons would leave a phone-width card almost no room for its title. */
@media (pointer: coarse) {
  .act-btn   { width: 36px; height: 36px; }
  .close-btn { width: 40px; height: 40px; }
  .twisty    { min-width: 36px; min-height: 36px; }
  .nav-btn   { width: 2.75rem; height: 2.75rem; }
}

/* snoozed state */
.item-card.snoozed { opacity: .6; }
.item-card.snoozed .item-title { text-decoration: line-through; }

/* done state (in history view) */
.item-card.done-card { opacity: .55; }
.item-card.done-card .item-title { text-decoration: line-through; }

/* empty state */
.empty {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1rem;
  font-size: .95rem;
}
.empty .empty-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* spinner */
.spinner {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: .9rem;
}

/* ── FAB ─────────────────────────────────────────────────────────────────── */
#fab {
  position: fixed;
  bottom: calc(1.5rem + var(--safe-b));
  right: calc(1.5rem + var(--safe-r));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(67,97,238,.4);
  z-index: 90;
  transition: transform .15s, box-shadow .15s;
  line-height: 1;
}
#fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(67,97,238,.5); }
#fab-memo {
  position: fixed;
  bottom: calc(5.5rem + var(--safe-b));
  right: calc(1.5rem + var(--safe-r));
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-ink);
  border: 2px solid var(--accent);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(67,97,238,.25);
  z-index: 90;
  transition: transform .15s, box-shadow .15s;
  line-height: 1;
}
#fab-memo:hover { transform: scale(1.08); box-shadow: 0 5px 16px rgba(67,97,238,.4); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (min-width: 640px) {
  #modal-overlay { align-items: center; padding: 1.5rem; }
}
.modal {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 1.25rem 1.5rem calc(2rem + var(--safe-b));
  overscroll-behavior: contain;
  animation: slideUp .2s ease;
}
@media (min-width: 640px) {
  .modal { border-radius: 16px; animation: fadeIn .15s ease; }
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } }
@keyframes fadeIn  { from { opacity: 0; transform: scale(.97); } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.modal-title { font-size: 1.1rem; font-weight: 700; }
.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: background .15s;
}
.close-btn:hover { background: var(--border); }

.form-row { margin-bottom: .875rem; }
.form-row.inline { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-row.three  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }

.kind-toggle {
  display: flex;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kind-toggle button {
  flex: 1;
  padding: .45rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: background .15s, color .15s;
}
.kind-toggle button:last-child { border-right: none; }
.kind-toggle button.active { background: var(--accent); color: #fff; }

.form-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
}
.btn-secondary {
  flex: 1;
  padding: .6rem 1rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  transition: background .15s;
}
.btn-secondary:hover { background: var(--bg); }
.form-actions .btn-primary { flex: 2; }

/* snooze quick options */
.snooze-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-bottom: 1rem;
}
.snz-opt {
  padding: .5rem .25rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 500;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  transition: background .15s, border-color .15s;
}
.snz-opt:hover, .snz-opt.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* detail view */
.detail-section {
  border-top: 1px solid var(--border);
  padding-top: .875rem;
  margin-top: .875rem;
}
.detail-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .4rem;
  font-size: .9rem;
}
.detail-label { color: var(--muted); min-width: 80px; flex-shrink: 0; font-size: .8rem; font-weight: 500; }
.notes-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  word-break: break-word;
}
.detail-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.detail-actions button {
  padding: .45rem .9rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid var(--control-border);
  color: var(--text);
  background: var(--surface);
  transition: background .15s, color .15s, border-color .15s;
}
.detail-actions button:hover { background: var(--bg); }
.detail-actions .done-btn  { border-color: var(--green-ink); color: var(--green-ink); }
.detail-actions .done-btn:hover  { background: rgba(46,184,92,.1); }
.detail-actions .del-btn   { border-color: var(--high);   color: var(--high-ink); }
.detail-actions .del-btn:hover   { background: rgba(230,57,70,.08); }

/* toast */
#toast-wrap {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  background: #1a1d23;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 20px;
  font-size: .875rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  animation: toastIn .2s ease;
  white-space: nowrap;
}
.toast.error { background: #cd1a27; } /* fixed, not themed: white text needs 4.5:1 */
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* week day header */
.day-header {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  padding: .75rem 0 .375rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.day-header .day-label { font-size: .75rem; color: var(--muted); font-weight: 400; }
.day-header.is-today { color: var(--accent-ink); }
.day-empty { font-size: .85rem; color: var(--muted); padding: .1rem 0 .25rem .25rem; }

/* ── Range navigation (week + calendar) ──────────────────────────────────── */
.range-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  margin-top: .75rem;
  box-shadow: var(--shadow);
}
.range-label { text-align: center; line-height: 1.3; }
.range-label strong { display: block; font-size: .95rem; }
.range-label span { font-size: .8rem; color: var(--muted); }
.nav-btn {
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  color: var(--text);
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  font-size: .8rem;
}
.nav-btn:hover { background: var(--border); }
.range-today { text-align: center; padding: .4rem 0 0; }
.range-summary {
  font-size: .8rem;
  color: var(--muted);
  padding: .5rem .25rem 0;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.link-btn {
  background: none;
  border: 0;
  color: var(--accent-ink);
  font-size: .8rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.muted-text { color: var(--muted); font-size: .85rem; }

/* ── Projects view ───────────────────────────────────────────────────────── */
.projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0 .25rem;
}
.btn-small {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  margin-bottom: .75rem;
  box-shadow: var(--shadow);
}
.project-card.dimmed { opacity: .72; }
.project-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
.project-name {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  flex: 1;
  font-size: .95rem;
}
.twisty {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: .8rem;
  padding: 0 .1rem;
}
.btn-icon.small { font-size: .85rem; padding: .15rem .3rem; background: none; border: 0; cursor: pointer; }
.project-summary { font-size: .85rem; color: var(--muted); padding: .35rem 0 0 1.1rem; }
.project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .5rem 0 .25rem 1.1rem;
}
.pchip {
  font-size: .72rem;
  padding: .12rem .45rem;
  border-radius: 20px;
  background: var(--border);
  color: var(--muted);
}
.pchip.warn { background: rgba(230,57,70,.1); color: var(--high-ink); font-weight: 600; }
.pchip.high { background: rgba(230,57,70,.1);  color: var(--high-ink); }
.pchip.done { background: rgba(46,184,92,.1); color: var(--green-ink); }
.pchip.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pstatus { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pstatus.active { color: var(--green-ink); }
.pstatus.paused { color: var(--muted); }
.badge.project { background: rgba(46,184,92,.1); color: var(--green-ink); }
.project-card .item-list { padding-top: .5rem; }

/* ── Calendar view ───────────────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin-top: .75rem;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-dow {
  background: var(--surface);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
  padding: .35rem .1rem;
}
.cal-cell {
  background: var(--surface);
  min-height: 4.75rem;
  padding: .25rem .3rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.cal-cell:hover { background: var(--bg); }
.cal-cell.outside { opacity: .4; }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
/* The day number is a button so the cell is reachable without a mouse — the
   cell itself stays a plain div because it contains the chip buttons. */
.cal-daynum {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  padding: 0;
  align-self: flex-start;
  min-width: 1.5rem;
}
.cal-cell.today .cal-daynum { color: var(--accent-ink); }
.cal-chip {
  font-size: .66rem;
  line-height: 1.25;
  padding: .1rem .25rem;
  border-radius: 4px;
  background: var(--bg);
  border-left: 2px solid var(--med);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  width: 100%;
  display: block;
}
.cal-chip.appointment { border-left-color: var(--high); }
.cal-chip.event       { border-left-color: var(--accent); }
.cal-chip.todo        { border-left-color: var(--green-ink); }
.cal-chip.errand      { border-left-color: #f59e0b; }
.cal-time { color: var(--muted); }
.cal-more {
  font-size: .64rem;
  color: var(--accent-ink);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 0 .25rem;
}
.cal-legend {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  font-size: .72rem;
  color: var(--muted);
  padding: .6rem .25rem 0;
}

/* responsive */
@media (min-width: 640px) {
  .content-area { padding: 1.25rem 1.5rem; }
  .cal-cell { min-height: 6rem; }
  .cal-chip { font-size: .7rem; }
}
@media (max-width: 420px) {
  .cal-cell { min-height: 3.75rem; }
  .cal-chip { font-size: .6rem; padding: .05rem .15rem; }
}

/* ── Utilities that used to be inline style attributes ───────────────────── */
/* Dropping 'unsafe-inline' from style-src blocks the style attribute too, not
   just <style> elements, so every one of these had to become a class. */
.id-chip        { color: var(--muted); font-size: .72rem; }
.empty-action   { margin-top: 1rem; }
.section-header.bare { border: 0; padding: 0; }
.detail-row.notes-head { margin-bottom: .5rem; }
.detail-empty   { color: var(--muted); font-size: .875rem; }
.detail-row.detail-id  { color: var(--muted); font-size: .75rem; }
.allday-cell    { display: flex; align-items: flex-end; padding-bottom: .1rem; }
.allday-label   { display: flex; gap: .4rem; cursor: pointer; white-space: nowrap; }
.cb-inline      { width: auto; }
.resize-v       { resize: vertical; }