/* style.css — Tenaris look for the emergency page and the dashboard, following the
   Tenaris Brandmark Basic Guidelines:
   - Colours: the guide's on-screen values for Tenaris Green #009900, Tenaris Blue #000099 and
     Tenaris Gray #666666 (a darker green is used where small white text needs more contrast).
     Red is kept only for 911 and amber only for dashboard warnings.
   - Signature: the official full-colour artwork (logo.svg) on white, at least 80% of the
     Multibar's height of clear space all round.
   - Type: Frutiger, the Tenaris typeface, where it's installed; otherwise Source Sans 3, a free
     typeface of the same humanist style, served with the site so every phone looks the same. */

@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url(source-sans-3-regular.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap; src: url(source-sans-3-bold.woff2) format("woff2"); }

:root {
  --charcoal: #333333;     /* dark neutral for outlines and dark buttons */
  --charcoal-dark: #2b2f33;
  --green: #009900;
  --green-dark: #007a00;   /* white text on this passes contrast checks */
  --blue: #000099;         /* Tenaris Blue */
  --gray: #666666;         /* Tenaris Gray */
  --red: #c8102e;          /* reserved for 911 and destructive actions */
  --amber: #ffa400;
  --text: #2b2f33;
  --muted: #666666;
  --line: #d3d6d3;
  --line-dark: #babbba;
  --soft: #f5f5f5;
  --font: Frutiger, "Frutiger LT Std", FrutigerRoman, "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden], .retired { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.45 var(--font); color: var(--text); background: #fff; }
.wrap { max-width: 36rem; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-top: 1.25rem; padding-bottom: 2rem; }
.dash main.wrap { max-width: 46rem; padding-bottom: 6rem; }
.dash .wrap { max-width: 46rem; }

h1 { margin: .2rem 0 0; font: 700 2rem/1.15 var(--font); letter-spacing: .01em; overflow-wrap: anywhere; }
/* The family knows who the card is for: "Emergency contact" leads, the driver's name is secondary. */
#t-for { font-size: 1.3rem; letter-spacing: .05em; color: var(--text); }
h1#driver { margin-top: .1rem; font-size: 1.15rem; font-weight: 400; color: var(--gray); }
h3 { margin: 0 0 .25rem; font: 700 1.15rem/1.3 var(--font); }
p { margin: .5rem 0; }
.eyebrow { margin: 0; font: 700 .8rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
h2.section { margin: 2rem 0 .6rem; padding-top: .6rem; font: 700 .95rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--gray); border-top: 1px solid var(--line); position: relative; }
h2.section::before { content: ""; position: absolute; top: -2px; left: 0; width: 2.5rem; height: 3px; background: var(--green); }
.small { font-size: .92rem; }
.muted { color: var(--muted); }
.status { margin-top: 2rem; color: var(--muted); }
code { font: .9em ui-monospace, Menlo, Consolas, monospace; }

/* ---- Top bar ---- */
/* White, so the full-colour signature sits on white as the brand guide prefers. The logo is 1.6rem tall,
   so its Multibar is about 1.13rem: clear space (80%) is 0.9rem above, below and to its right. */
.topbar { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding-top: .95rem; padding-bottom: .95rem; }
.brand-logo { display: block; height: 1.6rem; width: auto; flex: none; }
.owner-flag { padding: .15rem .45rem; background: var(--amber); color: var(--charcoal-dark); font: 700 .75rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .06em; }
.product { padding-left: .75rem; border-left: 1px solid var(--line); color: var(--gray); font-size: .95rem; line-height: 1.2; min-width: 0; }
@media (max-width: 400px) { .product { font-size: .85rem; } }
.topbar-btn { flex: none; margin-left: auto; padding: .4rem .8rem; border: 1px solid var(--line-dark); background: #fff; color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; }

/* ---- Buttons ---- */
.btn { display: block; width: 100%; margin-top: .75rem; padding: .85rem 1rem; border: 2px solid transparent; border-radius: 2px; font: 700 1.15rem/1.2 var(--font); letter-spacing: .02em; text-align: center; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-text { margin-top: 1.25rem; padding: 1.05rem 1rem; font-size: 1.35rem; line-height: 1.25; background: var(--green); color: #fff; }
.btn-call { background: var(--blue); color: #fff; font-size: 1.3rem; }
.btn-outline { width: auto; flex: none; margin: 0; padding: .55rem 1.1rem; border-color: var(--charcoal); color: var(--charcoal); background: #fff; font-size: 1.05rem; }
.btn-911 { width: auto; flex: none; margin: 0; padding: .65rem 1.25rem; background: #fff; color: var(--red); font-size: 1.2rem; }
.btn-dark { background: var(--charcoal); color: #fff; }
.btn-primary { background: var(--green-dark); color: #fff; }
.btn-light { background: #fff; color: var(--charcoal); border-color: var(--line-dark); font-size: 1rem; }
.btn-danger { background: #fff; color: var(--red); border-color: var(--red); font-size: 1rem; }
.btn-small { width: auto; margin: 0; padding: .4rem .75rem; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.btn-row .btn { width: auto; flex: 1 1 10rem; margin: 0; }
.link-btn { padding: 0; margin-top: .75rem; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--blue); text-decoration: underline; cursor: pointer; }

/* ---- Emergency page ---- */
.alert-911 { background: var(--red); color: #fff; }
.alert-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.alert-inner p { flex: 1; min-width: 0; margin: 0; font: 700 1.15rem/1.25 var(--font); }
.hint { margin-top: .6rem; font-size: .95rem; color: var(--muted); }
.small-link { display: inline-block; margin-top: .25rem; font-size: .95rem; color: var(--blue); }
.main-contact { padding: 1rem; background: var(--soft); border-left: 4px solid var(--green); }
.main-name { margin: 0; font: 700 1.5rem/1.2 var(--font); overflow-wrap: anywhere; }
.detail { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.rows li > div:first-child { flex: 1; min-width: 11rem; }
.rows strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.rows span { display: block; color: var(--muted); font-size: .92rem; }
.rows span.badge { display: inline-block; color: #fff; }
.rows span.badge.changes { color: var(--charcoal-dark); }
.error-text { font: 700 1.3rem/1.3 var(--font); }
.note { margin-top: 1.5rem; padding: .75rem; background: var(--soft); border-left: 4px solid var(--amber); font-size: .95rem; }

/* ---- Forms (dashboard) ---- */
label { display: block; margin-top: 1rem; font-weight: 700; font-size: .875rem; line-height: 1.35; }
.field-label { margin: 1rem 0 0; font-weight: 700; font-size: .875rem; line-height: 1.35; }
input:not([type="radio"]):not([type="checkbox"]), textarea, select {
  display: block; width: 100%; min-height: 2.5rem; margin-top: .375rem; padding: .45rem .75rem;
  font: 400 1rem/1.4 var(--font); color: var(--text); background: #fff; border: 1px solid var(--line-dark); border-radius: 2px;
}
input:not([type="radio"]):not([type="checkbox"]), select { height: 2.5rem; }
input::placeholder, textarea::placeholder { color: #8a8c8a; opacity: 1; }
input:not([type="radio"]):not([type="checkbox"]):hover, textarea:hover, select:hover { border-color: #8c8f8c; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
input[readonly]:not([type="radio"]):not([type="checkbox"]) { font: .875rem/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--soft); }
input[type="checkbox"] { accent-color: var(--green-dark); }
textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.field-row > label, .field-row > div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
@media (max-width: 359px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
label.check { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-weight: 400; font-size: .95rem; }
label.check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .3rem .65rem; border: 1px solid var(--line-dark); border-radius: 2px; font-weight: 400; font-size: .9rem; cursor: pointer; }
.chip input { margin: 0; }
.chip:has(input:checked) { border-color: var(--green-dark); background: #eef7ee; }
details.minor { margin-top: 1rem; }
details.minor > summary, .reveal > summary { width: fit-content; list-style: none; font-size: .875rem; font-weight: 400; color: var(--blue); text-decoration: underline; cursor: pointer; }
details.minor > summary::-webkit-details-marker, .reveal > summary::-webkit-details-marker { display: none; }
summary { cursor: pointer; }
.msg { margin: .75rem 0 0; font-weight: 600; font-size: .95rem; }
.msg:empty { margin: 0; }
.bad, .msg.bad { color: var(--red); }
.key { display: block; margin-top: .375rem; padding: .75rem .9rem; background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--green); font: 1.05rem/1.45 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; user-select: all; }
.steps { margin: .75rem 0 0; padding-left: 1.25rem; font-size: .95rem; }
.steps li { margin-top: .35rem; padding-left: .15rem; }

/* ---- Dashboard: layout and type ---- */
body.dash { font-size: 16px; }
.dash main.wrap { padding-top: 1.5rem; }
.dash .small { font-size: .875rem; }
.dash h1 { margin: 0 0 .35rem; font-size: 1.5rem; line-height: 1.25; letter-spacing: 0; }
.dash h2.section { margin: 2.25rem 0 .75rem; padding-top: .75rem; font-size: .8rem; letter-spacing: .08em; }
.dash h3 { font-size: .95rem; }
[data-panel] { padding-top: .25rem; }
[data-panel] > h2.section:first-child, #me-box > h2.section:first-child, #name-box > h2.section:first-child { margin-top: 1.5rem; }
[data-panel] > input:not([type="checkbox"]), [data-panel] > select, #name-box > input, #print-body > select, #print-body > input { max-width: 30rem; }
.copy-row { display: flex; align-items: center; gap: .5rem; max-width: 40rem; }
.copy-row input { flex: 1; min-width: 0; margin-top: 0; }
.dash .copy-row .btn { flex: none; margin: 0; }
.lead { margin: 1.25rem 0 .75rem; }
.dash h2.section + .btn, .dash h2.section + .btn-row, .dash h2.section + .status-text { margin-top: 0; }
.dash .status-text + .btn, .dash .status-text + .btn-row { margin-top: .75rem; }

/* ---- Dashboard: buttons (one primary per area; secondary in outline) ---- */
.dash .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 2.5rem; margin-top: 1rem; padding: .45rem 1.1rem; border-width: 1px; font-size: 1rem; line-height: 1.2; letter-spacing: .01em; }
.dash .btn-primary { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.dash .btn-primary:hover:not(:disabled) { background: #006600; border-color: #006600; }
.dash .btn-light { background: #fff; border-color: #8c8f8c; color: var(--charcoal); }
.dash .btn-light:hover:not(:disabled) { background: var(--soft); border-color: var(--charcoal); }
.dash .btn-danger { background: #fff; border-color: var(--red); color: var(--red); }
.dash .btn-danger:hover:not(:disabled) { background: #fdf3f5; }
.dash .btn-small { min-height: 2rem; margin: 0; padding: .3rem .75rem; font-size: .875rem; }
.dash .btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.dash .btn-row .btn { flex: none; margin: 0; }
.dash .btn:focus-visible, .dash .link-btn:focus-visible, .dash summary:focus-visible, .tabs button:focus-visible, .topbar-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dash .link-btn { font-size: .875rem; }
.topbar-btn:hover { background: var(--soft); }

/* ---- Dashboard: sign-in and setup cards ---- */
.panel { margin-top: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-top: 3px solid var(--charcoal); background: #fff; }
.panel.narrow { max-width: 26rem; margin: 2.5rem auto 0; padding: 1.75rem 1.75rem 1.5rem; }
@media (max-width: 480px) { .panel.narrow { margin-top: .5rem; padding: 1.5rem 1.25rem 1.25rem; } }
.panel .btn-primary { display: flex; width: 100%; min-height: 2.75rem; margin-top: 1.5rem; }
.panel .key + .btn-row { margin-top: .5rem; }
.panel .warn { margin: .75rem 0 0; }
#setup-step { margin-bottom: .5rem; }
#setup-cancel { display: block; margin: 1.25rem auto 0; }
.signin-links { margin: 1rem 0 0; font-size: .875rem; text-align: center; }
.signin-links a { color: var(--blue); }
.reveal { margin-top: 1rem; }
.reveal > summary { margin: 0 auto; }
.reveal-body { margin-top: 1rem; padding-top: .25rem; border-top: 1px solid var(--line); }
.reveal-body h3 { margin: 1.75rem 0 0; }
.reveal-foot { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---- Dashboard: status, tabs, lists ---- */
.status-panel { padding: 1rem 1.25rem; border: 1px solid var(--line); border-top: 3px solid var(--charcoal); }
.status-line { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.badge { display: inline-block; padding: .2rem .55rem; font: 700 .75rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--muted); }
.badge.live { background: var(--green-dark); }
.badge.changes { background: var(--amber); color: var(--charcoal-dark); }
.badge.updating { background: var(--blue); }
.badge.problem { background: var(--red); }
.badge.small { display: inline-block; margin-top: .35rem; font-size: .7rem; }
/* The change list box (div), not the amber "changes" badge (span), which shares the class name. */
div.changes { margin-top: 1rem; padding: .75rem 1rem; background: #fff8eb; border-left: 3px solid var(--amber); }
div.changes ul { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
div.changes .btn-row { margin-top: .75rem; }
.now { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.now-main { margin: .25rem 0 0; font-weight: 700; }
#now-also:empty { display: none; }
#facts { margin-bottom: 0; }
.tabs { position: relative; display: flex; gap: 0; margin: 1.5rem 0 0; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: .75rem .7rem; border: 0; border-bottom: 3px solid transparent; background: none; font: 700 .8rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); cursor: pointer; }
.tabs button:hover { color: var(--charcoal); }
.tabs button.active { color: var(--charcoal); border-bottom-color: var(--green); }
.dash .rows { margin-top: .5rem; border-top: 1px solid var(--line); }
.dash .rows li { gap: .5rem 1rem; padding: .85rem 0; }
.dash .rows strong { font-size: 1rem; }
.dash .rows span { font-size: .875rem; }
.dash .rows span.badge { font-size: .7rem; }
.rows .actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.card-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; margin: 1rem 0 .25rem; }
.card-previews figure { margin: 0; }
.card-preview canvas { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .28)); }
.key-previews .card-preview canvas { width: 48%; } /* to scale with the card (dashboard.js sets the exact share) */
.key-previews { margin-top: .4rem; }
input.initials { width: 6rem; text-transform: uppercase; }
figcaption { margin-top: .4rem; font-size: .85rem; color: var(--muted); }
.preview { margin: .75rem 0 0; padding-left: 1.25rem; font-size: .95rem; }
.preview li { margin-top: .25rem; }
.history { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.history > li { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.history ul { margin: .35rem 0 0; padding-left: 1.1rem; list-style: disc; font-size: .95rem; }
.help p { max-width: 40rem; }
.tasks { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); font-size: .95rem; }
.tasks dt, .tasks dd { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.tasks dt { padding-right: 1rem; font-weight: 700; }
@media (max-width: 600px) {
  .tasks { display: block; }
  .tasks dt { padding-bottom: 0; border-bottom: 0; }
  .tasks dd { padding-top: .1rem; }
}
.links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.links a, .owner-foot a { color: var(--blue); }
.owner-foot { margin-top: 2.5rem; font-size: .875rem; }
.status-text { margin: 0; }
.publish-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--charcoal); color: #fff; border-top: 3px solid var(--amber); }
.publish-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.dash .publish-bar .btn { width: auto; margin: 0; padding: .45rem 1.5rem; }

/* ---- Dashboard: person and shift boxes ---- */
fieldset { min-width: 0; margin: 1rem 0 0; padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--line); border-radius: 2px; }
fieldset .eyebrow { margin-top: 1.1rem; }
legend { padding: 0 .35rem; font: 700 .8rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .08em; }
fieldset.box { position: relative; }
.box > legend { float: left; width: 100%; margin: 0; padding: 0 7.5rem .1rem 0; color: var(--gray); overflow-wrap: anywhere; }
.box > legend + * { clear: both; }
.dash .box-remove { position: absolute; top: 1rem; right: 1.25rem; margin: 0; color: var(--gray); }
.dash .box-remove:hover { color: var(--red); }
#people-list + .btn, #shift-list + .btn { margin-top: 1rem; }

/* ---- Emergency page extras ---- */
.btn-whatsapp { background: #fff; color: var(--charcoal); border-color: var(--charcoal); font-size: 1.1rem; }
.yard-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .25rem 0 .75rem; border-bottom: 1px solid var(--line); }
.yard-row p { flex: 1; min-width: 11rem; margin: 0; overflow-wrap: anywhere; }
.keep { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.keep .link-btn { margin-top: 0; }

/* ---- Dashboard extras ---- */
.warn { padding: .6rem .85rem; background: #fff8eb; border-left: 3px solid var(--amber); }
.checked { margin: .75rem 0 0; font-size: .875rem; color: var(--muted); }
.checked.due { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .5rem .75rem; background: #fff8eb; border-left: 3px solid var(--amber); color: var(--text); }
.checked .btn { margin: 0; }
.gaps { margin-top: .75rem; }
.gaps ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.ok { color: var(--green-dark); }
.warn .link-btn { margin-top: 0; }

/* ---- Dashboard: personal sign-ins ---- */
#me-text { margin: .25rem 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---- Dashboard: computer layout ----
   The dashboard is mostly used on a computer. From 820px wide: sections listed on the left, the open section
   in the middle. From 1400px: status and Publish stay in view on the right, so the bottom bar goes.
   Narrower windows (a phone) keep the single column above. Everything here is dashboard-only (.dash). */
.dash .key { word-break: normal; overflow-wrap: anywhere; } /* long passwords wrap at a hyphen */
.dash .vh, .dash .lbl.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dash .page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; margin: 1.25rem 0 .75rem; }
.dash .page-head h1 { display: none; margin: 0; font-size: 1.6rem; line-height: 1.2; }
.dash .page-head .lead { margin: 0; }
.dash .page-head + h2.section, .dash .page-head + .gaps + h2.section { margin-top: 1.25rem; }
.dash .list-head { display: none; }
.dash .rows:empty { display: none; }
.dash .icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: 2px; background: none; font: 400 1.2rem/1 var(--font); color: var(--gray); cursor: pointer; }
.dash .icon-btn:hover:not(:disabled) { border-color: var(--line-dark); color: var(--charcoal); background: var(--soft); }
.dash .icon-btn.row-remove:hover { color: var(--red); border-color: var(--red); background: #fdf3f5; }
.dash .icon-btn:disabled { opacity: .3; cursor: default; }
.dash .icon-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.dash .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 2rem; }
.dash .pair > div { min-width: 0; }
.dash .pair textarea { min-height: 5.5rem; }
.dash .pair > div > label:first-child { margin-top: 0; }
.dash .pair label.check { margin-top: .25rem; }

/* People: one row per person */
.dash .person-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; padding: .5rem 0 1rem; border-bottom: 1px solid var(--line); }
.dash .person-row > label { min-width: 0; margin-top: .6rem; }
.dash .person-row .check-cell { grid-column: 1 / -1; margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.dash .person-row .check-cell:empty { display: none; }
.dash .check-cell.due { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .35rem .6rem; background: #fff8eb; border-left: 3px solid var(--amber); color: var(--text); }
.dash .check-cell .btn { margin: 0; }
.dash .person-row .row-remove { position: absolute; top: .4rem; right: 0; }
.dash #people-list:not(:empty) { border-top: 1px solid var(--line); }

/* Shifts: who works each shift, then the shift boxes */
.dash .table-scroll { overflow-x: auto; border: 1px solid var(--line); }
.dash .matrix { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dash .matrix th, .dash .matrix td { padding: 0; border-bottom: 1px solid var(--line); text-align: center; }
.dash .matrix tbody tr:last-child > * { border-bottom: 0; }
.dash .matrix thead th { min-width: 7.5rem; padding: .6rem .75rem; background: var(--soft); border-bottom: 1px solid var(--line-dark); font-weight: 700; vertical-align: bottom; line-height: 1.3; }
.dash .matrix th span { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.dash .matrix th.corner, .dash .matrix tbody th { text-align: left; }
.dash .matrix th.corner { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); }
.dash .matrix tbody th { padding: .5rem .75rem; font-weight: 600; white-space: nowrap; background: #fff; }
.dash .matrix th.corner, .dash .matrix tbody th { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
.dash .matrix td { border-left: 1px solid var(--line); }
.dash .matrix td:nth-child(2) { border-left: 0; }
.dash .matrix td label { display: flex; align-items: center; justify-content: center; min-height: 2.9rem; margin: 0; cursor: pointer; }
.dash .matrix td input { width: 1.2rem; height: 1.2rem; margin: 0; cursor: pointer; }
.dash .matrix td.on { background: #eef7ee; }
.dash .matrix tbody tr:hover > th, .dash .matrix tbody tr:hover > td:not(.on) { background: #fafafa; }
.dash .matrix td.empty { padding: .75rem; text-align: left; }
.dash .shift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.dash .shift-grid > fieldset { margin: 0; }
.dash .box-tools { position: absolute; top: .55rem; right: .75rem; display: flex; gap: .15rem; }
.dash .box-tools + * { clear: both; }
.dash .shift-grid + .btn { margin-top: 1rem; }
.dash .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: .4rem; border: 1px solid var(--line-dark); border-radius: 2px; overflow: hidden; }
.dash .day { position: relative; margin: 0; border-left: 1px solid var(--line-dark); font-weight: 600; font-size: .85rem; text-align: center; cursor: pointer; user-select: none; }
.dash .day:first-child { border-left: 0; }
.dash .day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dash .day span { display: block; padding: .45rem 0; background: #fff; color: var(--gray); }
.dash .day:hover span { background: var(--soft); }
.dash .day input:checked + span { background: var(--green-dark); color: #fff; }
.dash .day input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Time off: one row per entry; the shift table marks who's away and who's covering today */
.dash .away-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; padding: .5rem 0 1rem; border-bottom: 1px solid var(--line); }
.dash .away-row > label { min-width: 0; margin-top: .6rem; }
.dash .away-row .away-status { grid-column: 1 / -1; margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.dash .away-row .away-status:empty { display: none; }
.dash .away-row .away-status .badge { margin: 0; }
.dash .away-row .row-remove { position: absolute; top: .4rem; right: 0; }
.dash #away-list:not(:empty) { border-top: 1px solid var(--line); }
.dash #away-list + p { margin: .5rem 0 0; }
.dash .matrix th em.tag { display: table; margin-top: .3rem; padding: .05rem .45rem; background: var(--soft); font: 600 .75rem/1.4 var(--font); color: var(--text); white-space: nowrap; }
.dash .matrix th em.tag-away { background: #fff8eb; border-left: 3px solid var(--amber); }
.dash .matrix tr.is-away td.on { background: #f1f1f1; }

/* Cards: add form on one line, then the list */
.dash .inline-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; align-items: end; }
.dash .inline-form > div, .dash .inline-form > label { min-width: 0; }
.dash .inline-form .btn { justify-self: start; }
.dash .list-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin-top: 2.25rem; border-top: 1px solid var(--line); position: relative; }
.dash .list-bar::before { content: ""; position: absolute; top: -2px; left: 0; width: 2.5rem; height: 3px; background: var(--green); }
.dash .list-bar h2.section { flex: 1; margin: 0; border-top: 0; }
.dash .list-bar h2.section::before { display: none; }
.dash .list-bar input { flex: 0 1 16rem; margin-top: .6rem; }
.dash .card-rows .c-driver { flex: 1 1 100%; min-width: 0; }
.dash .card-rows .c-note span, .dash .card-rows .c-status .badge { margin: 0; }
.dash .card-rows li.renaming input { margin: 0; }
.dash .card-rows li.renaming { gap: .5rem; }

/* History */
.dash .history .h-who { margin: .15rem 0 0; font-weight: 600; font-size: .9rem; }
.dash .history .h-who:empty { display: none; }

/* Owner: a box per job */
.dash .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0 1.5rem; }
.dash .tile { min-width: 0; }
.dash .tile .rows { margin-top: .25rem; }

@media (min-width: 640px) {
  .dash .inline-form.add-card-form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
  .dash .inline-form.add-account-form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; }
  .dash .inline-form .btn { margin-top: 0; }
}

@media (min-width: 820px) {
  .dash .wrap { max-width: 92rem; padding-left: 2rem; padding-right: 2rem; }
  .dash main.wrap { max-width: 92rem; padding-top: 1.75rem; padding-bottom: 6rem; }
  .dash #dash { display: grid; grid-template-columns: 11rem minmax(0, 1fr); grid-template-areas: "nav status" "nav main"; gap: 1.75rem 2rem; align-items: start; }
  .dash .status-panel { grid-area: status; }
  .dash [data-panel] { grid-area: main; min-width: 0; padding-top: 0; }
  .dash .page-head { margin: 0 0 1.25rem; }
  .dash .page-head h1 { display: block; }

  /* Section list on the left */
  .dash .tabs { grid-area: nav; position: sticky; top: 1.75rem; flex-direction: column; margin: 0; overflow: visible; border-bottom: 0; }
  .dash .tabs button { padding: .55rem .85rem; border-bottom: 0; border-left: 3px solid transparent; font: 600 .95rem/1.3 var(--font); text-align: left; text-transform: none; letter-spacing: 0; color: var(--gray); }
  .dash .tabs button:hover { background: var(--soft); color: var(--charcoal); }
  .dash .tabs button.active { border-left-color: var(--green); background: var(--soft); color: var(--charcoal); }
  .dash .tabs .tab-gap { margin-top: 1.25rem; }

  /* Settings and Help read better at a normal line length */
  .dash [data-panel="settings"], .dash [data-panel="help"] { max-width: 52rem; }

  /* Owner: boxes side by side */
  .dash .tiles { gap: 1.25rem; }
  .dash .tile { padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--line); }
  .dash .tile-wide { grid-column: 1 / -1; }
  .dash .tile > h2.section:first-child { margin: 0 0 .75rem; padding-top: 0; border-top: 0; }
  .dash .tile > h2.section:first-child::before { display: none; }
  .dash .tile select, .dash .tile input { max-width: none; }
  .dash .owner-foot { margin-top: 1.5rem; }

  /* Print & QR */
  .dash #print-body > select { max-width: 36rem; }
  .dash .card-previews { max-width: 56rem; margin-top: 1.25rem; gap: 1.25rem; }
  .dash .copy-row { max-width: none; }

  /* Shifts */
  .dash .pair .field-row { max-width: 30rem; }
  .dash [data-panel="shifts"] .pair select#fallback { max-width: 24rem; }
}

@media (min-width: 1100px) {
  /* People as a table */
  .dash .list-head { display: grid; gap: .6rem; align-items: end; padding: .5rem 0; border-bottom: 1px solid var(--line-dark); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); }
  .dash .people-cols, .dash .person-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr) 8.5rem 8.25rem 2rem; gap: .6rem; align-items: center; }
  .dash .person-row { padding: .45rem 0; }
  .dash .person-row > label { margin: 0; }
  .dash .person-row .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dash .person-row input { margin-top: 0; }
  .dash .person-row .check-cell { grid-column: auto; margin: 0; }
  .dash .person-row .check-cell:empty { display: block; }
  .dash .person-row .check-cell.due { padding: .25rem .4rem; font-size: .8rem; }
  .dash .person-row .row-remove { position: static; }
  .dash #people-list:not(:empty) { border-top: 0; }

  /* Time off as a table */
  .dash .away-cols, .dash .away-row { grid-template-columns: minmax(0, 1.3fr) 10rem 10rem minmax(0, 1.2fr) 7.5rem 2rem; gap: .6rem; align-items: center; }
  .dash .away-row { padding: .45rem 0; }
  .dash .away-row > label { margin: 0; }
  .dash .away-row .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dash .away-row input, .dash .away-row select { margin-top: 0; }
  .dash .away-row .away-status { grid-column: auto; margin: 0; }
  .dash .away-row .away-status:empty { display: block; }
  .dash .away-row .row-remove { position: static; }
  .dash #away-list:not(:empty) { border-top: 0; }

  /* Cards as a table */
  .dash .card-cols, .dash .card-rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 9rem 16.5rem; gap: .5rem 1rem; align-items: center; }
  .dash .card-rows { margin-top: 0; border-top: 0; }
  .dash .card-rows li { padding: .55rem 0; }
  .dash .card-rows li:hover { background: #fafafa; }
  .dash .card-rows .c-note span { color: var(--text); font-size: .95rem; }
  .dash .card-rows .actions { justify-content: flex-end; flex-wrap: nowrap; }
  .dash .list-bar + .list-head { margin-top: .5rem; }

  /* History as a table */
  .dash .history-cols, .dash .history > li { display: grid; grid-template-columns: 11rem 14rem minmax(0, 1fr); gap: 1rem; }
  .dash .history { border-top: 0; margin-top: 0; }
  .dash .history > li { align-items: baseline; padding: .7rem 0; }
  .dash .history .h-when, .dash .history .h-who, .dash .history ul { margin: 0; }
  .dash .history .h-who:empty { display: block; }
  .dash .history .h-when { font-size: .8rem; }
}

@media (min-width: 1400px) {
  .dash #dash { grid-template-columns: 11rem minmax(0, 1fr) 19rem; grid-template-areas: "nav main status"; gap: 0 2.25rem; }
  .dash .status-panel { position: sticky; top: 1.75rem; max-height: calc(100vh - 3.5rem); overflow-y: auto; }
  .dash .status-panel .status-line { align-items: flex-start; }
  .dash .status-panel .btn-row .btn { flex: 1 1 auto; }
  .dash .status-panel div.changes { padding: .75rem .85rem; }
  .dash .publish-bar { display: none; }
  .dash main.wrap { padding-bottom: 3rem; }
}