/* Weekly Timesheet & Break Deduction Calculator — content styles.
   Prefix: --ts-  /  .ts-

   Reference point: a real 7-row timesheet grid (day / in / out / break) is
   the input itself, not a summary form — this mirrors what a paper or
   spreadsheet timesheet actually looks like, so the tool reads as "fill
   in your week" rather than "answer some questions about your week".

   THIS FILE STYLES THE CONTENT AREA ONLY. Chrome is owned by chrome.css. */

:root {
  --ts-surface: #ffffff;
  --ts-panel:   #f5f6f4;
  --ts-line:    #dee2dc;
  --ts-text:    #141810;
  --ts-muted:   #63695f;
  --ts-bad:     #b3261e;
  --ts-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}

.ts-wrap {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ── Timesheet grid ──────────────────────────────────────────────────────── */

.ts-panel {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--ts-line);
  border-radius: 2px;
  background: var(--ts-surface);
}

.ts-table {
  display: grid;
  border: 1px solid var(--ts-line);
  border-radius: 2px;
  overflow: hidden;
}

.ts-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 0.8fr;
  gap: 0.625rem;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--ts-line);
  background: var(--ts-surface);
}

.ts-row:last-child { border-bottom: none; }

.ts-row-head {
  background: var(--ts-panel);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ts-muted);
}

.ts-daylabel {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ts-text);
}

.ts-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.5rem;
  font-family: var(--ts-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ts-text);
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  border-radius: 2px;
}

.ts-row input:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: -1px;
}

@media (max-width: 34rem) {
  .ts-row { grid-template-columns: 1fr; gap: 0.375rem; }
  .ts-row-head { display: none; }
  .ts-daylabel { margin-top: 0.375rem; }
}

.ts-error {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ts-bad);
  background: rgba(179, 38, 30, 0.06);
  border: 1px solid var(--ts-bad);
  border-radius: 2px;
}

/* ── Primary action button ──────────────────────────────────────────────── */

.ts-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tf-accent-ink);
  background: var(--tf-accent);
  border: 1px solid var(--tf-accent);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.ts-btn:hover  { background: var(--tf-accent-hover);  border-color: var(--tf-accent-hover); }
.ts-btn:active { background: var(--tf-accent-active); border-color: var(--tf-accent-active); }

.ts-btn:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

/* ── Hero + metrics ──────────────────────────────────────────────────────── */

.ts-hero {
  padding: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid var(--ts-line);
  border-radius: 2px;
  background: var(--ts-surface);
}

.ts-hero-label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ts-muted);
}

.ts-hero-value {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tf-accent);
}

.ts-hero-sub {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ts-muted);
}

.ts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 30rem) {
  .ts-grid { grid-template-columns: 1fr; }
}

.ts-metric {
  padding: 1rem 0.75rem;
  border: 1px solid var(--ts-line);
  border-radius: 2px;
  background: var(--ts-panel);
  text-align: center;
}

.ts-metric-label {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  color: var(--ts-muted);
}

.ts-metric-value {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ts-text);
}

/* ── Per-day breakdown table ─────────────────────────────────────────────── */

.ts-breakdown {
  display: grid;
  border: 1px solid var(--ts-line);
  border-radius: 2px;
  overflow: hidden;
}

.ts-breakdown-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--ts-line);
  background: var(--ts-surface);
}

.ts-breakdown-row:last-child { border-bottom: none; }

.ts-breakdown-head {
  background: var(--ts-panel);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ts-muted);
}

/* ── Ad slots ───────────────────────────────────────────────────────────── */

.ts-ad {
  min-height: 280px;
  margin: 2rem auto 0;
  max-width: 44rem;
  padding-inline: 1.5rem;
}

@media (max-width: 26rem) {
  .ts-wrap,
  .ts-ad { padding-inline: 1rem; }
  .ts-panel { padding: 1.25rem; }
}

/* tf:dark-palette — generated by migrate_chrome.py */
/* Neutrals inherit the shared chrome tokens so all tools share one
   ground; brand hues are kept and lightened, never inverted. */
[data-theme="dark"] {
  --ts-surface: var(--tf-surface);
  --ts-panel: var(--tf-surface);
  --ts-line: var(--tf-rule);
  --ts-text: var(--tf-ink);
  --ts-muted: var(--tf-ink-soft);
  --ts-bad: #da8581;
}