/* 几条线 — a scheduling instrument. Everything is teal and quiet except the
   moments that set the answer, which are the only red on the page. The chart is
   HTML boxes at percentage widths, so it reflows to any screen without a line
   of script measuring anything. */
:root {
  --bg: #0f1315;
  --panel: #171c1e;
  --sunk: #111618;
  --line: #262e31;
  --ink: #e5eaec;
  --dim: #8f9ea3;
  --faint: #5e6d72;
  --accent: #6bb8c4;
  --hot: #e0705e;
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
b { font-weight: 600; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--sunk);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--dim); }

.topbar { display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--line); background: #131a1c; }
.mark { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid;
  place-items: center; font-weight: 700; color: #131a1c;
  background: linear-gradient(140deg, #9ad8e0, var(--accent)); }
.titles { min-width: 0; }
.titles h1 { margin: 0; font-size: 17px; letter-spacing: .06em; }
.titles p { margin: 0; font-size: 11px; color: var(--faint); }

main { padding: 14px 12px 24px; max-width: 800px; margin: 0 auto; }
textarea, button, input { font: inherit; font-family: inherit; }

.panel { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.panel h2 { margin: 0 0 6px; font-size: 15px; }
.panel.quiet { background: none; }
.panel.bad { border-color: #4a332c; background: #1f1715; }
.sub { color: var(--dim); font-size: 13.5px; margin: 0 0 4px; }
.tiny { color: var(--faint); font-size: 12px; line-height: 1.6; margin: 10px 0 0; }

/* ---- the form ---- */
.egs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (max-width: 400px) { .egs { grid-template-columns: 1fr; } }
.eg { display: block; text-decoration: none; padding: 10px 12px; background: var(--sunk);
  border: 1px solid var(--line); border-radius: 11px; color: var(--ink); }
.eg b { display: block; font-size: 14px; }
.eg span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.eg.on { border-color: var(--accent); }

.lbl { display: block; font-size: 12.5px; color: var(--faint); margin-bottom: 6px; }
textarea { width: 100%; padding: 12px; background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; font-family: var(--mono);
  font-size: 13px; line-height: 1.7; resize: vertical; }
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { width: 100%; min-height: 46px; margin-top: 10px; cursor: pointer;
  border-radius: 11px; border: 1px solid var(--accent); background: var(--accent);
  color: #10181a; font-weight: 600; }
button:active { filter: brightness(1.1); }

.prob { display: grid; grid-template-columns: 4.6em 1fr; gap: 4px 8px; padding: 8px 0;
  border-top: 1px solid var(--line); }
.prob .ln { font-size: 12px; color: var(--faint); font-family: var(--mono); }
.prob code { overflow-wrap: anywhere; }
.prob i { grid-column: 2; font-style: normal; font-size: 12px; color: var(--hot); }

/* ---- the headline ---- */
.verdict { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 10px; }
.verdict .big { font-family: var(--mono); font-size: 56px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--accent); }
.verdict .unit { font-size: 15px; color: var(--dim); }
.verdict .say { grid-column: 1 / -1; margin: 10px 0 0; font-size: 13.5px; color: var(--dim); }

/* ---- the profile chart ---- */
.chart { margin-top: 10px; }
.bars { position: relative; height: 108px; background: var(--sunk);
  border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bar { position: absolute; bottom: 0; background: var(--accent); opacity: .55;
  border-top: 1px solid #8ed0da; }
.bar.pk { background: var(--hot); opacity: 1; border-top-color: #f0a08f; }
.axis { position: relative; height: 15px; margin-top: 5px; }
.axis span { position: absolute; transform: translateX(-50%); font-size: 10.5px;
  color: var(--faint); font-family: var(--mono); white-space: nowrap; }
.axis span:first-child { transform: none; }
.axis span:last-child { transform: translateX(-100%); }

/* ---- the peak windows ---- */
.pkw { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.pkw:first-of-type { border-top: none; padding-top: 2px; }
.pkw .when { font-family: var(--mono); font-size: 14px; color: var(--hot);
  font-variant-numeric: tabular-nums; }
.pkw .when i { font-style: normal; color: var(--faint); font-size: 11.5px;
  margin-left: 8px; font-family: inherit; }
.pkw ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex;
  flex-wrap: wrap; gap: 6px; }
.pkw li { font-size: 12.5px; padding: 4px 9px; background: var(--sunk);
  border: 1px solid var(--line); border-radius: 999px; color: var(--dim); }

/* ---- levers ---- */
.lever { border-top: 1px solid var(--line); padding: 10px 0; }
.lever:first-of-type { border-top: none; }
.lever b { font-size: 14px; }
.lever .at { font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  margin-left: 8px; }
.lever .do { display: block; font-size: 13px; color: var(--dim); margin-top: 3px; }
.lever.stuck .do { color: var(--faint); }

/* ---- the assignment ---- */
.lanes { margin-top: 10px; }
.lane { display: grid; grid-template-columns: 18px 1fr; gap: 5px 8px; align-items: center;
  margin-bottom: 12px; }
.lane .ln { font-family: var(--mono); font-size: 11px; color: var(--faint);
  text-align: right; }
/* The names in full, under the rail.
   In a chart that spans a working day, almost no single item is wide enough to
   hold a word — a 30-minute meeting is 6% of the row. Labels inside the blocks
   are a bonus for the wide ones, not the way the assignment is read. */
.lane .items { grid-column: 2; display: flex; flex-wrap: wrap; gap: 3px 10px;
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.lane .items .pk { color: var(--hot); }
.rail { position: relative; height: 28px; background: var(--sunk); border-radius: 7px;
  box-shadow: inset 0 0 0 1px var(--line); }
/* Blocks carry no text. On a chart spanning a working day a one-hour meeting is
   about an eighth of the row, which fits one character and an ellipsis — "需…"
   tells you less than a clean block does, and every name is spelled out in the
   line underneath anyway. */
.blk { position: absolute; top: 3px; bottom: 3px; border-radius: 4px;
  background: #3f6e76; min-width: 3px; }
.blk.pk { background: var(--hot); }
.lanes-axis { margin-left: 26px; }

.foot { text-align: center; padding: 6px 12px max(18px, env(safe-area-inset-bottom));
  color: var(--faint); font-size: 11px; }