/* daybook (S01/S02). Layout, spacing, typography, card/badge shapes and the
   responsive breakpoints are the approved prototype's; the palette is the M1
   Global Constraints applied dark -- black #0b0d0b ground, white #f4f6f3 text,
   green #3ddc84 accent -- with the prototype's greys inverted around them.
   Every colour is a token here, so the whole theme is this one block. */

:root {
  color-scheme: dark;

  /* M1 constraint colours. */
  --bg: #0b0d0b;
  --ink: #f4f6f3;
  --green: #3ddc84;

  /* Surfaces lifted off the black, in order of height. */
  --paper: #131713;
  --chrome: #0f120f;
  --raised: #1b201b;

  /* The prototype's greys, inverted. */
  --muted: #9aa79d;
  --dim: #737e77;
  --line: #242a24;
  --line-strong: #333b34;

  /* Accent tints. A badge on black needs its own ground, not a wash. */
  --soft: #12271b;
  --green-text: #7fe8ab;
  --amber-bg: #2a2110;
  --amber-text: #e6bd6b;
  --orange-bg: #2d1e11;
  --orange-text: #efa268;
  --red-bg: #2c1414;
  --red-text: #f08c8c;
  --on-green: #0b0d0b;

  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased }
button, input, textarea, select { font: inherit }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent }
button, a { touch-action: manipulation }
button { cursor: pointer }
button:disabled { cursor: default; opacity: .5 }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px }
button { border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); border-radius: 8px; padding: 9px 13px; font-weight: 550 }
button:hover { background: #232a23; border-color: #465046 }
a { color: var(--green); text-underline-offset: 3px }
.primary { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 600 }
.primary:hover { background: #63e69c; border-color: #63e69c; color: var(--on-green) }
.ghost { background: transparent }
.text-button { border: 0; background: transparent; padding: 4px; color: var(--green) }
.text-button:hover { background: transparent; border-color: transparent; color: #7fe8ab }
.small { padding: 6px 10px; font-size: 12px }
.icon-button { width: 34px; height: 34px; padding: 0; font-size: 20px }
h1, h2, h3, p { margin: 0 }
h1 { font-size: 36px; font-weight: 560; letter-spacing: -1.3px; line-height: 1.2 }
h2 { font-size: 19px; font-weight: 600; letter-spacing: -.4px }
h3 { font-size: 15px; font-weight: 600 }
.eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim) }
.muted { color: var(--muted) }
.tiny { font-size: 11px }
.mono { font-family: var(--mono) }
.row { display: flex; align-items: center; gap: 10px }
.between { justify-content: space-between }
.wrap { flex-wrap: wrap }
.stack { display: grid; gap: 16px; align-content: start }

/* One badge shape, five grounds. The word is the message, so the colour only
   has to keep it legible and keep a discrepancy from reading like a note. */
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; background: var(--raised); padding: 3px 7px; font: 10px var(--mono); letter-spacing: .3px; white-space: nowrap; color: var(--muted) }
.badge.green { background: var(--soft); color: var(--green-text) }
.badge.pending { background: var(--amber-bg); color: var(--amber-text) }
.badge.simulated { background: var(--orange-bg); color: var(--orange-text) }
.badge.outline { border: 1px solid var(--line-strong); background: transparent; color: var(--muted) }
/* A discrepancy or a dead component: the one badge that must not be mistaken
   for a warning that can wait. */
.badge.warn { background: var(--red-bg); color: var(--red-text) }
.dot { height: 6px; width: 6px; border-radius: 50%; display: inline-block; background: var(--green) }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px }
/* Cards stacked straight into the page space themselves; inside a .stack,
   .grid2 or .grid3 the container's gap already does it. */
.content > .card + .card { margin-top: 18px }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px }
.card-head h2, .card-head h3 { min-width: 0 }
details.card > summary { cursor: pointer; list-style: revert; color: var(--ink) }
details.card > summary::-webkit-details-marker { display: revert }
details.card[open] > summary { margin-bottom: 12px }
.divider { border: 0; border-top: 1px solid var(--line); margin: 20px 0 }
.caption { font-size: 12px; color: var(--muted) }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start }
.empty { text-align: center; padding: 32px 20px; color: var(--dim); font-size: 13px }
.table-wrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px }
th { font-size: 10px; letter-spacing: .9px; text-transform: uppercase; color: var(--dim); font-weight: 600 }
td, th { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
td:first-child, th:first-child { padding-left: 0 }
tr:last-child td { border-bottom: 0 }
.notice { border: 1px solid #24503a; background: var(--soft); border-radius: 10px; padding: 13px 16px; color: var(--green-text); font-size: 12px; margin-bottom: 18px }
.notice.error { border-color: #5a2626; background: var(--red-bg); color: var(--red-text) }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 4px; margin-bottom: 18px; width: fit-content; max-width: 100% }
.tabs a { border: 0; background: transparent; color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 8px; font-weight: 550; font-size: 13px }
.tabs a:hover { color: var(--ink) }
.tabs a.active { background: var(--raised); color: var(--ink) }
.field { display: grid; gap: 6px; margin-bottom: 15px }
.field label { font-size: 12px; color: var(--muted); margin-bottom: 0 }
label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 12px }
label input, label select, label textarea { margin-top: 5px }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; background: #0f120f; color: var(--ink); padding: 10px 12px }
input::placeholder, textarea::placeholder { color: var(--dim) }
input:hover, select:hover, textarea:hover { border-color: #465046 }
textarea { resize: vertical; min-height: 90px; font-family: var(--mono); font-size: 12px }
.hidden { display: none !important }
.footer-note { font-size: 11px; color: var(--dim); padding: 24px 0 6px }
.source { font-family: var(--mono); font-size: 10px; color: var(--muted) }
.metric { font-size: 30px; letter-spacing: -1px }
strong { font-weight: 620 }
[hidden] { display: none !important }

/* --- shell: sidebar, top bar, content --- */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 16px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--chrome) }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 26px }
.brand-mark { height: 32px; width: 32px; border-radius: 10px; background: var(--green); color: var(--on-green); display: grid; place-items: center; font-size: 18px; font-weight: 700; flex-shrink: 0 }
.brand-name { font-size: 20px; letter-spacing: -.7px; font-weight: 650; color: var(--ink) }
.brand-name span { color: var(--green) }
.sidebar nav { display: grid; gap: 4px }
.nav-button { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; padding: 10px 12px; color: var(--muted); font-weight: 500; text-decoration: none; border-radius: 9px }
.nav-button:hover { background: var(--raised); color: var(--ink) }
.nav-button.active { background: var(--soft); color: var(--green-text); font-weight: 600 }
.nav-icon { font-size: 15px; width: 18px; text-align: center; color: inherit; opacity: .85 }
.sidebar-bottom { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line) }
.sidebar-bottom a { display: block; font-size: 12px; margin-bottom: 12px }
.main { min-width: 0 }
.topbar { min-height: 60px; border-bottom: 1px solid var(--line); padding: 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--chrome) }
.crumb { color: var(--dim) }
.crumb .sep { padding: 0 8px; opacity: .6 }
.content { max-width: 1200px; padding: 30px 36px 48px; margin: 0 auto }
.page-heading { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap }
.page-heading .eyebrow { display: block; margin-bottom: 8px }
.page-heading p { margin-top: 8px; color: var(--muted); font-size: 13px; max-width: 62ch }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 22px; align-items: start }

/* --- capture, quick actions, day states --- */
.capture-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; margin-bottom: 10px }
.capture-bar input[type="text"] { flex: 1 1 260px; border-color: transparent; background: transparent; padding-left: 4px }
.capture-bar input[type="date"] { flex: 0 0 auto; width: auto; font-size: 12px; padding: 7px 10px }
.quick-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px }
.quick-actions button { font-size: 11px; padding: 6px 12px; border-radius: 20px; font-weight: 450; background: transparent; color: var(--muted) }
.quick-actions button:hover { color: var(--ink) }
/* The four day states (RD1): one row, and the one that is on is the receipt. */
.day-states { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px }
.day-state { font-size: 11px; padding: 6px 14px; border-radius: 20px; font-weight: 450; background: transparent; color: var(--muted) }
.day-state:hover { color: var(--ink) }
.day-state.active { background: var(--soft); border-color: var(--green); color: var(--green-text); font-weight: 600 }

/* --- outcome rows: a number, the thing, and one big control --- */
.goal-row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); align-items: flex-start }
.goal-row:first-child { border-top: 0; padding-top: 0 }
.goal-row:last-child { padding-bottom: 0 }
.goal-number { color: var(--dim); font: 15px var(--mono); padding-top: 3px; width: 24px; flex-shrink: 0 }
.goal-info { flex: 1; min-width: 0 }
.goal-info p { font-size: 12px; color: var(--muted); margin-top: 4px }
.goal-title { font-size: 15px; font-weight: 570; line-height: 1.35 }
.goal-row.done .goal-title { text-decoration: line-through; color: var(--muted) }
.goal-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0 }
.check { width: 34px; height: 34px; padding: 0; flex-shrink: 0; border-radius: 10px; border: 1px solid #35513f; background: transparent; color: var(--green); font-size: 16px; line-height: 1; display: grid; place-items: center }
.check:hover { background: var(--green); border-color: var(--green); color: var(--on-green) }
.check.checked { background: var(--green); border-color: var(--green); color: var(--on-green) }
/* RD2. The outcome menu is closed by default: four ways to move work out of
   today is exactly the sort of thing that should not be the loudest part of a
   row, and none of it competes with Start now until it is asked for. */
.outcome-menu { margin-top: 8px }
.outcome-menu > summary { cursor: pointer; color: var(--dim); font-size: 11px; width: fit-content }
.outcome-menu > summary:hover { color: var(--muted) }
.outcome-menu[open] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 2px }
.outcome-menu[open] > summary { flex: 0 0 100%; margin-bottom: 4px }
.outcome-menu form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px }
.outcome-menu input { width: auto; font-size: 11px; padding: 5px 7px }
.return-panel .goal-row { align-items: center }

/* --- time rows and block rows --- */
.time-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 14px 0 }
.time-row:first-child { border-top: 0; padding-top: 0 }
.time-row:last-child { padding-bottom: 0 }
.time { font: 11px var(--mono); color: var(--muted) }
.time-row p { font-size: 12px; color: var(--muted); margin-top: 3px }
.block-row { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 9px; padding: 12px 14px; margin-bottom: 10px; background: #0f120f }
.block-row.accepted { border-color: #244a34; border-left-color: var(--green); background: #101b14 }
.block-row:last-child { margin-bottom: 0 }
.block-row p { font-size: 12px; color: var(--muted); margin: 4px 0 10px }
.block-row p:last-child { margin-bottom: 0 }
.block-row h3 { margin-top: 5px }
.block-row .time + h3 { margin-top: 4px }
.block-row form { margin-top: 10px }

/* --- the session card: the one card that is not the page's ground --- */
.active-card { background: linear-gradient(160deg, #14251b 0%, #101610 100%); border: 1px solid #26492f; color: var(--ink) }
.active-card .eyebrow { color: #8ec6a3 }
.active-card .caption { color: #b3c6ba }
.active-card h2 { font-size: 23px; margin: 12px 0 8px; line-height: 1.25 }
.active-card .badge.outline { border-color: #3c6349; color: #b8dcc4 }
.active-card .session-time { font-family: var(--mono); font-size: 42px; letter-spacing: -2px; margin: 20px 0 0 }
.active-card .session-step { border-top: 1px solid #2a4a34; padding: 15px 0 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px }
.active-card .session-step form { display: inline-flex }
.active-card button { background: #1e3527; border-color: #34543d; color: #eaf5ec }
.active-card button:hover { background: #26432f; border-color: #4b7458 }
.active-card .primary { background: var(--green); border-color: var(--green); color: var(--on-green) }
.active-card .primary:hover { background: #63e69c; border-color: #63e69c }

/* --- the recorded-today timeline and the freshness card --- */
.side-timeline { border-left: 1px solid var(--line); margin-left: 4px; padding-left: 17px }
.activity { position: relative; margin-bottom: 16px; font-size: 12px }
.activity:last-child { margin-bottom: 0 }
.activity p { margin-top: 2px }
.activity > p:first-child { color: var(--ink); font-size: 13px; margin-top: 0 }
.activity p.tiny, .activity p:not(:first-child) { color: var(--muted); font-size: 11px }
.side-timeline .activity:before { content: ''; position: absolute; left: -21px; top: 6px; width: 7px; height: 7px; background: var(--green); border-radius: 50%; border: 2px solid var(--paper) }
.freshness { display: grid; gap: 10px; font-size: 11px; color: var(--muted) }
.freshness .row { gap: 12px }
.freshness .row span:last-child { font-family: var(--mono); color: var(--ink); text-align: right; overflow-wrap: anywhere }

/* --- log, system, links --- */
.log-entry { border-bottom: 1px solid var(--line); padding: 15px 0; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; align-items: start }
.log-entry:first-child { padding-top: 0 }
.log-entry:last-child { border-bottom: 0; padding-bottom: 0 }
.log-entry p { font-size: 12px; color: var(--muted); margin: 4px 0 }
.log-entry p:first-child { color: var(--ink); font-size: 13px; margin-top: 0 }
.system-number { font: 30px var(--mono); letter-spacing: -1px; margin: 8px 0; color: var(--ink) }
.system-number.tiny { font-size: 13px; letter-spacing: 0 }
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px }
.filterbar select, .filterbar input { width: auto }
.library-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink) }
.library-item:first-child { padding-top: 0 }
.library-item:last-child { border: 0; padding-bottom: 0 }
.library-item p { font-size: 12px; color: var(--muted); margin-top: 4px }

/* --- login --- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px }
.login-card { width: 100%; max-width: 360px }

@media (max-width: 1100px) {
  .app { grid-template-columns: 190px minmax(0, 1fr) }
  .home-grid { grid-template-columns: 1fr }
  .content { padding: 26px 24px 40px }
  .topbar { padding: 0 24px }
  .grid3 { grid-template-columns: 1fr 1fr }
}

/* The sidebar becomes a top bar: brand and log out on one line, the same five
   destinations scrolling under it. Nothing is hidden behind a control that
   would need JavaScript to open. */
@media (max-width: 760px) {
  .app { display: block }
  .sidebar {
    position: sticky; top: 0; z-index: 20; height: auto; border-right: 0;
    border-bottom: 1px solid var(--line); padding: 10px 14px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px;
  }
  .brand { padding: 0; grid-column: 1; grid-row: 1 }
  .brand-mark { height: 28px; width: 28px; font-size: 16px }
  .brand-name { font-size: 17px }
  .sidebar nav { grid-column: 1 / -1; grid-row: 2; display: flex; overflow-x: auto; gap: 2px; scrollbar-width: none }
  .sidebar nav::-webkit-scrollbar { display: none }
  .nav-button { flex-shrink: 0; padding: 8px 11px; font-size: 12px }
  .nav-icon { display: none }
  .sidebar-bottom { grid-column: 2; grid-row: 1; margin-top: 0; padding: 0; border-top: 0 }
  .topbar { display: none }
  .content { padding: 22px 18px 40px }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 12px }
  .grid2, .grid3 { grid-template-columns: 1fr }
  .log-entry { grid-template-columns: 62px minmax(0, 1fr); row-gap: 6px }
  .log-entry > div:last-child { grid-column: 2 }
  .time-row { grid-template-columns: 88px minmax(0, 1fr); row-gap: 4px }
  .time-row > .badge { grid-column: 2; justify-self: start }
  .goal-row { gap: 10px }
  .goal-actions { flex-direction: column }
}

@media (max-width: 700px) {
  h1 { font-size: 29px }
  .card { padding: 17px }
  .active-card .session-time { font-size: 34px }
}