/* Box 12 Helper -- every page's base, and the working screens.
THE SHOP FRONT (the sales page, signing in, terms) wears shopfront.css on
top of this, generated by the JTS kit and scoped to body.shopfront.
LIGHT, WITH ONE KRAFT-ENVELOPE BROWN. A W-2 season is paperwork read at a
desk and often printed: the page is white paper and warm grey, the one
colour is the brown of the envelope a W-2 comes in, and the loudest thing
on any screen is a dollar figure. Red is kept for money that is wrong --
overtime short, a flag to fix -- and for nothing else. (Never orange on
black: JT, 2026-09-28.) The layout and the pieces are Drawline's, so the
JTS tools work the same way under the hand. */
:root {
--bg: #f5f3f0; /* the page: warm, very light grey */
--surface: #ffffff; /* cards, tables */
--surface-2: #f2eee9; /* header rows, totals */
--surface-3: #e9e2d9; /* hover, the tab you are on */
--line: #e0d8ce;
--field: #cbbfb1; /* the edge of a box you type in */
--ink: #1d1712;
--dim: #64574b; /* 6.4:1 on white */
--accent: #7a4b1a; /* kraft-envelope brown, 7.6:1 on white */
--accent-soft: #f5ece2; /* the brown, as a wash behind things */
--on-accent: #ffffff;
--good: #15803d;
--warn: #a16207;
--bad: #c52a2a;
--r: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
padding: 0 22px 90px;
background: var(--bg);
color: var(--ink);
font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
.lead { font-size: 17px; max-width: 66ch; }
.tiny { font-size: 12.5px; }
.dim { color: var(--dim); }
.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 10px 18px; align-items: flex-end;
justify-content: space-between; flex-wrap: wrap; }
.row-between h2 { margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.bad-text { color: var(--bad); }
.good-text { color: var(--good); }
code { font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
/* ---- the public header (layout.html) ------------------------------------ */
.top {
max-width: 1180px;
margin: 0 auto;
padding: 16px 0 10px;
display: flex;
align-items: center;
gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; color: inherit;
text-decoration: none; width: fit-content; }
.jts-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 700; }
.say-btn {
margin-left: auto;
color: var(--dim);
text-decoration: none;
font-size: 13px;
font-weight: 600;
border: 1px solid var(--line);
border-radius: 8px;
padding: 5px 12px;
}
.sf-nav { margin-left: auto; display: flex; align-items: center; gap: 8px;
flex-wrap: wrap; justify-content: flex-end; }
.sf-nav a { color: var(--dim); text-decoration: none; font-size: 14px; }
.sf-nav .sf-tools { display: inline-flex; align-items: center; gap: 7px; }
.sf-nav .sf-tools svg { width: 16px; height: 16px; }
.cog { margin-left: 6px; text-decoration: none; font-size: 19px;
color: var(--dim); padding: 2px 6px; }
.cog:hover { color: var(--ink); }
.cog.on { color: var(--accent); }
main { max-width: 1180px; margin: 0 auto; }
.pagehead { margin: 22px 0 10px; }
.pagehead h1 { margin: 0 0 4px; }
.crumb { margin: 18px 0 0; font-size: 14px; }
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 20px 22px;
margin: 18px 0;
}
.card h2 { margin: 0 0 10px; font-size: 20px; }
.card h3 { margin: 18px 0 6px; font-size: 16px; }
h2.sub { margin: 30px 0 4px; font-size: 20px; }
details.card > summary { cursor: pointer; }
/* ---- forms ---------------------------------------------------------------- */
.fld { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px;
min-width: 0; border: 0; padding: 0; }
.fld-label { font-weight: 600; font-size: 14px; }
.fld-label i { font-style: normal; color: var(--dim); font-weight: 400; }
.fld-note { color: var(--dim); font-size: 13.5px; margin: 4px 0 14px; max-width: 62ch; }
.fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 0 16px; }
.radio-set { display: grid; gap: 8px; }
/* EVERY KIND OF BOX, including one with no type at all: `input[type=text]`
does not match by 4px -- harmless here because the button still won the
hit test, but an overlapping box stealing a click is a fault
this project has already chased once, and it is not worth
carrying for four pixels. Measured clear at 1700 and 430 wide. */
.jts-more{display:flex;justify-content:flex-end;margin:0 0 2px}
.jts-more-btn{display:inline-block;text-decoration:none;
padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
color:var(--accent,#7bc043);background:transparent;
border:1px solid var(--line,#2b323c)}
.jts-more-btn:hover{border-color:var(--accent,#7bc043);
background:rgba(127,127,127,.10)}
/* end jts-more */
/* ---- the first steps: one row per step, its button on the right ---------
JT, 2026-10-04: "make the buttons to go do the tasks more visible". Each
step is a row with a big number, what it is, and a real button. The NEXT
step's button is the solid one; a step that is done says so and keeps a
quiet button; a step that has to wait says what it waits for. */
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 16px;
align-items: center; padding: 14px 16px; border: 1px solid var(--line);
border-radius: 12px; background: var(--surface); }
.step-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
font-weight: 800; font-size: 16px; background: var(--surface-2); color: var(--dim);
border: 1px solid var(--line); }
.step-words b { display: block; font-size: 16px; margin-bottom: 2px; }
.step-words span { color: var(--dim); font-size: 14px; }
.step-do { justify-self: end; white-space: nowrap; }
.step-do .go { font-size: 16px; padding: 12px 22px; }
.step-wait { color: var(--dim); font-size: 13px; font-style: italic; }
.step.next { border: 2px solid var(--accent); background: var(--accent-soft);
padding: 13px 15px; }
.step.next .step-n { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.step.done .step-n { background: var(--good); color: #fff; border-color: var(--good); }
.step.done .step-words b { color: var(--dim); }
.step.later { opacity: .72; }
@media (max-width: 640px) {
.step { grid-template-columns: 36px minmax(0, 1fr); }
.step-do { grid-column: 1 / -1; justify-self: stretch; }
.step-do .go, .step-do .btn-quiet { display: block; text-align: center; }
}