:root {
  --ink: #121212;
  --paper: #f5f1e7;
  --card: #fffdfa;
  --gold: #d1b126;
  --line: #e2d9bd;
  --soft-blue: #92b9e3;
  --soft-orange: #ff9c68;
  --soft-green: #91ce4b;
  --soft-lilac: #c5b5d8;
  --soft-yellow: #f6f482;
  --soft-peach: #ffc496;
  --danger: #c74343;
  --success: #19873b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-width: 320px; background: var(--paper); }
body.table-expanded { overflow: hidden; overscroll-behavior: none; }
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, .table-wrap:focus-visible { outline: 3px solid #1a74d7; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.app-shell { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
.topbar {
  position: sticky; z-index: 15; top: 0; display: grid; grid-template-columns: 48px 1fr auto; align-items: center;
  min-height: 70px; padding: max(10px, env(safe-area-inset-top)) 16px 10px; color: #fff; background: var(--ink); box-shadow: 0 4px 18px #0002;
}
.menu-button { display: grid; gap: 4px; width: 40px; padding: 11px 8px; border: 0; background: transparent; }
.menu-button span:not(.sr-only) { width: 23px; height: 2px; border-radius: 3px; background: var(--gold); }
.brand { min-width: 0; padding-right: 8px; }
.brand p, .eyebrow { margin: 0; color: var(--gold); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; }
.brand h1 { margin: 2px 0 0; overflow: hidden; color: #fff; font-size: 1rem; font-weight: 750; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.week-button { display: grid; gap: 2px; padding: 6px 0 6px 12px; border: 0; border-left: 1px solid #ffffff33; color: #fff; background: transparent; text-align: right; }
.week-button__label { color: #d9d9d9; font-size: 0.62rem; font-weight: 700; }
.week-button strong { color: var(--gold); font-size: 0.82rem; }
.report-week-picker { position: relative; display: grid; gap: 4px; }.report-week-picker > span { color: #756b59; font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }.report-week-picker__button { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 192px; min-height: 38px; padding: 7px 10px; border: 1px solid #d7c695; border-radius: 8px; color: #211a12; background: #fffdf7; font: inherit; font-size: .86rem; text-align: left; }.report-week-picker__button b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 5px; color: #fff; background: var(--ink); font-size: .86rem; }.week-calendar { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(318px, calc(100vw - 54px)); padding: 12px; border: 1px solid #d7c695; border-radius: 12px; background: #fffdf8; box-shadow: 0 12px 28px #332d2233; }.week-calendar__header { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 6px; text-align: center; }.week-calendar__header button { width: 32px; height: 32px; border: 1px solid #d7c695; border-radius: 7px; color: var(--ink); background: #fff9eb; font-size: 1.35rem; line-height: 1; }.week-calendar__header button:disabled { opacity: .35; cursor: default; }.week-calendar__header strong { font-size: .85rem; }.week-calendar__weekdays, .week-calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 10px; }.week-calendar__weekdays span { color: #756b59; font-size: .58rem; font-weight: 800; text-align: center; text-transform: uppercase; }.week-calendar__day, .week-calendar__blank { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 0; border-radius: 7px; font-size: .72rem; }.week-calendar__day { color: #a79d89; background: transparent; cursor: default; }.week-calendar__day.is-available { color: #3c3014; background: #f5e9ae; font-weight: 850; cursor: pointer; }.week-calendar__day.is-selected { color: #fff; background: var(--ink); box-shadow: inset 0 0 0 2px var(--gold); }.week-calendar > p { margin: 10px 0 0; color: #756b59; font-size: .63rem; line-height: 1.25; }.week-calendar__cancel { width: 100%; margin-top: 9px; min-height: 34px; border: 1px solid #d7c695; border-radius: 7px; color: #3b3222; background: #fff9eb; font-size: .72rem; font-weight: 850; }

main { width: min(100%, 920px); margin: 0 auto; padding: 24px 16px 42px; }
.loading, .error-state { min-height: 55vh; display: grid; place-content: center; text-align: center; color: #665e4e; }
.error-state h2 { margin: 7px 0; color: var(--ink); }
.page-intro { margin: 3px 0 18px; }
.page-intro h2, .section-hero h2 { margin: 5px 0; font-size: clamp(1.7rem, 6vw, 2.25rem); line-height: 1.05; letter-spacing: -0.04em; }
.page-intro > p:last-child { margin: 0; color: #716a5a; font-size: 0.94rem; }
.week-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid #dfd4b4; border-left: 5px solid var(--gold); border-radius: 12px; background: #fffaf0; }
.week-hero span { display: block; color: #736b57; font-size: 0.72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.week-hero strong { display: block; margin-top: 3px; font-size: 1rem; }
.text-button { border: 0; color: #29261e; background: transparent; font-size: 0.82rem; font-weight: 800; }.back-link { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 10px; margin: 0 0 18px; border: 1px solid #cdbd8d; border-radius: 8px; color: #312a1d; background: #fffdf7; box-shadow: 0 1px 0 #e9dfc8; font-size: .78rem; font-weight: 900; }
.text-button span { color: var(--gold); font-size: 1.1rem; }
.upload-panel { display: grid; gap: 12px; margin-top: 16px; padding: 15px; border: 1px solid #d9cfb5; border-radius: 13px; background: #fffdf8; box-shadow: 0 2px 0 #e8ddc244; }
.upload-panel.is-uploaded { border-left: 5px solid var(--success); }
.upload-panel__copy h3 { margin: 4px 0; font-size: 1rem; letter-spacing: -.02em; }.upload-panel__copy p:last-child { margin: 0; color: #716a5a; font-size: .78rem; line-height: 1.35; }
.drop-zone { width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px; border: 1.5px dashed #c7b476; border-radius: 10px; color: #332d22; background: #fff9e9; text-align: left; transition: background .16s ease, border-color .16s ease, transform .16s ease; }.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.is-dragging { border-color: #8b741b; background: #fff2c9; }.drop-zone:active { transform: scale(.99); }
.drop-zone__icon { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: var(--ink); font-size: 1.2rem; font-weight: 800; }.drop-zone strong, .drop-zone small { display: block; }.drop-zone strong { font-size: .78rem; }.drop-zone small { margin-top: 2px; color: #716a5a; font-size: .67rem; }
.upload-status { display: flex; align-items: baseline; gap: 6px; color: #756d5d; font-size: .68rem; }.upload-status span { font-weight: 750; }.upload-status strong { color: var(--ink); overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.upload-status .is-error { color: var(--danger); }.upload-status .is-loading { color: #756015; }.upload-status .is-success { color: var(--success); }
.reset-report { width: max-content; padding: 0; border: 0; color: #625a4c; background: transparent; font-size: .7rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.update-report-page { width: min(100%, 620px); margin: 4px auto 0; }.update-report-page .back-link { margin: 0 0 18px; color: var(--ink); }.update-report-page .upload-panel { margin-top: 20px; }.update-password { display: grid; gap: 5px; margin-top: 18px; color: #41392c; font-size: .74rem; font-weight: 800; }.update-password input { width: 100%; padding: 11px 12px; border: 1px solid #cfc3a2; border-radius: 9px; color: var(--ink); background: #fffdf8; font: inherit; font-weight: 500; }.update-password small { color: #716a5a; font-size: .67rem; font-weight: 500; }
.overview-group, .quick-links { margin-top: 28px; }
.section-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #5b5242; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.section-label span { display: block; width: 22px; height: 3px; background: var(--gold); }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.summary-card { min-height: 157px; display: flex; flex-direction: column; align-items: flex-start; padding: 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--card); text-align: left; box-shadow: 0 2px 0 #e8ddc244; transition: transform .16s ease, box-shadow .16s ease; }
.summary-card:active, .quick-link:active { transform: scale(.98); }
.summary-card--positive { border-top: 4px solid var(--success); }
.summary-card--negative { border-top: 4px solid var(--danger); }
.summary-card__label { min-height: 33px; color: #625a4c; font-size: .73rem; font-weight: 760; line-height: 1.2; }
.summary-card strong { margin-top: 5px; font-size: clamp(1.22rem, 5vw, 1.8rem); letter-spacing: -.045em; line-height: 1; }
.trend { margin-top: auto; font-size: .69rem; font-weight: 850; line-height: 1.2; }
.trend--positive { color: var(--success); }.trend--negative { color: var(--danger); }
.summary-card small { min-height: 30px; margin-top: 8px; color: #756d5d; font-size: .65rem; line-height: 1.3; }
.quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quick-links .section-label { grid-column: 1 / -1; }
.quick-link { display: grid; grid-template-columns: 25px 1fr 12px; align-items: center; gap: 7px; min-height: 52px; padding: 8px 11px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; color: var(--ink); background: #fffdf8; font-size: .74rem; font-weight: 800; text-align: left; }
.quick-link > :last-child { color: #887c5c; font-size: 1.2rem; }
.quick-link__icon, .menu-item__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; background: var(--ink); font-size: .78rem; font-weight: 900; }

.section-hero { margin: -24px -16px 0; padding: 19px 16px 22px; color: #fff; background: var(--ink); }
.section-hero .eyebrow { color: #f6d34b; }.section-hero h2 { color: #fff; }
.section-hero .back-link { border-color: #ffffff55; color: #fff; background: #ffffff18; box-shadow: none; }
.section-hero__title { display: flex; align-items: center; gap: 12px; }
.section-hero__icon { display: grid; flex: 0 0 auto; place-items: center; width: 43px; height: 43px; border-radius: 12px; color: var(--ink); background: var(--gold); font-size: 1.2rem; font-weight: 900; }
.section-hero.accent-orange .section-hero__icon, .section-hero.accent-peach .section-hero__icon, .section-hero.accent-burnt .section-hero__icon { background: var(--soft-orange); }
.section-hero.accent-green .section-hero__icon, .section-hero.accent-lime .section-hero__icon { background: var(--soft-green); }.section-hero.accent-blue .section-hero__icon, .section-hero.accent-royal .section-hero__icon, .section-hero.accent-sky .section-hero__icon { background: var(--soft-blue); }.section-hero.accent-lavender .section-hero__icon, .section-hero.accent-lilac .section-hero__icon { background: var(--soft-lilac); }
.week-select { display: grid; gap: 4px; margin-top: 20px; }
.week-select span { color: #e4dcc9; font-size: .65rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.week-select select { width: 100%; appearance: none; padding: 11px 38px 11px 12px; border: 1px solid #ffffff55; border-radius: 9px; color: #fff; background: #ffffff18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; font-size: .9rem; font-weight: 750; }
.week-select option { color: #111; }
.selected-week { display: flex; align-items: baseline; gap: 7px; padding: 14px 0 1px; color: #756b59; font-size: .78rem; }.selected-week strong { color: var(--ink); font-size: .95rem; }
.metric-groups { margin-top: 18px; }
.metric-group { margin: 0 0 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: 0 2px 0 #e8ddc255; }
.metric-group h3 { margin: 0; padding: 10px 13px; background: var(--soft-peach); color: #31271d; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.metric-group.band-2 h3 { background: var(--soft-blue); }.metric-group.band-3 h3 { background: var(--soft-lilac); }.metric-group.band-4 h3 { background: var(--soft-yellow); }
.accent-green .metric-group h3, .accent-lime .metric-group h3 { background: var(--soft-green); }.accent-blue .metric-group h3, .accent-royal .metric-group h3, .accent-sky .metric-group h3 { background: var(--soft-blue); }.accent-lavender .metric-group h3, .accent-lilac .metric-group h3 { background: var(--soft-lilac); }.accent-burnt .metric-group h3 { background: var(--soft-orange); }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-card { min-height: 86px; display: flex; flex-direction: column; justify-content: space-between; padding: 11px 12px; border-right: 1px solid #eee5ce; border-bottom: 1px solid #eee5ce; }.metric-card:nth-child(2n) { border-right: 0; }.metric-card:nth-last-child(-n + 2) { border-bottom: 0; }
.metric-card span { color: #716858; font-size: .68rem; font-weight: 700; line-height: 1.18; }.metric-card strong { margin-top: 7px; font-size: clamp(1rem, 4.6vw, 1.35rem); letter-spacing: -.035em; line-height: 1; }.metric-card.sheet-style { background: var(--sheet-fill); color: var(--sheet-colour); font-weight: var(--sheet-weight); }.metric-card.sheet-style strong { color: var(--sheet-colour); }
.metric-card.comparison-positive { background: #c6efce; }.metric-card.comparison-positive strong { color: #006100; }.metric-card.comparison-negative { background: #ffc7ce; }.metric-card.comparison-negative strong { color: #9c0006; }
.history-section { margin-top: 28px; }.history-section__heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }.history-section h3 { margin: 3px 0 0; font-size: 1.15rem; letter-spacing: -.03em; }.swipe-hint { color: #827967; font-size: .7rem; font-weight: 750; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; -webkit-overflow-scrolling: touch; }.table-wrap table { min-width: 760px; border-collapse: collapse; font-size: .7rem; }.table-wrap th, .table-wrap td { padding: 9px 11px; border-right: 1px solid #e8dfc8; border-bottom: 1px solid #e8dfc8; white-space: nowrap; text-align: right; }.table-wrap thead th { position: sticky; top: 0; color: #261f17; background: #f5dab0; font-weight: 900; text-align: right; }.table-wrap thead th:first-child { position: sticky; left: 0; z-index: 3; color: #211e17; background: #d8b82d; text-align: left; }.table-wrap th.band-2 { background: #b4d0ec; }.table-wrap th.band-3 { background: #d1c2e1; }.table-wrap th.band-4 { background: #f7efa4; }.table-wrap tbody th { position: sticky; left: 0; z-index: 2; background: #fffdf8; font-weight: 800; text-align: left; }.table-wrap tbody td.sheet-style { background: var(--sheet-fill); color: var(--sheet-colour); font-weight: var(--sheet-weight); }.table-wrap tbody tr.is-selected > th, .table-wrap tbody tr.is-selected > td { box-shadow: inset 0 2px 0 #217346, inset 0 -2px 0 #217346; }.table-wrap tbody tr.is-selected > th:first-child { box-shadow: inset 2px 0 0 #217346, inset 0 2px 0 #217346, inset 0 -2px 0 #217346; }.table-wrap tbody tr.is-selected > td:last-child { box-shadow: inset -2px 0 0 #217346, inset 0 2px 0 #217346, inset 0 -2px 0 #217346; }.table-wrap tbody tr:last-child td, .table-wrap tbody tr:last-child th { border-bottom: 0; }
.table-wrap tbody td.comparison-positive, .table-wrap tbody tr.is-selected td.comparison-positive { color: #006100; background: #c6efce; font-weight: 850; }.table-wrap tbody td.comparison-negative, .table-wrap tbody tr.is-selected td.comparison-negative { color: #9c0006; background: #ffc7ce; font-weight: 850; }
.table-expand-close { display: none; }
.table-wrap.is-expanded { --table-toolbar-height: calc(48px + env(safe-area-inset-top)); position: fixed; z-index: 60; top: 0; right: 0; left: 0; height: var(--expanded-table-height, 100dvh); max-height: var(--expanded-table-height, 100dvh); overflow-x: auto; overflow-y: auto; padding: 0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border: 0; border-radius: 0; background: var(--paper); -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: auto; }
.table-wrap.is-expanded .table-expand-close { position: fixed; z-index: 80; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: inline-flex; align-items: center; min-height: 36px; padding: 8px 11px; border: 1px solid #312b20; border-radius: 9px; color: #fff; background: var(--ink); box-shadow: 0 2px 8px #0003; font-size: .72rem; font-weight: 800; }
.table-wrap.is-expanded::before { content: ""; position: sticky; z-index: 5; top: 0; left: 0; display: block; width: 100%; height: var(--table-toolbar-height); background: var(--paper); }.table-wrap.is-expanded table { width: max-content; min-width: max(760px, 100%); margin-top: 0; font-size: clamp(.7rem, 1.7vw, .9rem); }.table-wrap.is-expanded th, .table-wrap.is-expanded td { padding: clamp(8px, 1.7vw, 13px) clamp(10px, 2vw, 16px); }.table-wrap.is-expanded .table-group-row th { top: var(--table-toolbar-height); }.table-wrap.is-expanded .table-column-row th { top: calc(var(--table-toolbar-height) + 36px); }
.table-wrap thead .table-group-row th { position: sticky; top: 0; z-index: 3; padding-top: 8px; padding-bottom: 8px; text-align: center; vertical-align: middle; }.table-wrap thead .table-group-row th:first-child { z-index: 4; }.table-wrap thead .table-column-row th { position: sticky; top: 34px; z-index: 2; text-align: center; }.table-wrap thead .table-column-row th:first-child { left: auto; z-index: 2; color: #261f17; }.table-wrap thead .table-group-row th.table-band-1 { background: #d8b82d; }.table-wrap thead .table-group-row th.table-band-2 { background: #8fb5e0; }.table-wrap thead .table-group-row th.table-band-3 { background: #f5dab0; }.table-wrap thead .table-group-row th.table-band-4 { background: #cfc0df; }.table-wrap thead .table-group-row th.table-band-5 { background: #f7efa4; }.table-wrap thead .table-group-row th.table-band-6 { background: #c8bd8c; }.table-wrap thead .table-group-row th.table-band-7 { background: #ceb5c9; }.table-wrap thead .table-column-row th.table-band-2 { background: #b4d0ec; }.table-wrap thead .table-column-row th.table-band-3 { background: #f9ead2; }.table-wrap thead .table-column-row th.table-band-4 { background: #ded4e8; }.table-wrap thead .table-column-row th.table-band-5 { background: #fff7bc; }.table-wrap thead .table-column-row th.table-band-6 { background: #ddd6b2; }.table-wrap thead .table-column-row th.table-band-7 { background: #e1cddb; }

.drawer-backdrop { position: fixed; z-index: 20; inset: 0; background: #111a; opacity: 0; transition: opacity .22s ease; }.drawer-backdrop.is-visible { opacity: 1; }
.menu-drawer { position: fixed; z-index: 25; top: 0; bottom: 0; left: 0; width: min(86vw, 360px); display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 14px 16px; transform: translateX(-105%); color: #fff; background: var(--ink); box-shadow: 7px 0 30px #0004; transition: transform .22s ease; }.menu-drawer.is-open { transform: translateX(0); }.menu-button[hidden], .week-button[hidden] { display: none !important; }
.drawer-heading { display: flex; align-items: start; justify-content: space-between; padding: 2px 5px 17px; border-bottom: 1px solid #ffffff2f; }.drawer-heading p { margin: 0; color: var(--gold); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }.drawer-heading h2 { margin: 4px 0 0; font-size: 1.25rem; }.close-button { width: 33px; height: 33px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #ffffff3d; border-radius: 50%; color: #fff; background: transparent; font-size: 1.5rem; line-height: 1; }.close-button > span { display: block; line-height: 1; transform: translateY(-4px); }
.menu-drawer nav { overflow-y: auto; padding-top: 14px; }.menu-item { width: 100%; display: grid; grid-template-columns: 30px 1fr 13px; align-items: center; gap: 8px; padding: 11px 8px; border: 0; border-bottom: 1px solid #ffffff15; border-radius: 7px; color: #e9e4d9; background: transparent; font-size: .86rem; font-weight: 720; text-align: left; }.menu-item--update { margin: 5px 0 8px; border: 1px solid #ffffff38; color: #fff6c6; background: #ffffff0a; }.menu-item--update .menu-item__icon { color: #1a1814; background: var(--gold); }.menu-item.is-active { color: #1a1814; background: var(--gold); }.menu-item.is-active .menu-item__icon { color: var(--gold); background: var(--ink); }.menu-item__chevron { color: #d4c9b6; font-size: 1.3rem; }.menu-item.is-active .menu-item__chevron { color: #1a1814; }.drawer-footer { margin-top: auto; padding: 14px 5px 0; color: #aca392; font-size: .7rem; line-height: 1.4; }
.accent-orange { border-left-color: var(--soft-orange); }.accent-green, .accent-lime { border-left-color: var(--soft-green); }.accent-blue, .accent-royal, .accent-sky { border-left-color: var(--soft-blue); }.accent-lavender, .accent-lilac { border-left-color: var(--soft-lilac); }.accent-peach, .accent-burnt { border-left-color: var(--soft-orange); }.accent-orange .quick-link__icon, .quick-link.accent-orange .quick-link__icon { background: var(--soft-orange); color: #3a210f; }.quick-link.accent-green .quick-link__icon, .quick-link.accent-lime .quick-link__icon { background: var(--soft-green); color: #14210c; }.quick-link.accent-blue .quick-link__icon, .quick-link.accent-royal .quick-link__icon, .quick-link.accent-sky .quick-link__icon { background: var(--soft-blue); color: #102337; }.quick-link.accent-lavender .quick-link__icon, .quick-link.accent-lilac .quick-link__icon { background: var(--soft-lilac); color: #2f1f3d; }.quick-link.accent-peach .quick-link__icon, .quick-link.accent-burnt .quick-link__icon { background: var(--soft-orange); color: #3a210f; }

.auth-page { display: grid; min-height: calc(100dvh - 128px); place-items: center; padding: 24px 0; }.auth-card { width: min(100%, 430px); display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 8px 24px #59482513; }.auth-card h2 { margin: 0; font-size: 1.65rem; letter-spacing: -.04em; }.auth-card > p:not(.eyebrow) { margin: -5px 0 3px; color: #716858; font-size: .86rem; line-height: 1.45; }.auth-card label, .sensitive-access label, .admin-create label, .admin-user-card label { display: grid; gap: 6px; color: #41392c; font-size: .74rem; font-weight: 800; }.auth-card input, .sensitive-access input, .admin-create input, .admin-create select, .admin-user-card input, .admin-user-card select { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid #cfc3a2; border-radius: 8px; color: var(--ink); background: #fffdf8; font: inherit; font-size: .9rem; font-weight: 500; }.auth-submit, .admin-create button, .admin-user-card button, .sensitive-access button { min-height: 42px; padding: 10px 14px; border: 0; border-radius: 8px; color: #1a1814; background: var(--gold); font: inherit; font-size: .8rem; font-weight: 850; }.auth-link { justify-self: start; padding: 0; border: 0; color: #5a503f; background: transparent; font-size: .75rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }.auth-message { padding: 10px 12px; border-radius: 8px; color: #643b18; background: #fff1c5; font-size: .78rem; line-height: 1.35; }.drawer-footer { display: grid; gap: 7px; }.drawer-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.drawer-footer button { justify-self: start; padding: 0; border: 0; color: #fff6c6; background: transparent; font: inherit; font-size: .7rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.hub-page { display: grid; align-content: start; gap: 24px; min-height: calc(100dvh - 152px); padding: 10px 0 32px; }.hub-intro { max-width: 540px; }.hub-intro h2 { margin: 6px 0 8px; font-size: clamp(2rem, 8vw, 2.7rem); letter-spacing: -.055em; line-height: .98; }.hub-intro p:last-child { margin: 0; color: #716a5a; font-size: .95rem; line-height: 1.45; }.hub-menu { display: grid; gap: 12px; }.hub-menu-card { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 16px; border: 1px solid #d7c695; border-left: 5px solid var(--gold); border-radius: 14px; color: var(--ink); background: #fffdf8; box-shadow: 0 3px 0 #e7dcc044; text-align: left; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }.hub-menu-card:focus-visible { outline: 3px solid #1a74d7; outline-offset: 3px; }.hub-menu-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; color: #1d1a14; background: #f4df80; font-size: 1.35rem; font-weight: 900; }.hub-menu-card strong, .hub-menu-card small { display: block; }.hub-menu-card strong { font-size: 1rem; letter-spacing: -.015em; }.hub-menu-card small { margin-top: 4px; color: #716858; font-size: .75rem; line-height: 1.35; }.hub-menu-card__arrow { color: #a88d19; font-size: 1.8rem; line-height: 1; }
.admin-page { width: min(100%, 780px); margin: 4px auto 0; }.admin-page .page-intro { margin-bottom: 20px; }.sensitive-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .7fr) auto; align-items: end; gap: 10px; margin: 16px 0 22px; padding: 14px; border: 1px solid #d8c578; border-radius: 12px; background: #fff8d9; }.sensitive-access p { display: grid; gap: 2px; margin: 0; }.sensitive-access p strong { font-size: .82rem; }.sensitive-access p span, .sensitive-access small { color: #6e624b; font-size: .68rem; line-height: 1.3; }.sensitive-access__message { grid-column: 1 / -1; min-height: 1em; }.admin-create, .admin-people { margin-top: 24px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fffdf8; }.admin-create h3 { margin: 0 0 14px; font-size: 1rem; }.admin-create form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.admin-create .admin-section-picker, .admin-create button { grid-column: 1 / -1; }.admin-section-picker { display: grid; gap: 8px; color: #41392c; font-size: .74rem; font-weight: 800; }.access-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 9px; border: 1px solid #e3dac4; border-radius: 8px; background: #fffaf0; }.access-sections label { display: flex; align-items: center; gap: 6px; color: #514936; font-size: .69rem; font-weight: 650; }.access-sections input { width: 15px; min-height: 15px; padding: 0; accent-color: #217346; }.admin-people { padding-bottom: 10px; }.admin-loading { color: #716858; font-size: .8rem; }.admin-user-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 12px; padding: 13px; border: 1px solid #e3dac4; border-radius: 10px; background: #fffaf0; }.admin-user-card > div:first-child > strong { display: block; color: var(--ink); font-size: .85rem; }.admin-user-card > div:first-child > span, .admin-user-card__identity > span { display: block; margin-top: 3px; color: #716858; font-size: .7rem; word-break: break-word; }.admin-user-card p { grid-column: 1 / -1; margin: -3px 0 0; color: #716858; font-size: .72rem; }.admin-user-card__identity { min-width: 0; }.admin-user-card__controls { display: grid; grid-template-columns: repeat(2, minmax(112px, 1fr)); gap: 10px; }.admin-user-card .admin-section-picker { grid-column: 1 / -1; }.admin-user-card button { grid-column: 2; justify-self: end; }.admin-toggle { display: flex !important; align-items: center; gap: 7px !important; align-self: end; min-height: 42px; }.admin-toggle input { width: 16px; min-height: 16px; padding: 0; accent-color: #217346; }
.permission-editor { grid-column: 1 / -1; display: grid; gap: 9px; padding: 13px; border: 1px solid #ded2b2; border-radius: 10px; background: #fffaf0; }.permission-editor__intro { display: grid; gap: 3px; }.permission-editor__intro strong { color: #31271d; font-size: .8rem; }.permission-editor__intro span { color: #716858; font-size: .69rem; line-height: 1.35; }.permission-area, .permission-section { overflow: hidden; border: 1px solid #e5dcc8; border-radius: 8px; background: #fffdf8; }.permission-area > summary, .permission-section > summary { padding: 10px 11px; cursor: pointer; color: #3c3428; font-size: .76rem; font-weight: 850; }.permission-area > summary { background: #f4e6bd; }.permission-section > summary { background: #f9f4e6; }.permission-toggle { display: flex !important; align-items: center; gap: 7px !important; padding: 9px 11px; color: #41392c; font-size: .72rem !important; }.permission-toggle input, .permission-options input { width: 15px !important; min-height: 15px !important; padding: 0 !important; accent-color: #217346; }.permission-toggle select { min-height: 32px; margin-left: auto; padding: 4px 6px; border: 1px solid #d7c695; border-radius: 6px; color: #3e3528; background: #fffdf8; font: inherit; font-size: .68rem; }.permission-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 11px 11px; }.permission-options label { display: flex !important; align-items: start; gap: 6px; color: #5b5242; font-size: .68rem !important; font-weight: 650 !important; line-height: 1.25; }.permission-field-group { padding: 0 11px 11px; }.permission-field-group > strong { display: block; margin: 2px 0 7px; color: #63573f; font-size: .68rem; }.permission-field-group .permission-options { padding: 0; }.permission-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 11px 8px; }.permission-date-range[hidden] { display: none; }.permission-date-range label { display: grid !important; gap: 4px; color: #63573f; font-size: .66rem !important; font-weight: 750 !important; }.permission-date-range input { min-height: 32px !important; padding: 5px 6px !important; border: 1px solid #d7c695 !important; border-radius: 6px !important; color: #40372b !important; background: #fffdf8 !important; font: inherit !important; font-size: .68rem !important; }.permission-date-note { margin: 0; padding: 0 11px 11px; color: #776d5d; font-size: .65rem; line-height: 1.35; }.permission-empty, .permission-owner { grid-column: 1 / -1; margin: 0; padding: 10px; border-radius: 8px; color: #625a4c !important; background: #f6efdf; font-size: .72rem !important; }.admin-user-card > .permission-editor { grid-column: 1 / -1; }.admin-user-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px; }.admin-user-card__actions button, .admin-user-card > .preview-report-button { grid-column: auto; justify-self: auto; }.preview-report-button { color: #31271d !important; background: #e8dbc0 !important; }.preview-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 auto 20px; padding: 13px 15px; border: 1px solid #d0bc6c; border-radius: 11px; color: #31271d; background: #fff4c7; }.preview-banner div { display: grid; gap: 2px; }.preview-banner .eyebrow { margin: 0; }.preview-banner strong { font-size: .9rem; }.preview-banner span { color: #756641; font-size: .7rem; }.preview-banner button { flex: 0 0 auto; min-height: 38px; padding: 8px 11px; border: 0; border-radius: 8px; color: #fff; background: var(--ink); font: inherit; font-size: .72rem; font-weight: 800; }
.menu-item__badge, .hub-menu-card__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 5px; border-radius: 999px; color: #fff; background: #b64141; font-size: .66rem; font-weight: 900; vertical-align: middle; }.hub-menu-card--tasks .hub-menu-card__icon { color: #153414; background: #bce5c2; }.hub-menu-card--tasks { border-left-color: #57a364; }.hub-menu-card__badge { margin-left: 0; margin-right: -8px; }
.tasks-page { width: min(100%, 780px); margin: 4px auto 0; }.task-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(150px, .85fr); align-items: stretch; gap: 9px; margin: 16px 0; }.task-summary > div:not(.task-summary__actions) { display: grid; align-content: center; min-height: 76px; padding: 12px; border: 1px solid #ded2b2; border-radius: 11px; background: #fffdf8; }.task-summary strong { font-size: 1.45rem; line-height: 1; }.task-summary span { margin-top: 5px; color: #716858; font-size: .68rem; font-weight: 750; }.task-summary__actions { display: grid; gap: 7px; }.task-summary__actions button { width: 100%; padding: 10px 12px; border: 1px solid #1c1a15; border-radius: 10px; color: #fff; background: var(--ink); font: inherit; font-size: .73rem; font-weight: 850; }.task-summary__actions button:first-child:not(:only-child) { color: #1a1814; background: var(--gold); }.task-message { margin: 12px 0; padding: 11px 12px; border: 1px solid #d5c482; border-radius: 9px; color: #63522a; background: #fff4c7; font-size: .76rem; line-height: 1.35; }.task-create { margin: 18px 0 24px; overflow: hidden; border: 1px solid #d7c695; border-radius: 12px; background: #fffdf8; }.task-create > summary { padding: 13px 14px; cursor: pointer; color: #302719; background: #f4e6bd; font-size: .84rem; font-weight: 900; }.task-create form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 14px; }.task-create label, .task-complete-form label, .task-review-form label { display: grid; gap: 5px; color: #4a4030; font-size: .72rem; font-weight: 800; }.task-create label:nth-child(1), .task-create label:nth-child(2), .task-create fieldset, .task-create button { grid-column: 1 / -1; }.task-create input, .task-create textarea, .task-create select, .task-complete-form textarea, .task-review-form textarea { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid #cfc3a2; border-radius: 7px; color: var(--ink); background: #fffdf8; font: inherit; font-size: .8rem; font-weight: 500; resize: vertical; }.task-create label small { color: #756b59; font-size: .63rem; font-weight: 600; line-height: 1.3; }.task-create fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 9px; border: 1px solid #e3dac4; border-radius: 8px; }.task-create legend { padding: 0 4px; color: #4a4030; font-size: .72rem; font-weight: 800; }.task-create fieldset label { display: flex; align-items: center; gap: 6px; font-size: .7rem; }.task-create fieldset input { width: 15px; min-height: 15px; padding: 0; accent-color: #217346; }.task-list-section, .task-notifications { margin-top: 25px; }.task-list { display: grid; gap: 11px; margin-top: 10px; }.task-empty { margin: 10px 0 0; padding: 13px; border: 1px dashed #d8cfae; border-radius: 9px; color: #716858; background: #fffaf0; font-size: .78rem; }.task-card { padding: 14px; border: 1px solid #e7a6aa; border-left: 4px solid #c74343; border-radius: 11px; background: #fff9f9; }.task-card--awaiting_approval { border-left-color: #c74343; }.task-card--completed { border-color: #9bd2aa; border-left-color: #258946; background: #f7fdf8; }.task-card--declined { border-left-color: #c74343; }.task-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; }.task-status { display: inline-block; padding: 4px 7px; border-radius: 999px; color: #8d1f25; background: #ffd3d6; font-size: .62rem; font-weight: 900; }.task-status--awaiting_approval { color: #8d1f25; background: #ffd3d6; }.task-status--completed { color: #0c6227; background: #ccebd3; }.task-status--declined { color: #8d1f25; background: #ffd3d6; }.task-card__due { color: #766d5c; font-size: .67rem; font-weight: 700; text-align: right; }.task-card h3 { margin: 10px 0 5px; font-size: .98rem; letter-spacing: -.02em; }.task-card > p { margin: 0; color: #665e4e; font-size: .76rem; line-height: 1.4; }.task-card__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }.task-card__details div { padding: 8px; border-radius: 7px; background: #f8f3e8; }.task-card__details dt { color: #756c5c; font-size: .61rem; font-weight: 750; }.task-card__details dd { margin: 3px 0 0; color: #383126; font-size: .7rem; font-weight: 750; }.task-card__note { margin-top: 10px !important; padding: 9px; border-radius: 7px; background: #f5eedc; }.task-complete-form, .task-review-form { display: grid; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5dcc8; }.task-complete-form button, .task-review-form button { min-height: 38px; padding: 8px 11px; border: 0; border-radius: 8px; color: #1a1814; background: var(--gold); font: inherit; font-size: .74rem; font-weight: 850; }.task-review-form > div { display: flex; flex-wrap: wrap; gap: 8px; }.task-review-form .task-decline-button { color: #8e2025; background: #ffd3d6; }.task-notifications__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.task-notifications__heading button { padding: 0; border: 0; color: #5d5036; background: transparent; font: inherit; font-size: .69rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }.task-notification { display: grid; gap: 3px; margin-top: 7px; padding: 10px 11px; border: 1px solid #e2dac7; border-radius: 8px; background: #fffdf8; }.task-notification.is-unread { border-left: 4px solid #d1b126; background: #fff9e6; }.task-notification strong { font-size: .74rem; }.task-notification span { color: #665e4e; font-size: .7rem; line-height: 1.3; }.task-notification small { color: #817765; font-size: .61rem; }

.task-card h3 { margin: 11px 0 6px; font-size: 1.14rem; font-weight: 900; letter-spacing: -.025em; }
.task-status { padding: 6px 10px; font-size: .74rem; letter-spacing: .02em; }
.hub-menu-card--users { border-left-color: #8261ac; }.hub-menu-card--users .hub-menu-card__icon { color: #321d46; background: #dbcbed; }
.account-setup-note { grid-column: 1 / -1; margin: -2px 0 0; padding: 9px 10px; border-radius: 8px; color: #645a4c; background: #f7f0df; font-size: .71rem; line-height: 1.35; }
.admin-action-message { margin: 16px 0 0; padding: 10px 12px; border: 1px solid #d5c482; border-radius: 9px; color: #63522a; background: #fff4c7; font-size: .76rem; line-height: 1.35; }
.activity-page-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 13px; border: 1px solid #8c6ab6; border-radius: 9px; color: #39224f; background: #eee5f8; font: inherit; font-size: .77rem; font-weight: 900; }.activity-page-button span { font-size: 1.05rem; }
.user-account-card { align-items: start; }.user-activity { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid #e5dcc8; }.user-activity__summary { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #6a604f; font-size: .68rem; line-height: 1.35; }.user-activity__summary b { color: #31271d; font-size: .82rem; }.user-activity p { margin: 0; color: #786f60; font-size: .68rem; }.user-activity details { overflow: hidden; border: 1px solid #e4dbc6; border-radius: 8px; background: #fffdf8; }.user-activity summary { padding: 8px 9px; cursor: pointer; color: #4e4536; font-size: .7rem; font-weight: 850; }.user-activity ul { display: grid; gap: 7px; margin: 0; padding: 0 9px 9px; list-style: none; }.user-activity li { display: grid; gap: 1px; padding-top: 7px; border-top: 1px solid #eee5d5; }.user-activity li strong { color: #40372b; font-size: .69rem; }.user-activity li span { color: #786f60; font-size: .64rem; }

@media (orientation: landscape) { .table-wrap.is-expanded { --table-toolbar-height: calc(42px + env(safe-area-inset-top)); padding: 0 max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }.table-wrap.is-expanded .table-expand-close { top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); min-height: 32px; padding: 6px 9px; }.table-wrap.is-expanded table { min-width: max(720px, 100%); margin-top: 0; font-size: clamp(.68rem, 2.2vh, .84rem); }.table-wrap.is-expanded th, .table-wrap.is-expanded td { padding: clamp(7px, 1.8vh, 10px) clamp(9px, 1.7vw, 14px); } }
@media (max-width: 560px) { .sensitive-access { grid-template-columns: 1fr; }.sensitive-access button { width: 100%; }.admin-create form, .admin-user-card { grid-template-columns: 1fr; }.admin-user-card__controls { grid-template-columns: 1fr; }.admin-user-card button { grid-column: 1; width: 100%; }.access-sections, .permission-options, .permission-date-range, .task-create form, .task-create fieldset, .task-card__details { grid-template-columns: 1fr; }.admin-user-card__actions { justify-content: stretch; }.preview-banner { align-items: stretch; flex-direction: column; }.preview-banner button { width: 100%; }.task-summary { grid-template-columns: 1fr 1fr; }.task-summary__actions { grid-column: 1 / -1; } }
@media (min-width: 620px) { main { padding: 34px 28px 58px; }.section-hero { margin: -34px -28px 0; padding: 26px 28px 28px; }.summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.summary-grid--feature { grid-template-columns: repeat(4, minmax(0, 1fr)); }.quick-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }.metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.metric-card:nth-child(2n) { border-right: 1px solid #eee5ce; }.metric-card:nth-child(3n) { border-right: 0; }.metric-card:nth-last-child(-n + 2) { border-bottom: 1px solid #eee5ce; }.metric-card:nth-last-child(-n + 3) { border-bottom: 0; } }
@media (min-width: 980px) { .topbar { padding-left: 28px; padding-right: 28px; }.week-button { min-width: 140px; }.summary-card:hover, .quick-link:hover { transform: translateY(-2px); box-shadow: 0 7px 18px #756f5b22; }.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.metric-card:nth-child(3n) { border-right: 1px solid #eee5ce; }.metric-card:nth-child(4n) { border-right: 0; }.metric-card:nth-last-child(-n + 3) { border-bottom: 1px solid #eee5ce; }.metric-card:nth-last-child(-n + 4) { border-bottom: 0; } }