/* D10 site sheet — everything else comes from kit/base.css.
   Only two things are genuinely new here: the date input (the kit styles
   text/number/select but has never needed a date field), and the "working"
   table that shows which days a calculation removed.
   No colour is declared. Every value below is a kit token, because a second
   palette in a second file is how a portfolio stops looking like one thing. */

/* The kit's control rule covers select and text/number inputs. A date input
   needs the identical treatment or it sits a few pixels short of the tap floor
   and renders in the browser's own font. Matched to the kit rather than
   re-invented; if a second site ever needs a date field, this moves up. */
input[type="date"] {
  font: inherit;
  font-size: 1rem;
  padding: 0.45rem 0.6rem;
  min-height: var(--tap);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  max-width: 100%;
}

/* The control row. .controls is the kit's flex row; these are the labelled
   stacks inside it. */
.dc-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dc-field > span {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* Mode buttons reuse .btn; the pressed one takes the accent. */
.dc-modes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.dc-modes .btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  /* var(--panel), not #fff — the kit's own .btn puts text on the accent with
     the panel token, and a hardcoded white here would be a second palette
     starting with one declaration. */
  color: var(--panel);
}

/* The answer. Deliberately NOT the .readout strip: a readout is a row of small
   labelled facts, and this is one large sentence a reader is meant to take
   away. It sits on the panel with an accent rule, the same shape as .note. */
.dc-answer {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin: 1rem 0 0;
}
.dc-answer .dc-big {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.dc-answer .dc-sub { color: var(--ink-soft); font-size: 0.92rem; }
.dc-answer.dc-bad { border-left-color: var(--warn); }
.dc-answer.dc-bad .dc-big { font-size: 1.05rem; font-weight: 600; color: var(--warn); }

/* THE WORKING — the reason to use this page rather than an incumbent's bare
   number. Every day the calculation removed, named and dated. */
.dc-working { margin-top: 0.9rem; }
.dc-working summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--accent);
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.dc-working table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin-top: 0.4rem; }
.dc-working th, .dc-working td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
.dc-working th { color: var(--ink-soft); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dc-working td.dc-date { font-family: var(--mono); white-space: nowrap; }

/* ---- the moon page ---- */
/* THE DISC. Drawn from the computed illuminated fraction, not picked from a
   set of eight stock images — which is what makes it agree with the number
   printed beside it on every one of the ~29.5 days rather than on eight of
   them. Unlit is the readout background and lit is the readout ink, so the
   disc is the same two colours as the instrument strip above it. */
.dc-moon { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.dc-disc { flex: 0 0 auto; }
.dc-disc .unlit { fill: var(--readout-bg); }
.dc-disc .lit { fill: var(--readout-ink); }
.dc-disc .rim { fill: none; stroke: var(--line-strong); }
.dc-moon-txt { min-width: 0; }

/* THE MONTH GRID — the whole lunation at a glance, and the reason someone
   prints this page. */
.dc-month { margin-top: 1.2rem; }
.dc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dc-grid .hd {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft); text-align: center; padding: 0.3rem 0;
}
.dc-cell {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.3rem 0.15rem; min-height: 4rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
}
.dc-cell.blank { border-color: transparent; }
.dc-cell .dnum { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); }
.dc-cell.principal { border-color: var(--accent); }
.dc-cell .plabel { font-size: 0.56rem; line-height: 1.1; color: var(--accent); text-align: center; }
.dc-cell.is-today { background: var(--accent-soft); }

/* A one-line caption under a grid or table. NOT the kit's .note, which is a
   bordered callout and far too heavy for a sentence of explanation.
   Named dc-fine because the first version of this page used `.fine`, which is
   a class from the STANDALONE build this site replaced — it does not exist in
   the house kit, so it styled nothing and looked exactly like body text that
   was meant to be small. tests/orphan-classes.js caught it. */
.dc-fine {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

/* The timesheet grid. Inputs sit inside table cells, so they need to shrink
   with the column rather than hold it open at their default width. */
.ts-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.ts-table th, .ts-table td { text-align: left; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); }
.ts-table thead th, .ts-table tfoot th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
}
.ts-table tfoot th, .ts-table tfoot td { border-bottom: none; font-weight: 700; }
.ts-in {
  font: inherit; font-size: 1rem; width: 100%; min-width: 3.5rem; min-height: var(--tap);
  padding: 0.3rem 0.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
}

/* The break column holds at most three digits, so it does not need the width
   the start/end columns do. Added because the class was already in the markup
   doing NOTHING — the second time on this site that a class got written from
   habit and styled nothing (see .dc-fine). tests/orphan-classes.js caught both. */
.ts-in.ts-brk { min-width: 2.75rem; max-width: 5rem; }