:root {
  color-scheme: light;
  font-family: "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --ink: #172534; --muted: #687786; --navy: #102f46; --navy-2: #194b6d;
  --orange: #f46634; --orange-dark: #dc4f1d; --orange-soft: #fff0e9;
  --green: #138067; --green-soft: #e7f6f0; --yellow: #ca8514; --yellow-soft: #fff4d8;
  --red: #c93843; --red-soft: #fff0f1; --line: #dde5ea; --canvas: #f3f6f8; --surface: #fff;
  --shadow: 0 16px 44px rgba(16,47,70,.09); --shadow-soft: 0 8px 24px rgba(16,47,70,.07);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 16px; line-height: 1.6; }
button, select, input { min-height: 44px; font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(244,102,52,.33); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { margin-top: 0; color: var(--navy); line-height: 1.3; }
h1 { margin-bottom: 0; font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -.035em; }
h2 { margin-bottom: 0; font-size: 1.3rem; }
p { margin-top: 0; }
label { font-weight: 700; }
input, select { width: 100%; border: 1px solid #c8d2da; border-radius: 10px; padding: 0 13px; color: var(--ink); background: #fff; }
input:disabled { color: #778491; background: #eef1f3; }
.eyebrow, .section-kicker { margin: 0 0 4px; color: var(--orange); font-size: .73rem; font-weight: 900; letter-spacing: .13em; }
.lead, .helper { color: var(--muted); }
.lead { margin: 8px 0 0; }
.helper { margin: 4px 0 0; font-size: .84rem; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--orange); font-weight: 900; }
.brand strong, .brand small { display: block; line-height: 1.35; }
.brand strong { letter-spacing: .03em; }
.brand small { opacity: .7; font-size: .72rem; }
.demo-badge { padding: 5px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; color: #dce9f1; font-size: .76rem; font-weight: 800; }
.primary-button, .secondary-button, .ghost-button, .danger-outline { border-radius: 11px; padding: 0 20px; font-weight: 800; }
.primary-button { border: 0; color: white; background: var(--orange); box-shadow: 0 9px 22px rgba(244,102,52,.24); }
.primary-button:hover { background: var(--orange-dark); }
.primary-button.large { min-height: 52px; padding: 0 28px; }
.primary-button.wide { width: 100%; min-height: 50px; }
.secondary-button { border: 1px solid #c6d1da; color: var(--navy); background: white; }
.secondary-button:hover { background: #eef4f7; }
.ghost-button { border: 1px solid rgba(255,255,255,.28); color: white; background: transparent; }
.ghost-button:hover { background: rgba(255,255,255,.08); }
.danger-outline { border: 1px solid #de9fa4; color: var(--red); background: white; }
.text-link { color: var(--navy-2); font-size: .84rem; font-weight: 800; text-align: center; text-underline-offset: 3px; }

/* entrance */
.portal-page { min-height: 100vh; color: white; background: var(--navy); }
.public-header { height: 78px; padding: 0 max(24px, calc((100vw - 1160px)/2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); }
.portal-main { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 68px 0 42px; }
.portal-hero { max-width: 820px; }
.portal-hero h1 { color: white; font-size: clamp(2.3rem, 5.5vw, 4.65rem); line-height: 1.13; }
.portal-hero > p:last-child { max-width: 690px; margin: 22px 0 0; color: #c5d4df; font-size: 1.05rem; }
.portal-hero-actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; }
.portal-hero-actions a { color: white; font-size: .84rem; font-weight: 900; text-decoration: none; }
.portal-hero-actions .primary-button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; }
.role-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.role-card { min-height: 310px; padding: 30px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.role-card::after { content: ""; width: 180px; height: 180px; position: absolute; right: -60px; bottom: -75px; border-radius: 50%; background: rgba(255,255,255,.06); }
.role-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.34); }
.manager-card { background: linear-gradient(145deg, #1b4a69, #12374f); }
.staff-card { background: linear-gradient(145deg, #fff, #f3f7f9); color: var(--ink); }
.role-icon { width: 52px; height: 52px; margin-bottom: 28px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--orange); font-weight: 900; }
.role-card h2 { margin-bottom: 10px; color: inherit; font-size: 1.55rem; }
.role-card p:not(.section-kicker) { max-width: 470px; color: #c8d7e2; }
.staff-card p:not(.section-kicker) { color: var(--muted); }
.role-link { position: absolute; bottom: 28px; left: 30px; color: inherit; font-weight: 900; }
.role-link b { color: var(--orange); }
.flow-strip { margin-top: 22px; padding: 20px 24px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; }
.flow-strip div { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; }
.flow-strip div span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(255,255,255,.12); font-size: .78rem; font-weight: 900; }
.flow-strip strong, .flow-strip small { display: block; }
.flow-strip small { color: #aebfcb; font-size: .72rem; }
.flow-strip i { color: #7690a2; font-style: normal; }
.demo-note { margin: 20px 0 0; color: #91a8b8; font-size: .75rem; text-align: center; }

/* authentication */
.auth-screen { min-height: 100vh; padding: 28px clamp(20px,5vw,72px); color: white; background: var(--navy); }
.auth-brand { color: white; }
.auth-layout { width: min(1040px, 100%); min-height: calc(100vh - 120px); margin: 20px auto 0; display: grid; grid-template-columns: 1fr 440px; align-items: center; gap: 80px; }
.auth-copy h1 { color: white; font-size: clamp(2.4rem,5vw,4rem); }
.auth-copy > p:not(.eyebrow) { max-width: 520px; margin-top: 20px; color: #c4d3dd; }
.security-points { display: flex; flex-wrap: wrap; gap: 9px; }
.security-points span { padding: 6px 10px; border-radius: 99px; color: #d8e6ef; background: rgba(255,255,255,.08); font-size: .74rem; font-weight: 700; }
.auth-card { padding: 32px; display: grid; gap: 17px; border-radius: 22px; color: var(--ink); background: white; box-shadow: 0 34px 90px rgba(0,0,0,.2); }
.auth-card h2, .auth-card h1 { margin-bottom: 2px; }
.auth-card > p:not(.section-kicker):not(.form-error) { color: var(--muted); }
.auth-card label { display: grid; gap: 6px; font-size: .85rem; }
.form-error { min-height: 22px; margin: -4px 0; color: var(--red); font-size: .8rem; font-weight: 700; }
.demo-credentials { padding: 11px 13px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; border-radius: 10px; color: #745424; background: var(--yellow-soft); font-size: .75rem; }
.demo-credentials strong { grid-row: 1 / 3; align-self: center; }
.staff-auth { display: grid; align-content: start; justify-items: center; gap: 50px; }
.staff-auth .auth-brand { justify-self: start; width: min(520px, 100%); }
.staff-login-card { width: min(520px,100%); }

/* app shell */
.app-header { height: 76px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; color: white; background: var(--navy); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.account-chip { padding: 5px 12px; display: flex; align-items: center; gap: 8px; border-radius: 99px; background: rgba(255,255,255,.1); font-size: .72rem; }
.account-chip b { color: #ffad8e; }
.app-shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: calc(100vh - 76px); }
.side-nav { padding: 26px 16px; background: #e8eef2; border-right: 1px solid #d5dfe6; }
.nav-caption { margin: 0 12px 10px; color: #8996a1; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.nav-item { width: 100%; border: 0; border-radius: 11px; padding: 0 12px; display: flex; align-items: center; gap: 10px; color: #536270; background: transparent; font-weight: 800; text-align: left; }
.nav-item + .nav-item { margin-top: 6px; }
.nav-item span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--navy); background: white; font-size: .72rem; }
.nav-item.active { color: white; background: var(--navy); box-shadow: 0 8px 22px rgba(16,47,70,.2); }
.nav-item.active span { color: white; background: var(--orange); }
.nav-help-link { min-height: 44px; margin-top: 8px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border-radius: 11px; color: #536270; font-size: .84rem; font-weight: 800; text-decoration: none; }
.nav-help-link:hover { color: var(--navy); background: rgba(255,255,255,.7); }
.nav-help-link span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--navy); background: white; font-weight: 900; }
.side-support { margin-top: 28px; padding: 14px; border-radius: 12px; color: white; background: var(--navy); }
.side-support strong, .side-support small { display: block; }
.side-support small { color: #b9cad5; font-size: .7rem; }
.side-support button { width: 100%; min-height: 36px; margin-top: 10px; border: 0; border-radius: 8px; color: var(--navy); background: white; font-size: .76rem; font-weight: 900; }
.content { width: min(1240px, 100%); margin: 0 auto; padding: 20px 42px 100px; }
.view, .staff-view { display: none; }
.view.active, .staff-view.active { display: block; }
.manager-routebar { min-height: 58px; margin-bottom: 22px; padding: 8px 12px; position: sticky; top: 10px; z-index: 24; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border: 1px solid #d5e0e6; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 9px 26px rgba(16,47,70,.1); backdrop-filter: blur(12px); }
.manager-routebar button { width: max-content; min-height: 40px; border: 0; border-radius: 9px; color: var(--navy); background: #edf3f6; font-size: .78rem; font-weight: 900; }
.manager-routebar button:hover { background: #e1ebf0; }
.route-back { padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; }
.route-back > span { color: var(--orange); font-size: 1.15rem; }
.route-home { justify-self: end; padding: 0 15px; }
.route-current { min-width: 180px; text-align: center; }
.route-current small, .route-current strong { display: block; line-height: 1.35; }
.route-current small { color: var(--orange); font-size: .66rem; font-weight: 900; }
.route-current strong { color: var(--navy); font-size: .92rem; }
.manager-routebar.is-home .route-current { grid-column: 2; }
.page-heading { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.view-next-panel { margin: -6px 0 16px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #f0ccb9; border-radius: 14px; background: var(--orange-soft); }
.view-next-panel > div { display: flex; align-items: center; gap: 11px; }
.view-next-panel > div > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--orange); font-weight: 900; }
.view-next-panel p { margin: 0; }
.view-next-panel strong, .view-next-panel small { display: block; }
.view-next-panel small { color: #815944; font-size: .72rem; }
.pending-overview { margin: -6px 0 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-radius: 14px; }
.pending-overview > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 900; }
.pending-overview small, .pending-overview strong, .pending-overview p { display: block; }
.pending-overview p { margin: 3px 0 0; font-size: .72rem; }
.pending-overview.has-pending { color: #8a5c12; border: 1px solid #efcf91; background: var(--yellow-soft); }
.pending-overview.has-pending > span { background: #c6851e; }
.pending-overview.is-complete { color: #08634f; border: 1px solid #a7dccf; background: var(--green-soft); }
.pending-overview.is-complete > span { background: var(--green); }
.period-card, .deadline-card { min-width: 210px; padding: 13px 16px; border-left: 4px solid var(--orange); border-radius: 4px 12px 12px 4px; background: white; box-shadow: var(--shadow-soft); }
.period-card small, .period-card strong, .period-card span, .deadline-card small, .deadline-card strong, .deadline-card span { display: block; }
.period-card small, .deadline-card small { color: var(--muted); }
.period-card span, .deadline-card span { color: var(--orange); font-size: .74rem; font-weight: 800; }
.panel { padding: 26px; border: 1px solid #e0e7ec; border-radius: 17px; background: white; box-shadow: var(--shadow-soft); }
.section-panel, .settings-section { margin-top: 20px; }
.section-heading { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.summary-card { min-height: 128px; padding: 18px 20px; border: 1px solid #e0e7ec; border-radius: 15px; background: white; box-shadow: var(--shadow-soft); }
.summary-button { width: 100%; color: inherit; line-height: inherit; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.summary-button:hover { transform: translateY(-2px); border-color: #aebfca; box-shadow: var(--shadow); }
.summary-top { display: flex; align-items: center; justify-content: space-between; }
.summary-card small { color: var(--muted); }
.summary-card > strong { display: block; margin-top: 5px; color: var(--navy); font-size: 1.7rem; line-height: 1.25; }
.summary-card > strong.status-strong { margin-top: 12px; font-size: 1.25rem; }
.summary-card p { margin: 6px 0 0; color: var(--muted); font-size: .8rem; }
.simple-summary-grid { margin-top: 14px; }
.simple-summary { min-height: 76px; padding: 13px 15px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; border: 1px solid #dbe4e9; border-radius: 13px; color: var(--ink); background: white; text-align: left; box-shadow: var(--shadow-soft); }
.simple-summary:hover { border-color: #aebfca; transform: translateY(-1px); }
.simple-summary > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-size: .76rem; font-weight: 900; }
.simple-summary small, .simple-summary strong { display: block; line-height: 1.35; }
.simple-summary small { color: var(--muted); font-size: .66rem; }
.simple-summary strong { color: var(--navy); font-size: .82rem; }
.simple-summary > b { color: var(--orange); font-size: .72rem; white-space: nowrap; }
.summary-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--navy); background: #edf3f6; font-size: .78rem; font-weight: 900; }
.summary-card.alert .summary-icon { color: var(--red); background: var(--red-soft); }
.summary-card.good .summary-icon { color: var(--green); background: var(--green-soft); }
.action-panel { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: white; background: var(--navy); }
.action-panel h2 { color: white; }
.action-panel p:last-child { margin: 5px 0 0; color: #c2d2dc; }
.shortage-list, .activity-list { display: grid; gap: 8px; }
.shortage-item { padding: 12px 14px; display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 13px; border-radius: 11px; background: var(--red-soft); }
.shortage-item .shortage-date { color: var(--navy); font-weight: 900; }
.shortage-item small, .shortage-item strong { display: block; }
.shortage-item small { color: var(--muted); font-size: .72rem; }
.shortage-item b { color: var(--red); font-size: .82rem; }
.notice-success { padding: 15px; border-radius: 11px; color: var(--green); background: var(--green-soft); font-weight: 800; }
.more-caption { margin: 5px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }
.activity-item { padding: 10px 0; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-item > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: #edf3f6; font-size: .72rem; font-weight: 900; }
.activity-item strong, .activity-item small { display: block; }
.activity-item strong { font-size: .86rem; }
.activity-item small { color: var(--muted); font-size: .7rem; }
.simple-details { padding: 0; overflow: hidden; }
.simple-details > summary { min-height: 72px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; }
.simple-details > summary::-webkit-details-marker { display: none; }
.simple-details > summary span strong, .simple-details > summary span small { display: block; }
.simple-details > summary span strong { color: var(--navy); }
.simple-details > summary span small { color: var(--muted); font-size: .72rem; }
.simple-details > summary > b { padding: 5px 10px; border-radius: 99px; color: var(--navy); background: #edf3f6; font-size: .7rem; }
.simple-details[open] > summary { border-bottom: 1px solid var(--line); }
.simple-details[open] > summary > b::before { content: "閉じる"; font-size: 0; }
.simple-details-body { padding: 16px 18px 18px; }
.simple-details-body > .secondary-button { margin-top: 12px; }
.calm-shortage-summary { padding: 14px; display: flex; align-items: center; gap: 12px; border-radius: 11px; color: #6c4c12; background: var(--yellow-soft); }
.calm-shortage-summary > span { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--yellow); font-weight: 900; }
.calm-shortage-summary strong, .calm-shortage-summary small { display: block; }
.calm-shortage-summary small { color: #8b6a31; font-size: .74rem; }

/* guided workflow */
.workflow-panel { margin-bottom: 16px; padding: 18px 20px; border-color: #ccd9e1; }
.workflow-heading { margin-bottom: 13px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.workflow-heading small { color: var(--muted); font-size: .72rem; }
.workflow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.workflow-steps > i { color: #9cabb6; font-size: 1.3rem; font-style: normal; }
.workflow-step { min-height: 62px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #f7f9fa; text-align: left; }
.workflow-step > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: #e6ecef; font-size: .76rem; font-weight: 900; }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step strong { font-size: .82rem; }
.workflow-step small { color: var(--muted); font-size: .65rem; }
.workflow-step.done { border-color: #b9ded3; background: var(--green-soft); }
.workflow-step.done > span { color: white; background: var(--green); }
.workflow-step.current { border: 2px solid var(--orange); background: var(--orange-soft); box-shadow: 0 6px 18px rgba(244,102,52,.12); }
.workflow-step.current > span { color: white; background: var(--orange); }

.week-tabs { margin-bottom: 16px; padding: 13px 15px; display: flex; align-items: center; gap: 14px; }
.week-tabs > strong { flex: 0 0 auto; color: var(--navy); font-size: .8rem; }
.week-tabs > div { display: flex; flex: 1; gap: 7px; overflow-x: auto; }
.week-tabs button { min-width: 118px; min-height: 50px; flex: 1 0 118px; border: 1px solid #d0dae1; border-radius: 9px; color: var(--navy); background: #f7f9fa; }
.week-tabs button b, .week-tabs button small { display: block; }
.week-tabs button small { color: var(--muted); font-size: .64rem; }
.week-tabs button.active { border-color: var(--navy); color: white; background: var(--navy); }
.week-tabs button.active small { color: #c9d9e4; }

/* availability and coverage */
.legend { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.dot, .signal { display: inline-block; border-radius: 50%; }
.dot { width: 8px; height: 8px; margin: 0 4px 0 10px; }
.dot.full, .signal.enough { background: var(--green); } .dot.off { background: #aab4bd; } .dot.pending, .signal.tight { background: var(--yellow); } .signal.shortage { background: var(--red); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.availability-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: .82rem; }
.availability-table th, .availability-table td { min-width: 92px; padding: 10px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.availability-table th { color: #586775; background: #f0f4f6; font-size: .73rem; }
.availability-table th:first-child, .availability-table td:first-child { min-width: 145px; position: sticky; left: 0; z-index: 1; text-align: left; background: white; }
.availability-table th:first-child { background: #f0f4f6; }
.employee-cell strong, .employee-cell small { display: block; }
.employee-cell small { color: var(--muted); }
.availability-mark { display: inline-grid; min-width: 64px; min-height: 40px; place-content: center; padding: 3px 6px; border-radius: 8px; line-height: 1.2; }
.availability-mark small { display: block; font-size: .63rem; }
.availability-mark.can { color: #08634f; background: var(--green-soft); } .availability-mark.off { color: #74808b; background: #edf1f3; } .availability-mark.pending { color: #8a5c12; background: var(--yellow-soft); }
.status-legend { margin: -3px 0 15px; display: flex; gap: 17px; color: var(--muted); font-size: .78rem; }
.signal { width: 9px; height: 9px; margin-right: 5px; }
.coverage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.coverage-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.coverage-card header { padding: 10px 13px; display: flex; justify-content: space-between; background: #f2f6f8; }
.coverage-card header small { color: var(--muted); }
.coverage-row { padding: 10px 12px; display: grid; grid-template-columns: 105px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.coverage-time strong, .coverage-time small { display: block; }
.coverage-time small { color: var(--muted); font-size: .68rem; }
.coverage-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.position-metric { padding: 6px 8px; border-radius: 8px; font-size: .72rem; }
.position-metric strong { display: block; font-size: .88rem; }
.position-metric.enough { color: #08634f; background: var(--green-soft); } .position-metric.tight { color: #885a0e; background: var(--yellow-soft); } .position-metric.shortage { color: #9d252e; background: var(--red-soft); }
.coverage-status { min-width: 60px; padding: 4px 7px; border-radius: 99px; font-size: .7rem; font-weight: 900; text-align: center; }
.coverage-status.enough { color: #08634f; background: var(--green-soft); } .coverage-status.tight { color: #885a0e; background: var(--yellow-soft); } .coverage-status.shortage { color: #9d252e; background: var(--red-soft); }

/* shift builder */
.builder-empty { padding: 70px 24px; display: grid; justify-items: center; text-align: center; }
.builder-empty p { max-width: 620px; color: var(--muted); }
.builder-empty small { margin-top: 10px; color: var(--muted); }
.empty-icon { width: 62px; height: 62px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 17px; color: var(--orange); background: var(--orange-soft); font-weight: 900; }
.shortage-summary { margin-bottom: 15px; padding: 13px 15px; border-radius: 11px; }
.shortage-summary.ok { color: #08634f; background: var(--green-soft); font-weight: 800; }
.shortage-summary.has-shortage { border-left: 4px solid var(--red); color: #81222a; background: var(--red-soft); }
.shortage-summary ul { margin: 6px 0 0; padding-left: 20px; font-size: .82rem; }
.shortage-summary-title { display: flex; align-items: center; gap: 10px; }
.shortage-summary-title > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--red); font-weight: 900; }
.shortage-summary-title strong, .shortage-summary-title small { display: block; }
.shortage-summary-title small { color: #9b4b53; font-size: .7rem; }
.shortage-summary details { margin: 9px 0 0 38px; }
.shortage-summary summary { cursor: pointer; font-size: .76rem; font-weight: 800; }
.timeline-panel { margin-bottom: 15px; padding: 20px; overflow: hidden; border-color: #cad7df; }
.timeline-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.timeline-heading p:not(.section-kicker) { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.break-rule-strip { margin-top: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #cfdae1; border-radius: 11px; color: #274b62; background: #f3f7f9; }
.break-rule-strip > span { padding: 4px 7px; border-radius: 6px; color: white; background: #53758a; font-size: .65rem; font-weight: 900; }
.break-rule-strip strong { font-size: .8rem; }
.break-rule-strip small { flex: 1; color: var(--muted); }
.break-rule-strip button { min-height: 32px; padding: 0 9px; border: 1px solid #b9cbd5; border-radius: 7px; color: var(--navy); background: white; font-size: .68rem; font-weight: 900; }
.timeline-day-health { margin: 10px 0 2px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 11px; font-size: .75rem; }
.timeline-day-health > div:first-child { display: flex; align-items: center; gap: 8px; }
.timeline-day-health > div:first-child span { width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; font-weight: 900; }
.timeline-day-health.is-ok { color: #08634f; background: var(--green-soft); }
.timeline-day-health.is-ok > div:first-child span { background: var(--green); }
.timeline-day-health.has-shortage { color: #8f2831; background: var(--red-soft); }
.timeline-day-health.has-shortage > div:first-child span { background: var(--red); }
.day-health-items { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.day-health-items b { padding: 4px 7px; border: 1px solid #efb8bd; border-radius: 99px; background: white; font-size: .65rem; }
.timeline-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.timeline-legend span { display: flex; align-items: center; gap: 5px; }
.timeline-legend i { width: 11px; height: 11px; border-radius: 3px; }
.timeline-legend i.hall { background: #1c7968; }
.timeline-legend i.kitchen { background: #e77735; }
.timeline-legend i.training { background: #7657c7; }
.timeline-legend i.break { border: 1px solid #66869a; background: repeating-linear-gradient(135deg,#e8f0f4 0 3px,#66869a 3px 6px); }
.timeline-legend i.shortage { background: var(--red); }
.timeline-date-tabs { margin: 16px 0 14px; padding-bottom: 5px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.timeline-date-tabs button { min-width: 86px; min-height: 48px; flex: 0 0 86px; border: 1px solid #d5dee5; border-radius: 9px; color: var(--navy); background: #f7f9fa; font-size: .74rem; font-weight: 900; }
.timeline-date-tabs button span { display: block; color: var(--muted); font-size: .64rem; font-weight: 700; }
.timeline-date-tabs button.active { border-color: var(--navy); color: white; background: var(--navy); }
.timeline-date-tabs button.active span { color: #c9d9e4; }
.timeline-date-tabs button.has-shortage::after { content: ""; width: 7px; height: 7px; margin: 4px auto 0; display: block; border-radius: 50%; background: var(--red); }
.timeline-date-tabs button.active.has-shortage::after { background: #ffb4bb; }
.timeline-scroll { overflow-x: auto; padding-bottom: 4px; }
.shift-timeline { min-width: 860px; border: 1px solid #dce4e9; border-radius: 12px; overflow: hidden; background: white; }
.timeline-axis, .timeline-row { display: grid; grid-template-columns: 145px 1fr; }
.timeline-axis { color: #d7e4ec; background: var(--navy); }
.timeline-axis-title { padding: 10px 13px; font-size: .72rem; font-weight: 900; }
.timeline-hours { height: 42px; position: relative; border-left: 1px solid rgba(255,255,255,.16); }
.timeline-hours span { position: absolute; top: 9px; transform: translateX(-50%); color: #d7e4ec; font-size: .68rem; font-weight: 800; }
.timeline-hours span:first-child { transform: none; }
.timeline-hours span:last-child { transform: translateX(-100%); }
.timeline-row { border-top: 1px solid #e4e9ed; }
.timeline-person { padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; background: #f8fafb; }
.timeline-person strong { font-size: .78rem; }
.timeline-person small { color: var(--muted); font-size: .62rem; }
.timeline-lane { min-height: 52px; position: relative; border-left: 1px solid #e0e7eb; background-color: white; background-image: linear-gradient(to right,#dfe6eb 1px,transparent 1px); background-size: 20% 100%; }
.timeline-block { height: 36px; padding: 0 9px; position: absolute; top: 8px; display: flex; align-items: center; gap: 6px; overflow: hidden; border: 0; border-radius: 8px; color: white; font-size: .68rem; font-weight: 900; white-space: nowrap; box-shadow: 0 4px 10px rgba(16,47,70,.13); cursor: pointer; }
.timeline-block:hover, .timeline-block.selected { z-index: 4; outline: 3px solid rgba(16,47,70,.18); outline-offset: 2px; filter: brightness(1.04); }
.timeline-block.hall { background: #1c7968; }
.timeline-block.kitchen { background: #e77735; }
.timeline-block.training { background: #7657c7; }
.timeline-block.break { z-index: 3; top: 8px; height: 36px; padding: 0 5px; justify-content: center; border: 2px solid #355a72; color: #173c55; background: repeating-linear-gradient(135deg,#f5f9fa 0 5px,#d7e5eb 5px 10px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.72), 0 3px 9px rgba(16,47,70,.18); cursor: grab; touch-action: none; user-select: none; }
.timeline-block.break:active, .timeline-block.break.dragging { z-index: 7; cursor: grabbing; outline: 3px solid rgba(244,102,52,.28); box-shadow: 0 7px 18px rgba(16,47,70,.25); }
.timeline-block.break small { display: none; }
.timeline-block.break .drag-handle { position: absolute; left: 3px; opacity: .55; letter-spacing: -3px; }
.timeline-dragging { cursor: grabbing; user-select: none; }
.timeline-block small { opacity: .8; font-size: .58rem; }
.timeline-empty { min-height: 110px; display: grid; place-items: center; color: var(--muted); font-size: .82rem; }
.timeline-shortage-row .timeline-person { color: #9d252e; background: var(--red-soft); }
.timeline-shortage-row .timeline-lane { min-height: 62px; background-color: #fffafa; }
.timeline-shortage-block { min-height: 23px; height: 23px; padding: 0 7px; position: absolute; display: flex; align-items: center; border: 1px solid #e9aab0; border-radius: 6px; color: #9d252e; background: #ffe3e6; font-size: .6rem; font-weight: 900; white-space: nowrap; cursor: pointer; }
.timeline-shortage-block:hover, .timeline-shortage-block:focus-visible { z-index: 5; border-color: #b83c47; background: #ffd2d7; outline: 3px solid rgba(190,55,68,.15); }
.timeline-interaction-guide { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: .7rem; }
.timeline-interaction-guide strong { color: var(--navy); }
.timeline-interaction-guide span::before { content: "✓"; margin-right: 4px; color: var(--green); font-weight: 900; }
.timeline-quick-editor { margin-top: 11px; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 2px solid #cbdbe4; border-radius: 12px; background: #f8fbfc; box-shadow: 0 8px 22px rgba(16,47,70,.09); }
.quick-editor-copy { min-width: 210px; display: flex; align-items: center; gap: 9px; }
.quick-editor-copy strong, .quick-editor-copy small { display: block; }
.quick-editor-copy small { margin-top: 2px; color: var(--muted); font-size: .67rem; }
.quick-editor-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: white; background: var(--navy); font-size: .7rem; font-weight: 900; }
.quick-editor-icon.hall { background: #1c7968; }
.quick-editor-icon.kitchen { background: #e77735; }
.quick-editor-icon.training { background: #7657c7; }
.quick-editor-icon.break { background: #53758a; }
.quick-editor-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 7px; }
.quick-editor-actions label { display: grid; gap: 2px; color: var(--muted); font-size: .62rem; }
.quick-editor-actions select { min-height: 38px; padding: 0 28px 0 9px; }
.quick-editor-actions button { min-height: 38px; }
.training-action, .break-action { padding: 0 11px; border: 1px solid #d6cbed; border-radius: 9px; color: #5c409f; background: #f2edff; font-size: .72rem; font-weight: 900; }
.break-action { border-color: #c5d7df; color: #355a72; background: #edf4f7; }
.danger-outline.compact { padding: 0 10px; }
.icon-close { width: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #e8eef1; font-size: 1rem; }
.draft-list { display: grid; gap: 12px; }
.day-adjust-panel { margin-top: 15px; padding: 20px; border: 1px solid #cad7df; border-radius: 17px; background: white; box-shadow: var(--shadow-soft); }
.day-adjust-heading { margin-bottom: 14px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.day-adjust-heading p:not(.section-kicker) { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.day-adjust-panel .draft-day { box-shadow: none; }
.draft-day { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-soft); }
.draft-day > header { padding: 11px 14px; display: flex; justify-content: space-between; background: #edf3f6; }
.draft-day > header small { color: var(--muted); }
.draft-slot { padding: 13px 14px; display: grid; grid-template-columns: 120px 1fr; gap: 12px; border-top: 1px solid var(--line); }
.draft-time strong, .draft-time small { display: block; } .draft-time small { color: var(--muted); font-size: .7rem; }
.role-assignments { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.role-box { min-width: 0; padding: 10px; border-radius: 10px; background: #f3f6f8; }
.role-box.short { background: var(--red-soft); }
.role-box.attention { outline: 4px solid rgba(244,102,52,.3); background: #fff4ee; animation: attention-pulse 1.1s ease 2; }
@keyframes attention-pulse { 50% { outline-color: rgba(244,102,52,.75); transform: translateY(-2px); } }
.role-box.training-box { grid-column: 1 / -1; border: 1px solid #d8cdf3; background: #f4f0ff; }
.assignment-chip.training { color: #563b9d; background: #ebe3ff; }
.assignment-chip.training em { color: #7657c7; }
.role-title { margin-bottom: 7px; display: flex; justify-content: space-between; font-size: .77rem; }
.assignment-chips { min-height: 30px; display: flex; flex-wrap: wrap; gap: 5px; }
.assignment-chip { padding: 4px 4px 4px 9px; display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; color: var(--navy); background: white; box-shadow: 0 1px 4px rgba(16,47,70,.08); font-size: .76rem; font-weight: 800; }
.assignment-chip.fixed { outline: 1px solid var(--orange); }
.assignment-chip em { color: var(--orange); font-size: .6rem; font-style: normal; }
.assignment-chip button { width: 23px; min-height: 23px; border: 0; border-radius: 50%; color: #8d5860; background: #f4eaed; line-height: 1; }
.role-box select { min-height: 36px; margin-top: 8px; font-size: .76rem; }
.break-editor { padding: 14px; border-top: 1px solid var(--line); background: #f7fafb; }
.break-editor-heading { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.break-editor-heading strong, .break-editor-heading small { display: block; }
.break-editor-heading small { color: var(--muted); font-size: .68rem; }
.break-editor-heading > span { padding: 4px 8px; border-radius: 99px; color: #355a72; background: #e5eef3; font-size: .68rem; font-weight: 900; }
.break-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.break-card { padding: 8px 9px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; border: 1px solid #d6e2e8; border-radius: 9px; background: white; }
.break-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: white; background: #53758a; font-size: .68rem; font-weight: 900; }
.break-card strong, .break-card small { display: block; }
.break-card small { color: var(--muted); font-size: .65rem; }
.break-card button { min-height: 30px; padding: 0 8px; border: 1px solid #d8e1e6; border-radius: 7px; color: #7d3d46; background: white; font-size: .65rem; font-weight: 800; }
.break-add-row { margin-top: 10px; display: grid; grid-template-columns: 1.3fr 1fr auto 1fr auto; align-items: center; gap: 7px; }
.break-add-row select, .break-add-row button { min-height: 40px; }
.confirm-bar { padding: 17px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
.confirm-bar strong, .confirm-bar small { display: block; } .confirm-bar small { color: var(--muted); }
.sticky-confirm { position: sticky; z-index: 10; bottom: 16px; margin-top: 20px; }

/* confirmed */
.empty-state { padding: 70px 24px; text-align: center; }
.empty-state p { color: var(--muted); }
.confirmed-stamp { padding: 9px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #baddd3; border-radius: 11px; color: #08634f; background: var(--green-soft); }
.confirmed-stamp > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 900; }
.confirmed-stamp small, .confirmed-stamp strong { display: block; } .confirmed-stamp small { font-size: .65rem; }
.confirmed-heading-actions { display: flex; align-items: center; gap: 9px; }
.revision-banner { margin-bottom: 15px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #baddd3; border-radius: 12px; color: #075642; background: var(--green-soft); }
.revision-banner strong, .revision-banner span { display: block; }
.revision-banner span { margin-top: 2px; font-size: .76rem; }
.revision-banner small { color: #397565; text-align: right; }
.share-board-panel { margin-bottom: 16px; padding: 20px; border-color: #cad7df; }
.share-board-heading { margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.share-board-heading p:not(.section-kicker) { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.share-board-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.line-share-button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px; color: white; background: #06c755; font-weight: 900; box-shadow: 0 8px 20px rgba(6,199,85,.2); }
.line-share-button:hover { background: #05b84e; }
.line-share-button span { margin-right: 3px; font-weight: 1000; letter-spacing: .02em; }
.share-board-preview { max-height: 780px; padding: 12px; overflow: auto; border: 1px solid #d6e0e6; border-radius: 12px; background: #eef3f6; }
.share-board-preview img { width: 100%; min-width: 720px; display: block; border-radius: 7px; background: white; box-shadow: 0 8px 24px rgba(16,47,70,.12); }
.share-board-note { margin: 10px 0 0; color: var(--muted); font-size: .72rem; }
.confirmed-toolbar { margin-bottom: 16px; padding: 14px 18px; display: grid; grid-template-columns: minmax(200px,330px) 1fr auto; align-items: end; gap: 14px; }
.confirmed-toolbar label { display: grid; gap: 4px; font-size: .76rem; }
.confirmed-toolbar p { margin: 0; color: var(--muted); text-align: right; }
.confirmed-list { display: grid; gap: 11px; }
.confirmed-day { padding: 0; overflow: hidden; }
.confirmed-day header { padding: 12px 17px; display: flex; justify-content: space-between; color: white; background: var(--navy); }
.confirmed-day header small { color: #c8d7e1; }
.confirmed-slot { padding: 13px 17px; display: grid; grid-template-columns: 120px 1fr 1fr 1fr; gap: 13px; border-top: 1px solid var(--line); }
.confirmed-role strong, .confirmed-role span { display: block; } .confirmed-role strong { color: var(--muted); font-size: .7rem; } .confirmed-role span { font-weight: 800; }
.confirmed-role.training span { color: #6747b8; }
.confirmed-breaks { padding: 10px 17px; display: grid; grid-template-columns: 120px 1fr; gap: 13px; border-top: 1px dashed #c9d7df; color: #355a72; background: #f1f6f8; font-size: .76rem; }

/* settings */
.autosave-note { color: var(--green); font-size: .8rem; font-weight: 800; }
.settings-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.settings-form > label, .modal-form label { display: grid; gap: 5px; font-size: .8rem; }
.settings-form .toggle-label { display: flex; align-items: center; gap: 8px; }
.rule-preview { padding: 6px 10px; border-radius: 99px; color: #355a72; background: #e7f0f4; font-size: .72rem; font-weight: 900; }
.settings-jump-nav { margin: 0 0 20px; padding: 15px 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; border-color: #cad8e0; background: #f8fbfc; box-shadow: none; }
.settings-jump-nav > strong { color: var(--navy); font-size: .8rem; }
.settings-jump-nav > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.settings-jump-nav button { min-height: 42px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #cbd8e0; border-radius: 9px; color: var(--navy); background: white; font-size: .76rem; font-weight: 900; }
.settings-jump-nav button:hover { border-color: var(--orange); background: #fff8f4; }
.settings-jump-nav button span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-size: .65rem; }
.settings-jump-nav > small { color: var(--muted); font-size: .68rem; }
.break-setup-section { border-top: 4px solid var(--orange); }
.break-master-toggle { margin-bottom: 14px; padding: 13px 15px; display: flex; align-items: center; gap: 11px; border: 1px solid #d5e1e7; border-radius: 11px; background: #f5f9fa; cursor: pointer; }
.break-master-toggle input { width: 21px; min-height: 21px; accent-color: var(--green); }
.break-master-toggle strong, .break-master-toggle small { display: block; }
.break-master-toggle small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.break-question-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.break-question { min-width: 0; padding: 14px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; border: 1px solid #d9e2e7; border-radius: 12px; background: white; }
.break-question .question-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--navy); font-size: .72rem; font-weight: 900; }
.break-question > strong { font-size: .78rem; }
.break-question > select, .break-question > .inline-selects { grid-column: 1 / -1; }
.break-question select { width: 100%; font-weight: 800; }
.break-rule-sentence { margin-top: 12px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; border-left: 4px solid var(--green); border-radius: 8px 12px 12px 8px; color: #134f44; background: var(--green-soft); }
.break-rule-sentence > span { grid-row: 1 / 3; padding: 5px 8px; border-radius: 7px; color: white; background: var(--green); font-size: .66rem; font-weight: 900; }
.break-rule-sentence strong { font-size: .83rem; }
.break-rule-sentence small { color: #39786c; font-size: .67rem; }
.inline-selects { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
.input-button { display: grid; grid-template-columns: 1fr auto; }
.input-button input { border-radius: 10px 0 0 10px; }
.input-button button { border: 0; border-radius: 0 10px 10px 0; color: white; background: var(--navy); font-size: .76rem; font-weight: 900; }
.employee-settings, .requirements-settings { display: grid; gap: 10px; }
.employee-setting { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.employee-setting summary { padding: 12px 14px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.employee-setting summary::-webkit-details-marker { display: none; }
.employee-setting summary strong, .employee-setting summary small { display: block; }
.employee-setting summary small { color: var(--muted); font-size: .75rem; }
.role-badge, .active-badge { padding: 4px 8px; border-radius: 99px; font-size: .68rem; font-weight: 900; }
.role-badge { color: var(--navy); background: #edf3f6; }
.active-badge { color: var(--green); background: var(--green-soft); }
.active-badge.inactive { color: #77828b; background: #edf0f2; }
.employee-setting-body { padding: 13px 14px; display: grid; grid-template-columns: repeat(5,minmax(105px,1fr)); gap: 10px; border-top: 1px solid var(--line); background: #fafcfd; }
.employee-setting-body label { display: grid; gap: 4px; color: var(--muted); font-size: .7rem; }
.employee-setting-body input, .employee-setting-body select { min-height: 38px; font-size: .8rem; }
.employee-setting-body .toggle-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.toggle-label input { width: 18px; min-height: 18px; }
.requirement-day { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.requirement-day header { padding: 9px 13px; background: #edf3f6; }
.requirement-row { padding: 9px 13px; display: grid; grid-template-columns: 1fr repeat(2,minmax(110px,150px)); align-items: center; gap: 11px; border-top: 1px solid var(--line); }
.requirement-row label { display: grid; grid-template-columns: 1fr 50px; align-items: center; gap: 5px; color: var(--muted); font-size: .72rem; }
.requirement-row input { min-height: 36px; padding: 0 4px; text-align: center; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: #efd1d4; box-shadow: none; }
.danger-zone p { margin: 5px 0 0; color: var(--muted); }

/* staff */
.staff-content { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 100px; }
.staff-tabs { margin-bottom: 28px; padding: 4px; display: grid; grid-template-columns: repeat(2,1fr); border-radius: 12px; background: #e4ebef; }
.staff-tabs button { border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 800; }
.staff-tabs button.active { color: var(--navy); background: white; box-shadow: var(--shadow-soft); }
.week-title { padding-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.week-title strong, .week-title small { display: block; } .week-title small { color: var(--muted); }
.save-status { padding: 5px 11px; border-radius: 99px; color: #8c6019; background: var(--yellow-soft); font-size: .76rem; font-weight: 900; }
.save-status.submitted { color: var(--green); background: var(--green-soft); }
.availability-list { border-top: 1px solid var(--line); }
.day-card { min-height: 100px; padding: 14px 0; display: grid; grid-template-columns: 50px minmax(120px,.8fr) minmax(300px,1.5fr); align-items: center; gap: 15px; border-bottom: 1px solid var(--line); }
.day-date { width: 47px; height: 56px; display: grid; place-content: center; border-radius: 11px; color: var(--navy); background: #edf3f6; text-align: center; line-height: 1.05; }
.day-date strong { font-size: 1.12rem; } .day-date span { margin-top: 4px; font-size: .68rem; }
.day-date.weekend { color: #aa2937; background: #fff0f2; }
.day-copy strong, .day-copy small { display: block; } .day-copy small { color: var(--muted); font-size: .76rem; }
.availability-controls { display: grid; gap: 7px; }
.choice-group { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.choice { border: 1px solid #cbd4dc; border-radius: 9px; color: #586674; background: white; font-size: .8rem; font-weight: 800; }
.choice.selected { border-color: var(--green); color: #08634f; background: var(--green-soft); }
.choice.selected.unavailable { border-color: #d68f95; color: #9b2830; background: var(--red-soft); }
.time-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
.time-range select { min-height: 38px; font-size: .82rem; }
.time-range span { color: var(--muted); }
.form-actions { padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.form-actions p { margin: 0; color: var(--muted); }
.staff-submit-bar p strong, .staff-submit-bar p small { display: block; }
.staff-submit-bar p strong { color: var(--navy); }
.staff-submit-bar p small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.privacy-note { margin: 14px 0 0; color: var(--muted); font-size: .75rem; text-align: center; }
.previous-pattern { margin-bottom: 16px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: #f2c9b9; background: linear-gradient(135deg,#fff8f4,#fff); }
.pattern-copy { display: flex; align-items: flex-start; gap: 14px; }
.pattern-copy h2 { margin-bottom: 5px; }
.pattern-copy p:not(.section-kicker) { margin: 0; color: var(--muted); font-size: .84rem; }
.method-number { min-width: 52px; padding: 6px 8px; border-radius: 10px; color: white; background: var(--orange); font-size: .7rem; font-weight: 900; text-align: center; }
.pattern-button { flex: 0 0 auto; }
.pattern-summary { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.pattern-summary span { padding: 4px 8px; border: 1px solid #efd5ca; border-radius: 99px; color: #6f4a3c; background: white; font-size: .7rem; }
.pattern-summary span b { margin-right: 5px; color: var(--orange); }
.pattern-impact { margin-top: 8px; display: block; color: #86513e; font-weight: 800; }
.staff-draft-warning { margin-bottom: 12px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #efb1b8; border-radius: 13px; color: #8f2831; background: var(--red-soft); }
.staff-draft-warning > div { display: flex; align-items: center; gap: 10px; }
.staff-draft-warning > div > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--red); font-weight: 900; }
.staff-draft-warning p { margin: 0; }
.staff-draft-warning strong, .staff-draft-warning small { display: block; }
.staff-draft-warning small { margin-top: 2px; color: #99505a; font-size: .7rem; }
.last-submitted { margin-bottom: 12px; padding: 0; overflow: hidden; }
.last-submitted > summary { min-height: 58px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.last-submitted summary strong, .last-submitted summary small { display: block; }
.last-submitted summary small { color: var(--muted); font-size: .68rem; }
.last-submitted summary b { color: var(--navy); font-size: .72rem; }
#last-submitted-summary { padding: 0 15px 14px; display: grid; gap: 6px; }
.submitted-diff-row { padding: 8px 10px; display: grid; grid-template-columns: 80px 1fr auto 1fr; align-items: center; gap: 7px; border-radius: 8px; background: #f5f8fa; font-size: .7rem; }
.submitted-diff-row b { color: var(--orange); }
.staff-submit-bar.needs-submit { border: 2px solid #f0a086; border-radius: 13px; padding: 14px; background: #fff7f3; box-shadow: 0 10px 24px rgba(90,35,18,.12); }
.staff-heading { margin-bottom: 14px; }
.calendar-editor { padding-top: 22px; }
.calendar-primary { border-color: #cad8e0; box-shadow: 0 14px 34px rgba(16,47,70,.1); }
.calendar-primary-header { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.calendar-primary-header h2 { margin: 0; font-size: 1.45rem; }
.calendar-primary-header p:not(.section-kicker) { margin: 3px 0 0; color: var(--muted); font-size: .8rem; }
.calendar-primary-actions { display: flex; align-items: center; gap: 8px; }
.bulk-mode-button { min-height: 40px; }
.calendar-guide { margin-bottom: 12px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; border-radius: 11px; color: var(--navy); background: #edf4f7; }
.calendar-guide > span { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--orange); font-size: .72rem; font-weight: 900; }
.calendar-guide strong, .calendar-guide small { display: block; }
.calendar-guide small { color: var(--muted); font-size: .71rem; }
.bulk-selection-toolbar { margin-bottom: 10px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #f1c8b8; border-radius: 10px; background: #fff7f3; }
.bulk-selection-toolbar strong, .bulk-selection-toolbar small { display: block; }
.bulk-selection-toolbar small { color: var(--muted); font-size: .7rem; }
.bulk-time-panel { padding: 16px 18px; display: grid; grid-template-columns: 1fr minmax(300px,410px); align-items: center; gap: 24px; border: 1px solid #d9e4ea; border-radius: 13px; background: #f3f7f9; }
.bulk-step { display: flex; align-items: center; gap: 11px; }
.bulk-step > span { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-size: .78rem; font-weight: 900; }
.bulk-step strong, .bulk-step small { display: block; }
.bulk-step small { color: var(--muted); font-size: .72rem; }
.bulk-time-inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 9px; }
.bulk-time-inputs label { display: grid; gap: 3px; color: var(--muted); font-size: .7rem; }
.bulk-time-inputs > span { padding-bottom: 10px; color: var(--muted); }
.calendar-step-heading { margin: 22px 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.calendar-shortcuts { display: flex; gap: 5px; }
.calendar-shortcuts button { min-height: 34px; border: 1px solid #cbd6de; border-radius: 8px; padding: 0 11px; color: var(--navy); background: white; font-size: .72rem; font-weight: 800; }
.calendar-shortcuts button:hover { background: #edf3f6; }
.shift-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
.calendar-weekday { padding: 4px 0; color: var(--muted); font-size: .7rem; font-weight: 900; text-align: center; }
.calendar-weekday.weekend { color: #a4323d; }
.calendar-day { min-width: 0; min-height: 98px; padding: 9px; position: relative; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #e1e7eb; border-radius: 10px; color: var(--ink); background: white; text-align: left; }
.calendar-day > span { font-size: .78rem; font-weight: 900; }
.calendar-day b { margin-top: auto; font-size: .68rem; }
.calendar-day small { color: var(--muted); font-size: .65rem; white-space: nowrap; }
.calendar-day i { display: none; position: absolute; top: 7px; right: 7px; font-size: .7rem; font-style: normal; }
.calendar-day.outside { color: #9ca7af; background: #f7f9fa; }
.calendar-day.outside small { margin-top: auto; color: #b3bcc3; }
.calendar-day.blank { border-color: transparent; background: transparent; }
.calendar-day.weekend > span { color: #b12f3c; }
.calendar-day.target { border-color: #cbd7df; cursor: pointer; }
.calendar-day.target:hover { transform: translateY(-1px); border-color: var(--navy-2); }
.calendar-day.target.available { color: #075c4a; background: var(--green-soft); }
.calendar-day.target.off { color: #697680; background: #f1f4f6; }
.calendar-day.target.selected { outline: 3px solid var(--orange); outline-offset: -2px; box-shadow: 0 5px 14px rgba(244,102,52,.16); }
.calendar-day.target.selected i { display: block; color: var(--orange); }
.calendar-day.target.active-date { outline: 3px solid var(--navy); outline-offset: -2px; box-shadow: 0 6px 18px rgba(16,47,70,.18); }
.calendar-day.target.active-date i { display: block; color: var(--navy); font-size: .6rem; font-weight: 900; }
.day-editor { margin-top: 14px; padding: 17px 18px; border: 2px solid #d7e2e8; border-radius: 14px; background: #f7fafb; }
.day-editor-heading { display: flex; align-items: center; justify-content: space-between; }
.day-editor-heading small { color: var(--muted); font-size: .7rem; }
.day-editor-heading h3 { margin: 2px 0 0; font-size: 1.1rem; }
.day-editor-heading > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--orange); font-size: .72rem; font-weight: 900; }
.day-editor-controls { margin-top: 12px; display: grid; grid-template-columns: minmax(220px,.8fr) minmax(310px,1.2fr); align-items: end; gap: 14px; }
.day-status-choice .choice { min-height: 48px; }
.day-time-range label { display: grid; gap: 3px; color: var(--muted); font-size: .7rem; }
.day-time-range select { min-height: 48px; background: white; }
.day-editor-help { margin: 10px 0 0; color: var(--muted); font-size: .7rem; }
.day-editor-help strong { color: var(--navy); }
.bulk-entry { margin-top: 14px; padding: 16px 18px; border-radius: 14px; color: white; background: var(--navy); }
.bulk-entry-heading { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bulk-entry-heading strong, .bulk-entry-heading small { display: block; }
.bulk-entry-heading small { max-width: 520px; overflow: hidden; color: #bdced9; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.text-button { min-height: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 0 10px; color: white; background: transparent; font-size: .72rem; font-weight: 800; }
.bulk-entry-body { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(300px,1.2fr); align-items: end; gap: 18px; }
.bulk-entry .bulk-time-inputs label { color: #bdced9; }
.bulk-entry .bulk-time-inputs select { min-height: 46px; background: white; }
.compact-pattern { margin-top: 16px; margin-bottom: 0; box-shadow: none; }
.bulk-apply-bar { margin-top: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 12px; color: white; background: var(--navy); }
.bulk-apply-bar strong, .bulk-apply-bar small { display: block; }
.bulk-apply-bar small { max-width: 420px; overflow: hidden; color: #bdced9; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.bulk-actions { display: flex; gap: 8px; }
.bulk-actions .secondary-button { border-color: rgba(255,255,255,.35); color: white; background: transparent; }
.bulk-actions .secondary-button:hover { background: rgba(255,255,255,.08); }
.bulk-actions button:disabled { cursor: not-allowed; opacity: .42; }
.my-shift-day { padding: 0; overflow: hidden; }
.my-shift-day header { padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; }
.my-shift-day header strong, .my-shift-day header small { display: block; } .my-shift-day header small { color: var(--muted); }
.my-shift-day header b { padding: 4px 9px; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: .74rem; }
.my-shift-day.off-day header b { color: #74808b; background: #edf1f3; }
.my-shift-day > p { padding: 0 17px 14px; color: var(--muted); }
.my-shift-row { padding: 12px 17px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.my-shift-row strong { color: var(--navy); }
.my-shift-row.training { background: #f7f3ff; }
.my-shift-row.training strong { color: #6747b8; }
.my-shift-row.break { color: #355a72; background: #f1f6f8; }
.staff-revision-banner { margin-bottom: 14px; }
.shift-total { margin: 5px 0 0; color: var(--muted); text-align: right; }

.toast { position: fixed; z-index: 60; right: 22px; bottom: 22px; max-width: 420px; padding: 12px 16px; border-radius: 10px; color: white; background: var(--navy); box-shadow: var(--shadow); transform: translateY(26px); opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(8,24,36,.58); }
.modal { width: min(470px,100%); padding: 26px; border-radius: 18px; background: white; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.modal > p:not(.section-kicker) { color: var(--muted); }
.modal-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 9px; }
.modal-form { margin-top: 16px; display: grid; gap: 13px; }
.publish-confirm-modal { width: min(620px,100%); }
.publish-checks { margin-top: 15px; display: grid; gap: 8px; }
.publish-check { padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-radius: 10px; }
.publish-check > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 900; }
.publish-check strong, .publish-check small { display: block; }
.publish-check small { margin-top: 1px; font-size: .7rem; }
.publish-check.warn { color: #8a5c12; background: var(--yellow-soft); }
.publish-check.warn > span { background: #c6851e; }
.publish-check.ok { color: #08634f; background: var(--green-soft); }
.publish-check.ok > span { background: var(--green); }
.publish-ack { padding: 11px 12px; grid-template-columns: auto 1fr !important; align-items: center; border: 2px solid #efb19b; border-radius: 10px; background: #fff5f0; cursor: pointer; }
.publish-ack input { width: 22px; min-height: 22px; accent-color: var(--orange); }
.publish-ack strong, .publish-ack small { display: block; }
.publish-ack small { color: #8b5a48; font-size: .68rem; }
#publish-shift:disabled { cursor: not-allowed; opacity: .45; }
.bottom-nav, .staff-bottom-nav { display: none; }

/* sales beta / onboarding */
.public-header-actions { display: flex; align-items: center; gap: 12px; }
.header-signup, .header-login { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 10px; color: var(--navy); background: white; font-size: .8rem; font-weight: 900; text-decoration: none; }
.header-guide { color: inherit; font-size: .78rem; font-weight: 900; text-decoration: none; }
.header-guide:hover { text-decoration: underline; text-underline-offset: 4px; }
.sales-ready-strip { margin-top: 34px; padding: 18px 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.055); }
.sales-ready-strip > div { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; }
.sales-ready-strip > div span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: .72rem; font-weight: 900; }
.sales-ready-strip strong, .sales-ready-strip small { display: block; }
.sales-ready-strip strong { font-size: .82rem; }
.sales-ready-strip small { color: #aebfcb; font-size: .68rem; }
.sales-ready-strip > a { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: white; background: var(--orange); font-size: .78rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.setup-page { min-height: 100vh; background: linear-gradient(135deg,#102f46 0 46%,#f3f6f8 46% 100%); }
.setup-header { color: white; }
.setup-main { width: min(1080px,calc(100% - 40px)); min-height: calc(100vh - 78px); margin: 0 auto; padding: 54px 0; display: grid; grid-template-columns: 1fr 470px; align-items: center; gap: 88px; }
.setup-intro { color: white; }
.setup-intro h1 { color: white; font-size: clamp(2.2rem,4vw,3.7rem); }
.setup-intro > p:not(.eyebrow) { max-width: 520px; margin-top: 18px; color: #c7d6df; }
.setup-intro ol { margin: 28px 0 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.setup-intro li { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.setup-intro li span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(255,255,255,.13); font-size: .75rem; }
.setup-card { padding: 30px; display: grid; gap: 15px; border-radius: 22px; background: white; box-shadow: 0 34px 90px rgba(0,0,0,.18); }
.setup-card > div > p:last-child { margin: 5px 0 0; color: var(--muted); }
.setup-card label { display: grid; gap: 5px; font-size: .82rem; }
.setup-card label small { color: var(--muted); font-weight: 500; }
.slug-input { display: grid; grid-template-columns: auto 1fr; align-items: center; overflow: hidden; border: 1px solid #c8d2da; border-radius: 10px; }
.slug-input b { padding-left: 12px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.slug-input input { border: 0; }
.terms-check { grid-template-columns: auto 1fr; align-items: start; }
.terms-check input { width: 20px; min-height: 20px; margin: 3px 0 0; }
.terms-check span { color: var(--muted); font-size: .75rem; font-weight: 500; }
.terms-check a { color: var(--navy-2); font-weight: 800; }
.setup-submit { min-height: 52px; }
.setup-footnote { margin: -4px 0 0; color: var(--muted); font-size: .7rem; text-align: center; }
.legal-page { min-height: 100vh; padding: 46px 20px; background: var(--canvas); }
.legal-document { width: min(780px,100%); margin: 0 auto; padding: 42px; border-radius: 20px; background: white; box-shadow: var(--shadow-soft); }
.legal-document .brand { margin-bottom: 36px; }
.legal-document h1 { margin-bottom: 8px; }
.legal-document h2 { margin-top: 28px; font-size: 1.1rem; }
.legal-document > p { color: var(--muted); }
.legal-note { margin-top: 34px; padding: 15px; border-left: 4px solid var(--yellow); background: var(--yellow-soft); }
.autosave-note[data-status="saving"] { color: var(--yellow); }
.autosave-note[data-status="error"] { color: var(--red); }
.employee-setting-body label small { color: var(--muted); font-size: .66rem; font-weight: 500; }
.handoff-panel { margin-bottom: 20px; border: 2px solid #f0c9b9; background: linear-gradient(135deg,#fff 0 70%,#fff6f1 100%); }
.handoff-panel.ready { border-color: #9bd4c5; background: linear-gradient(135deg,#fff 0 70%,#eef9f5 100%); }
.handoff-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.handoff-heading p:not(.section-kicker) { margin: 5px 0 0; color: var(--muted); font-size: .82rem; }
.handoff-progress { width: 88px; height: 72px; flex: 0 0 auto; display: grid; place-items: center; align-content: center; border-radius: 14px; color: var(--orange-dark); background: var(--orange-soft); }
.handoff-panel.ready .handoff-progress { color: var(--green); background: var(--green-soft); }
.handoff-progress strong, .handoff-progress small { display: block; line-height: 1.2; }
.handoff-progress strong { font-size: 1.2rem; }.handoff-progress small { margin-top: 3px; font-size: .62rem; font-weight: 800; }
.handoff-checklist { margin-top: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.handoff-check { padding: 10px 11px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; border: 1px solid #e1e7eb; border-radius: 10px; background: white; }
.handoff-check > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--yellow); font-size: .72rem; font-weight: 900; }
.handoff-check.done > span { background: var(--green); }
.handoff-check strong, .handoff-check small { display: block; }.handoff-check strong { font-size: .78rem; }.handoff-check small { color: var(--muted); font-size: .65rem; }
.handoff-actions { margin-top: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.handoff-actions > a { margin-left: auto; color: var(--navy-2); font-size: .76rem; font-weight: 900; }
.handoff-security-note { margin: 12px 0 0; color: var(--muted); font-size: .68rem; }
.account-security-section { border-left: 4px solid var(--navy-2); }
.account-email-label { padding: 5px 10px; border-radius: 99px; color: var(--navy); background: #edf3f6; font-size: .7rem; font-weight: 900; }
.password-change-form { margin-top: 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; align-items: end; gap: 11px; }
.password-change-form label { display: grid; gap: 4px; color: var(--muted); font-size: .72rem; }
.account-security-message { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: .7rem; font-weight: 700; }

/* client and sales guides */
.guide-page { min-height: 100vh; background: #eef3f6; }
.guide-header { color: white; background: var(--navy); }
.guide-main { width: min(1040px,calc(100% - 40px)); margin: 0 auto; padding: 58px 0 72px; }
.guide-hero { padding: 46px; border-radius: 24px; color: white; background: linear-gradient(135deg,#102f46,#1b536f); box-shadow: var(--shadow); }
.guide-hero h1, .demo-hero h1 { color: white; font-size: clamp(2.25rem,5vw,4rem); }
.guide-hero > p:not(.eyebrow), .demo-hero > div > p:not(.eyebrow) { max-width: 700px; margin: 18px 0 0; color: #c7d6df; }
.guide-audience { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 9px; }
.guide-audience a { padding: 8px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; color: white; font-size: .75rem; font-weight: 800; text-decoration: none; }
.guide-section { margin-top: 22px; padding: 30px; border-radius: 20px; background: white; box-shadow: var(--shadow-soft); scroll-margin-top: 20px; }
.guide-section-heading { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 14px; }
.guide-section-heading > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: white; background: var(--orange); font-weight: 900; }
.guide-section-heading p:not(.section-kicker) { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.guide-step-list, .demo-flow-list { margin: 24px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.guide-step-list li, .demo-flow-list li { padding: 13px 14px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 11px; }
.guide-step-list li > span, .demo-flow-list li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-weight: 900; }
.guide-step-list strong, .guide-step-list p, .demo-flow-list strong, .demo-flow-list p { display: block; margin: 0; }
.guide-step-list p, .demo-flow-list p { color: var(--muted); font-size: .75rem; }
.guide-step-list small, .demo-flow-list b { color: var(--orange-dark); font-size: .68rem; white-space: nowrap; }
.staff-guide-grid, .handoff-guide-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.staff-guide-grid article { padding: 17px; border-radius: 13px; background: #f4f7f9; }
.staff-guide-grid b { width: 29px; height: 29px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--navy); }
.staff-guide-grid strong { display: block; color: var(--navy); }.staff-guide-grid p { margin: 5px 0 0; color: var(--muted); font-size: .75rem; }
.handoff-guide-grid > div { padding: 13px; display: grid; grid-template-columns: 28px 1fr; column-gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 11px; }
.handoff-guide-grid span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: .7rem; font-weight: 900; }
.handoff-guide-grid strong, .handoff-guide-grid small { display: block; }.handoff-guide-grid small { color: var(--muted); font-size: .66rem; }
.security-callout { margin-top: 16px; padding: 14px 16px; border-left: 4px solid var(--yellow); background: var(--yellow-soft); }
.security-callout p { margin: 3px 0 0; color: #70541d; font-size: .75rem; }
.guide-cta { margin-top: 22px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 20px; color: white; background: var(--navy); }
.guide-cta h2 { color: white; }.guide-cta p:not(.section-kicker) { margin: 4px 0 0; color: #b9cbd7; }
.guide-cta > div:last-child { display: flex; gap: 9px; }.guide-cta a { min-height: 46px; display: inline-flex; align-items: center; text-decoration: none; }
.demo-hero { padding: 42px; display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 44px; border-radius: 24px; color: white; background: linear-gradient(135deg,#102f46,#1b536f); box-shadow: var(--shadow); }
.demo-access-card { padding: 24px; border-radius: 17px; color: var(--ink); background: white; }
.demo-access-card h2 { margin-bottom: 12px; }.demo-access-card dl { margin: 0 0 15px; display: grid; gap: 7px; }
.demo-access-card dl div { display: grid; grid-template-columns: 92px 1fr; font-size: .76rem; }.demo-access-card dt { color: var(--muted); }.demo-access-card dd { margin: 0; font-weight: 900; }
.demo-access-card a { min-height: 45px; margin-top: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.demo-talk-section { margin-top: 22px; padding: 30px; border-radius: 20px; background: white; box-shadow: var(--shadow-soft); }
.demo-boundary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.demo-boundary h2 { margin-bottom: 12px; }.demo-boundary ul, .demo-boundary ol { margin: 0; padding-left: 21px; color: var(--muted); font-size: .78rem; }.demo-boundary li + li { margin-top: 7px; }

/* guided fixes, reminders and post-publish requests */
.workflow-guide-action { display: flex; align-items: center; gap: 10px; }
.secondary-button.compact { min-height: 34px; padding: 0 10px; font-size: .7rem; }
.simple-summary.urgent { border-color: #efb1b8; background: var(--red-soft); }
.simple-summary.urgent > span { background: var(--red); }
.reminder-panel { margin-bottom: 16px; padding: 18px 20px; }
.reminder-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.reminder-heading p:not(.section-kicker) { margin: 3px 0 0; color: var(--muted); font-size: .76rem; }
.reminder-toggle { padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #cad7df; border-radius: 11px; background: #f7fafb; cursor: pointer; }
.reminder-toggle input { width: 20px; min-height: 20px; accent-color: var(--orange); }
.reminder-toggle strong, .reminder-toggle small { display: block; }
.reminder-toggle small { color: var(--muted); font-size: .63rem; }
.reminder-status { margin-top: 12px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; border-radius: 10px; background: #f3f7f9; }
.reminder-status strong, .reminder-status small { display: block; }
.reminder-status small { color: var(--muted); font-size: .68rem; }
.reminder-state { padding: 4px 8px; border-radius: 99px; font-size: .66rem; font-weight: 900; white-space: nowrap; }
.reminder-state.active { color: #8a5c12; background: var(--yellow-soft); }
.reminder-state.done { color: #08634f; background: var(--green-soft); }
.reminder-state.off { color: #66737d; background: #e7ecef; }
.shortage-summary.ok { display: flex; align-items: center; gap: 10px; }
.shortage-summary.ok > span { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: var(--green); }
.shortage-summary.ok strong, .shortage-summary.ok small { display: block; }
.shortage-summary.ok small { font-size: .7rem; font-weight: 600; }
.next-shortage-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; }
.next-shortage-card > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--red); font-weight: 900; }
.next-shortage-card p { margin: 0 0 2px; color: #9b4b53; font-size: .66rem; font-weight: 900; }
.next-shortage-card strong, .next-shortage-card small { display: block; }
.next-shortage-card small { margin-top: 2px; color: #8f4a52; font-size: .7rem; }
.timeline-shortage-block { height: 26px; min-height: 26px; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.05; }
.timeline-shortage-block strong { font-size: .58rem; }
.timeline-shortage-block small { color: #a1434c; font-size: .48rem; font-weight: 800; }
.timeline-shortage-block.break-caused { border-color: #e4a53e; color: #7c500c; background: #fff0c9; }
.timeline-shortage-block.break-caused small { color: #8b641f; }
.role-shortage-reason { margin: -2px 0 8px; padding: 6px 8px; border-radius: 7px; color: #7c500c; background: #fff0c9; font-size: .66rem; font-weight: 800; }
.change-request-inbox { margin: 14px 0; }
.request-count { padding: 5px 9px; border-radius: 99px; color: #8a5c12; background: var(--yellow-soft); font-size: .7rem; font-weight: 900; }
.change-request-list { display: grid; gap: 9px; }
.change-request-item { padding: 12px 13px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 1px solid #e0e7ec; border-radius: 11px; }
.change-request-item.pending { border-color: #efc479; background: #fffaf0; }
.change-request-status { padding: 4px 7px; border-radius: 99px; color: #8a5c12; background: var(--yellow-soft); font-size: .64rem; font-weight: 900; }
.change-request-item.resolved .change-request-status { color: #08634f; background: var(--green-soft); }
.change-request-copy strong, .change-request-copy small { display: block; }
.change-request-copy p { margin: 2px 0; color: var(--navy); font-size: .76rem; }
.change-request-copy p span { margin-left: 8px; color: var(--orange); font-weight: 800; }
.change-request-copy small { color: var(--muted); font-size: .68rem; }
.change-request-actions { display: flex; align-items: center; gap: 7px; }
.change-request-actions .text-button { color: var(--navy); border-color: #cad7df; }
.change-request-empty { padding: 12px; display: flex; align-items: center; gap: 10px; border-radius: 10px; color: #08634f; background: var(--green-soft); }
.change-request-empty > span { font-weight: 900; }
.change-request-empty strong, .change-request-empty small { display: block; }
.change-request-empty small { opacity: .75; font-size: .68rem; }
.staff-reminder-banner { margin-bottom: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #efc479; border-radius: 12px; color: #78500e; background: #fff8e8; }
.staff-reminder-banner > span { font-size: 1.15rem; }
.staff-reminder-banner strong, .staff-reminder-banner small { display: block; }
.staff-reminder-banner small { margin-top: 2px; font-size: .7rem; }
.day-editor { scroll-margin-top: 82px; }
.day-editor.just-selected { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(244,102,52,.12); }
.day-editor-help span { display: block; margin-top: 3px; }
.staff-change-request { margin: 0 0 14px; }
.change-request-form { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 11px; }
.change-request-form label { display: grid; gap: 4px; color: var(--muted); font-size: .72rem; }
.change-request-time { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.change-request-time label { display: grid; gap: 4px; }
.change-request-note { grid-column: 1 / -1; }
.change-request-note textarea { width: 100%; padding: 10px 11px; border: 1px solid #c8d3da; border-radius: 9px; resize: vertical; font: inherit; }
.change-request-form > button { grid-column: 1 / -1; justify-self: end; }
.my-change-requests { margin-top: 16px; }
.my-change-requests h3 { margin-bottom: 8px; font-size: .86rem; }
.my-change-request { padding: 10px 11px; display: grid; grid-template-columns: auto 1fr; gap: 9px; border-top: 1px solid var(--line); }
.my-change-request > span { align-self: start; padding: 4px 7px; border-radius: 99px; color: #8a5c12; background: var(--yellow-soft); font-size: .62rem; font-weight: 900; }
.my-change-request.resolved > span { color: #08634f; background: var(--green-soft); }
.my-change-request strong, .my-change-request small { display: block; }
.my-change-request small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.onboarding-modal { width: min(620px,100%); }
.onboarding-intro { margin-bottom: 14px; }
.onboarding-steps { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.onboarding-steps li { padding: 10px 12px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; border: 1px solid #dce5ea; border-radius: 10px; background: #f8fafb; }
.onboarding-steps li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--orange); font-weight: 900; }
.onboarding-steps strong, .onboarding-steps small { display: block; }
.onboarding-steps small { color: var(--muted); font-size: .68rem; }

@media (max-width: 1040px) {
  .auth-layout { gap: 35px; }
  .coverage-grid { grid-template-columns: 1fr; }
  .employee-setting-body { grid-template-columns: repeat(3,minmax(105px,1fr)); }
}
@media (max-width: 820px) {
  .public-header { padding: 0 18px; }
  .portal-hero-actions { align-items: flex-start; flex-direction: column; gap: 11px; }
  .guide-main { width: min(100% - 28px,680px); padding: 34px 0 54px; }
  .guide-hero, .demo-hero { padding: 28px 22px; }
  .demo-hero { grid-template-columns: 1fr; gap: 24px; }
  .guide-section, .demo-talk-section { padding: 22px 18px; }
  .guide-cta { align-items: stretch; flex-direction: column; }
  .demo-boundary { grid-template-columns: 1fr; }
  .portal-main { padding-top: 44px; }
  .sales-ready-strip { grid-template-columns: 1fr; }
  .sales-ready-strip > a { margin-top: 2px; }
  .setup-page { background: var(--navy); }
  .setup-main { width: min(100% - 30px,580px); padding: 36px 0 60px; grid-template-columns: 1fr; gap: 30px; }
  .setup-intro h1 { font-size: 2.3rem; }
  .legal-document { padding: 26px 20px; }
  .role-grid { grid-template-columns: 1fr; }
  .flow-strip { grid-template-columns: 1fr 1fr; }
  .flow-strip i { display: none; }
  .auth-screen { padding: 20px; }
  .auth-layout { min-height: auto; margin-top: 55px; grid-template-columns: 1fr; }
  .auth-copy { display: none; }
  .auth-card { width: min(520px,100%); margin: 0 auto; }
  .app-header { height: 64px; padding: 0 14px; }
  .app-header .brand small, .account-chip span { display: none; }
  .ghost-button { min-height: 38px; padding: 0 10px; font-size: .72rem; }
  .app-shell { display: block; min-height: calc(100vh - 64px); }
  .side-nav { display: none; }
  .content { padding: 10px 15px 100px; }
  .manager-routebar { min-height: 54px; margin-bottom: 16px; top: 6px; grid-template-columns: 1fr auto; }
  .manager-routebar.is-home { grid-template-columns: 1fr; }
  .manager-routebar.is-home .route-current { grid-column: 1; }
  .route-current { min-width: 0; justify-self: end; text-align: right; }
  .manager-routebar.is-home .route-current { justify-self: center; text-align: center; }
  .route-home { display: none; }
  .route-back { padding: 0 10px; }
  .route-back b { font-size: .7rem; }
  .page-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .page-heading #regenerate-draft { width: max-content; min-height: 38px; align-self: flex-start; padding: 0 13px; font-size: .74rem; }
  .view-next-panel { align-items: stretch; flex-direction: column; }
  .view-next-panel .primary-button { width: 100%; }
  .period-card, .deadline-card { min-width: 0; }
  .panel { padding: 18px; }
  .section-heading { align-items: stretch; flex-direction: column; gap: 9px; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card { min-height: 104px; }
  .workflow-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .workflow-guide-action { width: 100%; margin-top: 6px; justify-content: space-between; }
  .workflow-steps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
  .workflow-steps > i { display: none; }
  .workflow-step { min-height: 82px; padding: 8px 5px; flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
  .workflow-step > span { width: 27px; height: 27px; }
  .workflow-step strong { font-size: .7rem; line-height: 1.25; }
  .workflow-step small { display: none; }
  .week-tabs { align-items: stretch; flex-direction: column; gap: 8px; }
  .week-tabs > div { width: 100%; }
  .week-tabs button { min-width: 104px; flex-basis: 104px; }
  .action-panel { align-items: stretch; flex-direction: column; }
  .simple-summary-grid { grid-template-columns: 1fr; }
  .simple-summary { min-height: 66px; }
  .reminder-heading { align-items: stretch; flex-direction: column; }
  .reminder-toggle { width: 100%; }
  .next-shortage-card { grid-template-columns: 34px 1fr; }
  .next-shortage-card .primary-button { grid-column: 1 / -1; width: 100%; }
  .simple-details > summary { min-height: 66px; padding: 12px 14px; }
  .simple-details-body { padding: 14px; }
  .timeline-heading, .share-board-heading { align-items: stretch; flex-direction: column; }
  .break-rule-strip { align-items: flex-start; flex-wrap: wrap; }
  .break-rule-strip small { min-width: 100%; order: 4; }
  .break-rule-strip button { margin-left: auto; }
  .timeline-day-health { align-items: flex-start; flex-direction: column; }
  .day-health-items { justify-content: flex-start; }
  .timeline-quick-editor { align-items: stretch; flex-direction: column; }
  .quick-editor-actions { justify-content: flex-start; }
  .quick-editor-actions .icon-close { margin-left: auto; }
  .share-board-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .line-share-button { grid-column: 1 / -1; }
  .share-board-actions button { min-height: 48px; padding: 0 10px; }
  .draft-slot { grid-template-columns: 1fr; }
  .role-assignments { grid-template-columns: 1fr; }
  .role-box.training-box { grid-column: auto; }
  .break-cards { grid-template-columns: 1fr; }
  .break-add-row { grid-template-columns: 1fr 1fr auto 1fr; }
  .break-add-row button { grid-column: 1 / -1; }
  .day-adjust-heading { align-items: stretch; flex-direction: column; }
  .day-adjust-heading .secondary-button { width: 100%; }
  .confirm-bar { align-items: stretch; flex-direction: column; }
  .sticky-confirm { bottom: 74px; padding: 12px 14px; flex-direction: row; align-items: center; }
  .sticky-confirm strong { font-size: .78rem; line-height: 1.35; }
  .sticky-confirm small { display: none; }
  .sticky-confirm button { min-width: 170px; padding: 0 12px; font-size: .78rem; }
  .confirmed-toolbar { grid-template-columns: 1fr; }
  .confirmed-heading-actions { align-items: stretch; flex-direction: column-reverse; }
  .revision-banner { align-items: flex-start; flex-direction: column; }
  .revision-banner small { text-align: left; }
  .confirmed-toolbar p { text-align: left; }
  .confirmed-slot { grid-template-columns: 1fr; }
  .change-request-item { grid-template-columns: auto 1fr; }
  .change-request-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .settings-form { grid-template-columns: 1fr; }
  .handoff-heading { align-items: flex-start; }
  .handoff-checklist { grid-template-columns: 1fr; }
  .handoff-actions { align-items: stretch; flex-direction: column; }
  .handoff-actions button { width: 100%; }
  .handoff-actions > a { margin: 2px 0 0; text-align: center; }
  .password-change-form { grid-template-columns: 1fr; }
  .settings-jump-nav { grid-template-columns: 1fr; }
  .settings-jump-nav > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .break-question-grid { grid-template-columns: 1fr; }
  .break-rule-sentence { grid-template-columns: 1fr; }
  .break-rule-sentence > span { grid-row: auto; justify-self: start; }
  .employee-setting-body { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .requirement-row { grid-template-columns: 1fr 1fr; }
  .requirement-row > strong { grid-column: 1 / -1; }
  .danger-zone { align-items: stretch; flex-direction: column; }
  .bottom-nav { height: 72px; padding: 6px 5px max(6px,env(safe-area-inset-bottom)); position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #d5dfe6; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
  .bottom-nav .nav-item { min-height: 56px; padding: 3px; flex-direction: column; justify-content: center; gap: 1px; font-size: .62rem; text-align: center; }
  .bottom-nav .nav-item + .nav-item { margin-top: 0; }
  .bottom-nav .nav-item span { width: 22px; height: 22px; }
  .bottom-nav .nav-item.active { color: var(--navy); background: transparent; box-shadow: none; }
  .bottom-nav .nav-item.active span { color: white; background: var(--orange); }
  .staff-content { width: min(100% - 28px,860px); padding-top: 18px; }
  .staff-bottom-nav { height: 72px; padding: 6px 8px max(6px,env(safe-area-inset-bottom)); position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid #d5dfe6; background: rgba(255,255,255,.97); }
  .staff-bottom-nav button { border: 0; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 800; }
  .staff-bottom-nav button span { display: block; width: 24px; height: 24px; margin: 0 auto 2px; border-radius: 7px; line-height: 24px; background: #edf2f5; }
  .staff-bottom-nav button.active { color: var(--navy); }
  .staff-bottom-nav button.active span { color: white; background: var(--orange); }
  .staff-tabs { display: none; }
  .staff-draft-warning { align-items: stretch; flex-direction: column; }
  .staff-draft-warning .secondary-button { width: 100%; }
  .submitted-diff-row { grid-template-columns: 1fr auto 1fr; }
  .submitted-diff-row strong { grid-column: 1 / -1; }
  .staff-submit-bar.needs-submit { position: sticky; z-index: 20; bottom: 78px; align-items: stretch; flex-direction: column; }
  .staff-submit-bar.needs-submit .primary-button { width: 100%; }
  .calendar-primary-header { align-items: flex-start; flex-direction: column; }
  .calendar-primary-actions { width: 100%; justify-content: space-between; }
  .bulk-selection-toolbar { align-items: stretch; flex-direction: column; }
  .previous-pattern { align-items: stretch; flex-direction: column; }
  .pattern-button { min-height: 48px; }
  .bulk-time-panel { grid-template-columns: 1fr; gap: 14px; }
  .calendar-step-heading { align-items: flex-start; flex-direction: column; }
  .calendar-shortcuts { width: 100%; }
  .calendar-shortcuts button { flex: 1; }
  .calendar-day { min-height: 74px; padding: 6px; }
  .calendar-day b { font-size: .62rem; }
  .calendar-day small { font-size: .58rem; }
  .day-editor-controls { grid-template-columns: 1fr; }
  .change-request-form { grid-template-columns: 1fr; }
  .change-request-note, .change-request-form > button { grid-column: 1; }
  .change-request-form > button { width: 100%; }
  .bulk-entry-body { grid-template-columns: 1fr; }
  .bulk-apply-bar { align-items: stretch; flex-direction: column; }
  .bulk-actions { display: grid; grid-template-columns: 1fr 1.35fr; }
  .bulk-actions button { min-height: 48px; padding: 0 9px; font-size: .78rem; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .primary-button { min-height: 50px; }
  .staff-submit-bar { padding-top: 14px; }
  .toast { right: 14px; bottom: 86px; left: 14px; text-align: center; }
}
@media (max-width: 560px) {
  .brand strong { font-size: .92rem; } .public-header .brand small { display: none; }
  .public-header-actions { gap: 8px; }
  .public-header-actions .header-guide { display: none; }
  .portal-hero h1 { font-size: 2.2rem; }
  .portal-main { width: min(100% - 28px,1160px); }
  .public-header-actions .demo-badge { display: none; }
  .header-signup, .header-login { padding: 0 10px; font-size: .7rem; }
  .role-card { min-height: 290px; padding: 24px; } .role-link { left: 24px; }
  .flow-strip { grid-template-columns: 1fr; }
  .auth-card { padding: 23px 18px; }
  .app-header .account-chip { padding: 5px 8px; }
  .role-assignments { grid-template-columns: 1fr; }
  .coverage-row { grid-template-columns: 92px 1fr; }
  .coverage-status { grid-column: 1 / -1; }
  .shortage-item { grid-template-columns: 64px 1fr; }
  .shortage-item b { grid-column: 2; }
  .employee-setting summary { grid-template-columns: 1fr auto; }
  .active-badge { display: none; }
  .employee-setting-body { grid-template-columns: 1fr; }
  .employee-setting-body .toggle-label { grid-column: 1; }
  .requirement-row { grid-template-columns: 1fr; }
  .requirement-row > strong { grid-column: 1; }
  .timeline-panel, .share-board-panel { padding-right: 12px; padding-left: 12px; }
  .share-board-preview { padding: 7px; }
  .pattern-copy { flex-direction: column; }
  .method-number { align-self: flex-start; }
  .calendar-editor { padding-right: 12px; padding-left: 12px; }
  .calendar-primary-header { margin-bottom: 10px; gap: 10px; }
  .calendar-primary-header h2 { font-size: 1.25rem; }
  .bulk-mode-button { min-height: 38px; padding: 0 10px; font-size: .7rem; }
  .calendar-guide { padding: 9px 10px; }
  .shift-calendar { gap: 3px; }
  .calendar-day { min-height: 68px; border-radius: 8px; }
  .calendar-day.outside small { display: none; }
  .calendar-day.target b { line-height: 1.15; }
  .calendar-day.target small { margin-top: 2px; white-space: normal; line-height: 1.15; }
  .day-editor { padding: 14px; }
  .day-editor { scroll-margin-top: 72px; }
  .day-editor-controls { gap: 10px; }
  .bulk-entry { padding: 14px; }
  .bulk-entry-heading { align-items: flex-start; flex-direction: column; }
  .text-button { align-self: flex-end; }
  .modal-actions { flex-direction: column-reverse; }
  .guide-hero h1, .demo-hero h1 { font-size: 2.1rem; }
  .guide-section-heading { grid-template-columns: 42px 1fr; }
  .guide-section-heading > span { width: 42px; height: 42px; }
  .guide-step-list li, .demo-flow-list li { grid-template-columns: 32px 1fr; }
  .guide-step-list li > small, .demo-flow-list li > b { grid-column: 2; }
  .staff-guide-grid, .handoff-guide-grid { grid-template-columns: 1fr; }
  .guide-cta > div:last-child { flex-direction: column; }
  .guide-cta a { justify-content: center; }
  .handoff-heading { flex-direction: column; }
  .handoff-progress { width: 100%; height: 58px; }
}
@media print {
  .app-header, .side-nav, .bottom-nav, .page-heading .confirmed-stamp, .confirmed-toolbar, .toast { display: none !important; }
  .app-shell { display: block; } .content { padding: 0; } .view { display: none !important; } #view-confirmed { display: block !important; }
  .panel, .confirmed-day { box-shadow: none; break-inside: avoid; }
}