/*
* Operator Sheets — page-scoped styles. Reuses every token from
* site-core.css and every primitive from .mm-* in site.css. Adds only
* the small layout pieces the sheet anatomy needs (meta strip, knit
* grid, locale-hazard banner, paper-first stay-paper variant).
*
* Print rules ride on the existing @media print baked into site.css;
* this file adds sheet-specific print refinements (page-break inside
* tables, hide save panel) and nothing else.
*/
/* ─────────────────────────────────────────────────────────────────
PHASE A · DESIGNED-ARTIFACT BASELINE
Five layered visual cues that signal "Muntin sheet" without
inventing a 4th color or new typographic primitive.
───────────────────────────────────────────────────────────────── */
/* A1 · Pack-coded 2px top hairline on the active sheet card.
Five existing tokens, no new colors. Drives the only per-pack
visual identity on the page. */
[data-page="sheet"][data-sheet-pack="operations-margin"] .mm-card.mm-live { border-top: 2px solid var(--gold, #B7791F); }
[data-page="sheet"][data-sheet-pack="local-seo"] .mm-card.mm-live { border-top: 2px solid var(--teal, #2A50C8); }
[data-page="sheet"][data-sheet-pack="conversions"] .mm-card.mm-live { border-top: 2px solid var(--rust, #C42E2E); }
[data-page="sheet"][data-sheet-pack="brand-design"] .mm-card.mm-live { border-top: 2px solid var(--ink-soft, #4A4F59); }
[data-page="sheet"][data-sheet-pack="trust-reviews"] .mm-card.mm-live { border-top: 2px solid var(--ink, #16181D); }
/* A2 · Paper rule-lines under fieldset legends and section H2s
inside the active card. 1px hairline in cream-2; reads like
the rule lines on a printed form pad. */
[data-page="sheet"] .mm-card.mm-live > h2,
[data-page="sheet"] .mm-card.mm-live > .mm-card-header h2,
[data-page="sheet"] .sheet-form fieldset > legend {
position: relative;
padding-bottom: 4px;
}
[data-page="sheet"] .mm-card.mm-live > h2::after,
[data-page="sheet"] .mm-card.mm-live > .mm-card-header h2::after,
[data-page="sheet"] .sheet-form fieldset > legend::after {
content: "";
display: block;
height: 1px;
background: var(--cream-2, #EDEEF1);
margin-top: 6px;
margin-left: -6px;
margin-right: -6px;
}
/* A3 · Pack glyph in the hero eyebrow.
The glyph is rendered inline in the eyebrow span by build-sheet-pages
for live sheets; this rule positions and tints it. */
[data-page="sheet"] .mm-hero .eyebrow .sheet-pack-glyph {
display: inline-flex;
align-items: center;
width: 14px;
height: 14px;
margin-right: 8px;
vertical-align: -2px;
opacity: .78;
}
[data-page="sheet"] .mm-hero .eyebrow .sheet-pack-glyph svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ─────────────────────────────────────────────────────────────────
ORIGINAL SHEET COMPONENTS (unchanged — preserved for clarity)
───────────────────────────────────────────────────────────────── */
/* Sheet meta strip — cadence and pack chips under the H1.
Reuses .status-chip from site-core.css; this only handles spacing. */
.sheet-meta {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px auto 0;
padding: 0;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .02em;
}
/* Locale-hazard banner — surfaces the "verify with your local
authority" notice on the four flagged sheets. Quiet visually,
prints as a gray inline note. */
.sheet-hazard {
margin: 18px auto 0;
max-width: 640px;
padding: 10px 14px;
border: 1px solid var(--line-dark, #D7DAE0);
border-left: 3px solid var(--rust, #C42E2E);
border-radius: var(--r-sm, 6px);
background: var(--cream-2, #EDEEF1);
color: var(--ink-soft, #4A4F59);
font-size: 13.5px;
line-height: 1.55;
text-align: left;
}
.sheet-hazard strong { color: var(--rust, #C42E2E); font-weight: 700; }
/* Pairs-with knit — three columns of related tools, glossary terms,
and articles. Mirrors the visual rhythm of the existing
.tool-knit four-column block but trimmed to three since sheets
don't have a "Topic" column of their own. */
.sheet-knit {
margin: 36px 0 0;
}
.sheet-knit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 720px) {
.sheet-knit-grid { grid-template-columns: 1fr; gap: 14px; }
}
.sheet-knit-col {
padding: 18px;
border: 1px solid var(--line, #E3E5E9);
border-radius: var(--r-md, 12px);
background: var(--white, #FFFFFF);
}
.sheet-knit-col h3 {
font-family: var(--font-display, "Fraunces", Georgia, serif);
font-size: 15px;
font-weight: 500;
color: var(--teal, #2A50C8);
margin: 0 0 10px;
letter-spacing: .02em;
}
.sheet-knit-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.sheet-knit-col li { font-size: 14px; line-height: 1.5; }
.sheet-knit-col a {
color: var(--ink, #16181D);
text-decoration: none;
border-bottom: 1px dashed var(--teal, #2A50C8);
padding-bottom: 1px;
}
.sheet-knit-col a:hover { color: var(--teal, #2A50C8); }
.sheet-knit-col-empty {
color: var(--stone, #6B7280);
font-size: 13.5px;
font-style: italic;
}
/* Form refinements specific to operator sheets. The base .mm-form is
centered around small clusters of 3-6 inputs (margin-math style);
sheets often want a longer flat list, so we tighten gap. */
.sheet-form {
display: flex;
flex-direction: column;
gap: 12px;
margin: 12px 0 0;
}
.sheet-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--ink-soft, #4A4F59);
}
.sheet-form label > span:first-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sheet-form input[type="number"],
.sheet-form input[type="text"],
.sheet-form input[type="date"],
.sheet-form select,
.sheet-form textarea {
padding: 9px 11px;
border: 1px solid var(--line-dark, #D7DAE0);
border-radius: var(--r-sm, 6px);
font: inherit;
font-size: 15px;
background: var(--white, #FFFFFF);
color: var(--ink, #16181D);
width: 100%;
box-sizing: border-box;
font-weight: 400;
}
.sheet-form input[type="number"]:focus,
.sheet-form input[type="text"]:focus,
.sheet-form input[type="date"]:focus,
.sheet-form select:focus,
.sheet-form textarea:focus {
border-color: var(--teal, #2A50C8);
outline: 2px solid var(--teal, #2A50C8);
outline-offset: -1px;
}
.sheet-form .field-help {
font-size: 12.5px;
color: var(--stone, #6B7280);
font-weight: 400;
margin: -2px 0 0;
}
.sheet-form fieldset {
border: 1px solid var(--line, #E3E5E9);
border-radius: var(--r-md, 12px);
padding: 16px 18px;
margin: 0;
}
.sheet-form fieldset legend {
font-size: 12.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--teal, #2A50C8);
padding: 0 6px;
}
/* Repeating-row tables (recipe ingredients, par sheet rows, audit rows).
Reuses .op-table from site.css patterns; this only adjusts for inputs
inside cells. */
.sheet-row-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.sheet-row-table th,
.sheet-row-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--line, #E3E5E9);
text-align: left;
vertical-align: middle;
}
.sheet-row-table th {
background: var(--cream-2, #EDEEF1);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--stone, #6B7280);
}
.sheet-row-table .num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.sheet-row-table input,
.sheet-row-table select {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--line, #E3E5E9);
border-radius: 4px;
font: inherit;
font-size: 14px;
background: transparent;
}
.sheet-row-table input:focus,
.sheet-row-table select:focus {
border-color: var(--teal, #2A50C8);
outline: none;
background: var(--white, #FFFFFF);
}
.sheet-row-table tfoot td {
font-weight: 600;
background: var(--cream-2, #EDEEF1);
border-bottom: 0;
border-top: 2px solid var(--ink, #16181D);
}
.sheet-add-row {
margin-top: 10px;
font-size: 13px;
font-weight: 600;
color: var(--teal, #2A50C8);
background: transparent;
border: 1px dashed var(--teal, #2A50C8);
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
}
.sheet-add-row:hover { background: var(--teal-tint, #EAF0FE); }
/* Results / output strip — calculated values from the inputs.
Reuses .mm-results from site.css; this just gives sheet pages a
slightly more table-like rhythm. */
.sheet-output {
margin-top: 14px;
padding: 14px 16px;
border: 1px solid var(--line, #E3E5E9);
border-radius: var(--r-input, 8px);
background: var(--cream-2, #EDEEF1);
display: flex;
flex-direction: column;
gap: 10px;
}
.sheet-output-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: 14px;
}
.sheet-output-label {
font-weight: 600;
color: var(--ink-soft, #4A4F59);
}
.sheet-output-value {
font-family: var(--font-display, "Fraunces", Georgia, serif);
font-size: 22px;
font-weight: 500;
color: var(--ink, #16181D);
font-variant-numeric: tabular-nums;
}
.sheet-output-value[data-band="good"] { color: var(--status-good, #1F6B3A); }
.sheet-output-value[data-band="warn"] { color: var(--status-warn-deep, #8A3E16); }
.sheet-output-value[data-band="bad"] { color: var(--rust, #C42E2E); }
/* When-to-use and Common-mistakes wrappers — light tweaks on the
shared .mm-card so the bullets read clean on mobile. */
.sheet-when-to-use ul li,
.sheet-mistakes ul li {
margin: 6px 0;
}
.sheet-when-to-use {
border-left: 3px solid var(--teal, #2A50C8);
}
.sheet-mistakes {
border-left: 3px solid var(--rust, #C42E2E);
}
/* Stay-paper sheets — when the sheet's "real" form is the printout.
Same chrome on screen, but a slightly muted online experience and
"Use this on a clipboard" hint above the actions. */
[data-page="sheet"][data-sheet-paper="true"] .mm-actions [data-sheet-action="print"] {
/* primary action visually leads */
}
.sheet-paper-hint {
margin: 10px 0 -2px;
padding: 8px 12px;
background: var(--cream-2, #EDEEF1);
border-radius: var(--r-sm, 6px);
font-size: 13px;
color: var(--stone, #6B7280);
text-align: center;
}
/* ─────────────────────────────────────────────────────────────────
PRINT — sheets are a printable artifact. Hide all chrome, expand
form to use the page, render inputs as plain underlined fields. */
@media print {
.nav,
footer,
.breadcrumb,
.lang-hint,
.mobile-cta-bar,
.skip-link,
.mm-actions,
.mm-save,
.sheet-paper-hint,
.sheet-hazard,
.sheet-knit,
.sheet-when-to-use,
.sheet-mistakes {
display: none !important;
}
body { background: #fff !important; color: #000 !important; font-size: 10pt !important; }
main, section, .container, .container-wide { padding: 0 !important; max-width: 100% !important; }
.mm-hero { text-align: left !important; max-width: 100% !important; }
.mm-hero h1 { font-size: 18pt !important; margin: 4pt 0 !important; }
.mm-hero .hero-sub { font-size: 10pt !important; max-width: 100% !important; margin: 4pt 0 !important; }
.sheet-meta { font-size: 8.5pt !important; gap: 6pt !important; margin: 4pt 0 !important; }
.status-chip { background: #f5f5f5 !important; color: #333 !important; padding: 2pt 6pt !important; }
.mm-card { box-shadow: none !important; border: 0.5pt solid #555 !important; padding: 8pt !important; margin: 4pt 0 !important; background: #fff !important; }
.mm-card-eyebrow { font-size: 7.5pt !important; color: #555 !important; }
.mm-card h2 { font-size: 12pt !important; margin: 0 !important; }
.sheet-form { gap: 6pt !important; }
.sheet-form label { font-size: 8.5pt !important; gap: 2pt !important; color: #000 !important; }
.sheet-form input, .sheet-form select, .sheet-form textarea {
border: 0 !important;
border-bottom: 0.5pt solid #000 !important;
border-radius: 0 !important;
padding: 1pt 2pt !important;
background: transparent !important;
font-size: 9pt !important;
}
.sheet-row-table { font-size: 8.5pt !important; }
.sheet-row-table th, .sheet-row-table td { padding: 3pt 4pt !important; border-bottom: 0.5pt solid #999 !important; }
.sheet-row-table th { background: #f0f0f0 !important; font-size: 7.5pt !important; }
.sheet-row-table input, .sheet-row-table select {
border: 0 !important;
border-bottom: 0.25pt dotted #999 !important;
border-radius: 0 !important;
background: transparent !important;
font-size: 8.5pt !important;
padding: 1pt 2pt !important;
}
.sheet-row-table tfoot td { background: #fff !important; border-top: 1pt solid #000 !important; }
.sheet-add-row { display: none !important; }
.sheet-output { background: #f8f8f8 !important; border: 0.5pt solid #999 !important; padding: 6pt !important; }
.sheet-output-value { font-size: 13pt !important; }
fieldset { border: 0.5pt solid #999 !important; padding: 6pt !important; }
fieldset legend { font-size: 7.5pt !important; color: #000 !important; }
/* Page-break hygiene */
.mm-card { page-break-inside: avoid; break-inside: avoid; }
.sheet-row-table { page-break-inside: auto; }
.sheet-row-table tr { page-break-inside: avoid; break-inside: avoid; }
/* Footer caption: timestamp the printout for later reference */
body[data-page="sheet"]::after {
content: "Printed from muntin.digital — verify cadence and totals against your own POS / accounting system.";
display: block;
font-size: 7pt;
color: #555;
margin: 14pt 0 0;
padding: 4pt 0 0;
border-top: 0.5pt solid #999;
}
/* A4 · Print masthead refinement — top + bottom hairline rule
around the H1, small-caps pack name top-right of the hero. */
body[data-page="sheet"] .mm-hero h1 {
border-top: 0.5pt solid #555;
border-bottom: 0.5pt solid #555;
padding: 4pt 0 !important;
margin: 0 0 4pt !important;
}
body[data-page="sheet"] .mm-hero {
position: relative;
}
body[data-page="sheet"] .mm-hero .sheet-meta .status-chip:first-child {
/* Pack chip becomes the small-caps label; print it in upper-right
of the hero by absolute positioning the meta strip. */
background: transparent !important;
border: 0 !important;
color: #555 !important;
font-size: 7pt !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
padding: 0 !important;
}
}
/* ─────────────────────────────────────────────────────────────────
PHASE B · COMFORT LAYER
Progress strip · keyboard-shortcut hint · viz container · tablet
ergonomics. All non-decorative; calmer is better.
───────────────────────────────────────────────────────────────── */
/* B11 · Progress strip — thin, ink-soft, reads like a status bar
not a celebration. No percentages, no checkmarks. */
.sheet-progress {
margin: -8px 0 18px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft, #4A4F59);
font-weight: 500;
letter-spacing: 0.01em;
}
.sheet-progress[hidden] { display: none; }
.sheet-progress strong {
color: var(--ink, #16181D);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.sheet-progress .sheet-progress__next {
color: var(--teal, #2A50C8);
}
/* B13 · Keyboard-shortcut hint — single muted line, bottom of form. */
.sheet-keyboard-hint {
margin: 14px 0 0;
font-size: 11.5px;
color: var(--stone, #6B7280);
letter-spacing: 0.02em;
text-align: right;
}
.sheet-keyboard-hint kbd {
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 11px;
background: var(--cream-2, #EDEEF1);
border: 1px solid var(--line, #E3E5E9);
border-radius: 3px;
padding: 1px 4px;
}
/* B5 · Viz container (sparkline, heatmap) — host class for the
shared SVG-only viz helper. Always client-rendered, hidden in
print. */
.sheet-viz {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 6px 0;
font-size: 12px;
color: var(--ink-soft, #4A4F59);
}
.sheet-viz svg {
display: block;
}
.sheet-viz__label {
font-weight: 600;
letter-spacing: 0.02em;
}
.sheet-viz--inline {
margin: 4px 0 0;
}
.sheet-viz-empty {
font-size: 12px;
color: var(--stone, #6B7280);
font-style: italic;
}
@media print { .sheet-viz, .sheet-viz-empty { display: none !important; } }
/* B10 · Recovery affordances — undo snackbar (8s, plain text). */
.sheet-undo-bar {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 1500;
background: var(--ink, #16181D);
color: var(--cream, #F6F7F8);
padding: 10px 16px;
border-radius: 999px;
font-size: 13.5px;
display: inline-flex;
align-items: center;
gap: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
animation: sheet-undo-rise 200ms ease-out;
}
.sheet-undo-bar[hidden] { display: none; }
.sheet-undo-bar button {
background: transparent;
border: 0;
color: var(--cream, #F6F7F8);
font: inherit;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.sheet-undo-bar button:focus-visible {
outline: 2px solid var(--cream, #F6F7F8);
outline-offset: 3px;
border-radius: 4px;
}
@keyframes sheet-undo-rise {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.sheet-undo-bar { animation: none; }
}
@media print { .sheet-undo-bar { display: none !important; } }
/* B10 · Reset confirmation — replaces the destructive Reset button
in-place with a two-tap confirm row when the form has any data. */
.sheet-reset-confirm {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--ink-soft, #4A4F59);
font-weight: 500;
}
.sheet-reset-confirm[hidden] { display: none; }
.sheet-reset-confirm button {
background: var(--cream-2, #EDEEF1);
border: 1px solid var(--line, #E3E5E9);
border-radius: 6px;
padding: 8px 14px;
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
color: var(--ink, #16181D);
}
.sheet-reset-confirm button[data-confirm="yes"] {
color: var(--rust, #C42E2E);
border-color: var(--rust, #C42E2E);
}
.sheet-reset-confirm button:focus-visible {
outline: 2px solid var(--teal, #2A50C8);
outline-offset: 2px;
}
/* B10 · Per-fieldset clear — small ghost link in the legend after
the section is touched. */
.sheet-form fieldset > legend {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
}
.sheet-form fieldset > legend .sheet-clear-section {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: var(--stone, #6B7280);
background: transparent;
border: 0;
padding: 2px 0;
cursor: pointer;
font-family: inherit;
}
.sheet-form fieldset > legend .sheet-clear-section[hidden] { display: none; }
.sheet-form fieldset > legend .sheet-clear-section:hover {
color: var(--rust, #C42E2E);
}
.sheet-form fieldset > legend .sheet-clear-section:focus-visible {
outline: 2px solid var(--teal, #2A50C8);
outline-offset: 2px;
border-radius: 3px;
}
/* ─────────────────────────────────────────────────────────────────
B12 · TABLET-ON-THE-LINE ERGONOMICS
Coarse pointer + ≤900px = an operator on a tablet at 11pm. Stack
row tables, beef up tap targets, kill tints (glare). Desktop is
unaffected.
───────────────────────────────────────────────────────────────── */
@media (pointer: coarse) and (max-width: 900px) {
/* Larger tap targets on selects + buttons. */
.sheet-form select,
.sheet-form input[type="number"],
.sheet-form input[type="text"],
.sheet-form input[type="date"],
.sheet-form input[type="time"] {
min-height: 48px;
font-size: 16px; /* prevent iOS zoom on focus */
}
.sheet-row-table input,
.sheet-row-table select {
min-height: 44px;
font-size: 16px;
}
/* Sticky bottom action bar — Print/CSV/Save reachable without
scrolling past the computed totals. */
.mm-actions {
position: sticky;
bottom: 0;
background: var(--cream, #F6F7F8);
padding-top: 12px;
padding-bottom: 12px;
margin-bottom: 0;
z-index: 50;
border-top: 1px solid var(--line, #E3E5E9);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}
/* Status chips render in solid fills, not tints (glare). */
.status-chip[data-band="good"] {
background: var(--status-good, #1F6B3A) !important;
color: var(--cream, #F6F7F8) !important;
}
.status-chip[data-band="warn"] {
background: var(--status-warn-deep, #8A3E16) !important;
color: var(--cream, #F6F7F8) !important;
}
.status-chip[data-band="bad"] {
background: var(--rust, #C42E2E) !important;
color: var(--cream, #F6F7F8) !important;
}
}
/* B12 (mobile portrait) · Repeating-row tables collapse to vertical
card-rows on narrow viewports. Each | stacks with its |
label rendered as a left-side caption. */
@media (max-width: 600px) {
.sheet-row-table thead {
/* Hide the header row; labels come from data-label on cells. */
position: absolute;
left: -9999px;
}
.sheet-row-table,
.sheet-row-table tbody,
.sheet-row-table tr,
.sheet-row-table td {
display: block;
width: 100%;
}
.sheet-row-table tr {
border: 1px solid var(--line, #E3E5E9);
border-radius: 8px;
margin: 8px 0;
padding: 4px 8px;
background: var(--white, #FFFFFF);
}
.sheet-row-table td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 0;
border-bottom: 1px dashed var(--cream-2, #EDEEF1);
}
.sheet-row-table td:last-child { border-bottom: 0; }
.sheet-row-table td::before {
content: attr(data-label);
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
color: var(--ink-soft, #4A4F59);
letter-spacing: 0.02em;
}
.sheet-row-table td input,
.sheet-row-table td select {
flex: 1 1 auto;
text-align: right;
background: transparent;
}
}
/* D3 · Worked example disclosure block.
Sits right before |