:root {
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #1d1d1b;
  --quiet: #6b6a66;
  --faint: #9a9893;
  --rule: #e3e1dc;
  --accent: #2f5d50;
  --clear-useful: #2f7a3e;
  --probably-useful: #7a8a25;
  --probably-useless: #b07a1c;
  --clear-useless: #a3473c;
  --error: #a3312a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161615;
    --card: #1f1f1d;
    --ink: #ecebe7;
    --quiet: #a3a19b;
    --faint: #75736e;
    --rule: #32312d;
    --accent: #8cc1ad;
    --clear-useful: #7fc48b;
    --probably-useful: #c2d27a;
    --probably-useless: #e0b366;
    --clear-useless: #e38b80;
    --error: #ff8a80;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  overflow-x: clip; max-width: 100vw;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* header */
.top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--card); border-bottom: 1px solid var(--rule);
}
.brand { font-weight: 650; }
.menu { position: relative; }
.menu > summary {
  list-style: none; min-width: 44px; min-height: 44px; display: grid; place-items: center;
  color: var(--quiet); letter-spacing: 1px; cursor: pointer; border-radius: 8px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: 48px; width: min(300px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 14px;
  display: grid; gap: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.menu-panel .who { margin: 0; color: var(--quiet); font-size: 14px; overflow-wrap: anywhere; }
.menu-panel label { display: grid; gap: 4px; font-size: 14px; color: var(--quiet); }
.menu-panel select { min-height: 44px; padding: 0 8px; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; }
.link { background: none; border: 0; color: var(--accent); padding: 10px 0; text-align: left; min-height: 44px; }

main { max-width: 1280px; margin: 0 auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); }

/* sign in */
.signin { max-width: 380px; margin: 40px auto; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 20px; }
.signin h1 { font-size: 20px; margin: 0 0 16px; }
.signin label { display: block; margin-bottom: 12px; font-size: 14px; color: var(--quiet); }
.signin input { display: block; width: 100%; margin-top: 4px; min-height: 44px; padding: 0 10px; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; }
.signin button { width: 100%; min-height: 44px; background: var(--accent); color: var(--card); border: 0; border-radius: 8px; font-weight: 600; }
.error { color: var(--error); font-size: 14px; margin: 4px 0; }
.error:empty { display: none; }

/* the health line (EXECPLAN-003 step 1): shown only when something is wrong */
.health { margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--error); border-radius: 8px; background: var(--card); color: var(--error); font-size: 14px; }
.health p { margin: 2px 0; }

/* counts that are filters */
.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 4px 16px 8px; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); color: var(--quiet); font-size: 14px; white-space: nowrap;
}
.chip b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-pressed="true"] b { color: var(--bg); }
.hint { font-size: 13px; color: var(--faint); margin: 4px 0 8px; }
@media (max-width: 719px) { .hint { display: none; } }
.hint-short { font-size: 13px; color: var(--faint); margin: 4px 0 8px; }
@media (min-width: 720px) { .hint-short { display: none; } }

/* the log */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.row { border-bottom: 1px solid var(--rule); padding: 10px 0; }
.head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.head:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.lead { display: flex; align-items: baseline; gap: 6px; padding-top: 1px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; transform: translateY(1px); }
.row.clear-useful .dot { background: var(--clear-useful); }
.row.probably-useful .dot { background: var(--probably-useful); }
.row.probably-useless .dot { background: var(--probably-useless); }
.row.clear-useless .dot { background: var(--clear-useless); }
.conf { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 2.2em; }
.main { font-weight: 550; overflow-wrap: anywhere; }
.row.cheap .main { font-weight: 400; }
.facts { grid-column: 2; font-size: 13px; color: var(--quiet); display: flex; flex-wrap: wrap; min-width: 0; }
.facts > span { white-space: nowrap; }
.facts .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.facts .sep { color: var(--faint); padding: 0 4px; }
.facts .who-name { display: none; }

.details { margin: 8px 0 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; font-size: 14px; display: grid; gap: 4px; }
.details[hidden] { display: none; }
.details .k { color: var(--faint); }
.details .subject { color: var(--quiet); font-style: italic; overflow-wrap: anywhere; }

.marks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 0 auto; min-width: 0;
  width: min(250px, 100%); border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; background: transparent;
}
.mk {
  min-width: 0; min-height: 32px; padding: 0 2px; border: 0; border-left: 1px solid var(--rule);
  background: none; color: var(--faint); font-size: 11.5px; line-height: 1.1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; position: relative;
}
.mk:first-child { border-left: 0; }
.mk.clear-useful { --c: var(--clear-useful); }
.mk.probably-useful { --c: var(--probably-useful); }
.mk.probably-useless { --c: var(--probably-useless); }
.mk.clear-useless { --c: var(--clear-useless); }
.mk.machine::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: 4px; height: 2px; border-radius: 2px; background: var(--c); }
.mk.machine { color: var(--quiet); }
.mk[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-weight: 650; }
.mk:disabled { opacity: .5; }
.markcol { display: flex; gap: 6px; justify-content: flex-end; align-items: stretch; margin: 6px 0 0 auto; width: 100%; max-width: 320px; }
.markcol .marks { margin: 0; flex: 4 1 0; width: auto; min-width: 0; }
.hostile {
  display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 0; min-width: 0;
  border: 1px solid var(--rule); border-radius: 7px; overflow: hidden;
}
.mk.hx.junk { --c: var(--clear-useless); }
.mk.hx.phishing { --c: var(--error); }
.reviewed {
  list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 0;
  color: var(--accent); font-size: 12px; letter-spacing: .02em;
}
.reviewed::before, .reviewed::after { content: ""; flex: 1; height: 1px; background: var(--accent); opacity: .5; }
.reviewbtn {
  justify-self: start; margin-top: 6px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 6px;
  background: none; color: var(--quiet); font-size: 13px; cursor: pointer;
}
.reviewbtn:disabled { opacity: .5; }
.saved { font-size: 12px; color: var(--faint); margin-top: 4px; }
.saved:empty { display: none; }
.saved.bad { color: var(--error); }
.empty { color: var(--quiet); text-align: center; padding: 32px 0; }

/* wider screens: the same layout, more on each line */
@media (min-width: 720px) {
  .row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 24px; align-items: start; }
  .markcol { margin: 0; }
  .mk { min-height: 26px; }
  .details, .saved { grid-column: 1 / -1; }
  .facts .who-name { display: inline; }
}

/* the review by batches (EXECPLAN-003 step 5) */
.batchdone { list-style: none; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.batchdone .reviewbtn { margin-top: 0; }