:root {
  --ink: #18231f;
  --muted: #69736f;
  --paper: #f5f3ee;
  --panel: #fffdfa;
  --line: #dcded7;
  --england: #365b75;
  --england-dark: #24455d;
  --scotland: #d89a32;
  --abroad: #7f6147;
  --ill: #d66d5d;
  --green: #277861;
  --shadow: 0 18px 50px rgb(45 57 50 / 8%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 5%, rgb(216 154 50 / 10%), transparent 25rem),
    var(--paper);
  font: 15px/1.45 "DM Sans", sans-serif;
}

button, input { font: inherit; }
button { color: inherit; }

.site-header {
  height: 74px;
  padding: 0 clamp(22px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(24 35 31 / 10%);
}

.brand {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  letter-spacing: -.02em;
}

.brand-mark { width: 25px; height: 25px; display: flex; overflow: hidden; border-radius: 50%; transform: rotate(-25deg); }
.brand-mark i { flex: 1; background: var(--england); }
.brand-mark i:nth-child(2) { background: var(--scotland); }
.brand-mark i:last-child { background: var(--abroad); }

.header-note { color: var(--muted); display: flex; align-items: center; gap: 8px; font-size: 13px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4f9d74; box-shadow: 0 0 0 4px rgb(79 157 116 / 12%); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.logout-form { margin: 0; }
.logout-form button { padding: 6px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 600; }
.logout-form button:hover { color: var(--ink); border-color: var(--england); }

.auth-body { min-height: 100vh; }
.auth-main { min-height: calc(100vh - 74px); display: grid; place-items: center; padding: 38px 22px; }
.login-panel { width: min(100%, 430px); padding: clamp(28px, 5vw, 46px); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.login-panel h1 { margin-bottom: 18px; font-size: clamp(48px, 8vw, 68px); }
.login-copy { margin-bottom: 25px; color: var(--muted); line-height: 1.65; }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.login-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; }
.login-form input:focus { outline: 3px solid rgb(54 91 117 / 18%); border-color: var(--england); }
.login-form .primary-button { margin-top: 12px; }
.login-error { margin: 7px 0 0; color: var(--ill); font-size: 12px; }

main { width: min(1480px, calc(100% - 44px)); margin: 0 auto; }

.intro {
  padding: clamp(48px, 7vw, 88px) 0 42px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.eyebrow, .card-kicker {
  margin: 0 0 12px;
  color: var(--england);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 600 clamp(52px, 7vw, 96px)/.89 "Newsreader", serif; letter-spacing: -.055em; }
h1 em { color: var(--england); font-weight: 600; }
.intro-copy { color: var(--muted); width: min(100%, 470px); margin-bottom: 5px; font-size: 16px; line-height: 1.65; }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr .62fr; gap: 16px; margin-bottom: 22px; }
.summary-card { background: rgb(255 253 250 / 86%); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); }
.card-heading, .score-row, .summary-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.card-heading h2 { font: 600 23px/1.1 "Newsreader", serif; margin: 0; }
.card-kicker { color: var(--muted); margin-bottom: 7px; }
.status-pill { border: 1px solid rgb(54 91 117 / 25%); border-radius: 99px; padding: 5px 9px; color: var(--england); background: rgb(54 91 117 / 7%); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plan-pill { color: #8a5b0c; border-color: rgb(216 154 50 / 35%); background: rgb(216 154 50 / 10%); }

.score-row { align-items: end; margin: 25px 0 9px; }
.score-row > div:first-child { display: flex; align-items: baseline; gap: 6px; }
.score-row strong { font: 600 42px/1 "Newsreader", serif; }
.score-row span { color: var(--muted); font-size: 12px; }
.score-rate { font: 600 27px/1 "Newsreader", serif; color: var(--england); }
.forecast-card .score-rate { color: #9e6810; }

.progress { height: 8px; overflow: hidden; position: relative; border-radius: 99px; background: #e6e7e2; }
.progress span { display: block; height: 100%; background: var(--england); border-radius: inherit; transition: width .35s ease; }
.forecast-card .progress span { background: var(--scotland); }
.progress i { position: absolute; left: 40%; top: -2px; width: 2px; height: 12px; background: var(--ink); }
.summary-footer { color: var(--muted); margin-top: 10px; font-size: 11px; }
.summary-footer strong { color: var(--ill); font-weight: 600; }
.summary-footer strong.target-met { color: var(--green); }
.month-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 18px; padding-top: 15px; }
.month-breakdown span { padding: 0 13px; display: flex; justify-content: space-between; align-items: baseline; border-right: 1px solid var(--line); }
.month-breakdown span:first-child { padding-left: 0; }
.month-breakdown span:last-child { border: 0; padding-right: 0; }
.month-breakdown b { color: var(--muted); font-size: 10px; font-weight: 600; }
.month-breakdown strong { font: 600 17px "Newsreader", serif; }
.month-breakdown small { color: var(--muted); font: 10px "DM Sans", sans-serif; }

.location-counts { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.location-counts p { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0 0 2px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.location-counts p small { font-size: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.location-counts > span { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 7px; background: #f1f1ec; color: var(--muted); font-size: 9px; }
.location-counts > span i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
.location-counts > span strong { margin-left: auto; color: var(--ink); font: 600 14px "Newsreader", serif; white-space: nowrap; }

.selected-card { background: var(--ink); color: white; }
.selected-card .card-kicker { color: #aeb8b3; }
.selected-pill { color: #edc777; border-color: rgb(237 199 119 / 32%); background: rgb(237 199 119 / 9%); }
.selected-score-row { margin-top: 30px; }
.selected-card .score-row span, .selected-summary-footer { color: #aeb8b3; }
.selected-card .score-rate { color: #edc777; }
.selected-progress { background: rgb(255 255 255 / 13%); }
.selected-progress span { background: #edc777; }
.selected-progress i { background: white; }
.selected-summary-footer strong { color: #edc777; }
.selected-location-counts { border-color: rgb(255 255 255 / 14%); }
.selected-location-counts p { color: #aeb8b3; }
.selected-location-counts > span { color: #c6ceca; background: rgb(255 255 255 / 7%); }
.selected-location-counts > span strong { color: white; }
.selected-location-counts { grid-template-columns: 1fr 1fr; }

.chart-card { overflow: hidden; }
.chart-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.chart-heading h2 { margin-bottom: 5px; font: 600 23px/1.1 "Newsreader", serif; }
.chart-heading > div:first-child > p:last-child { max-width: 540px; margin: 0; color: var(--muted); font-size: 11px; }
.chart-legend { max-width: 370px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px 15px; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.chart-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-legend i { width: 15px; height: 9px; display: inline-block; border-radius: 2px; }
.chart-legend .bar-key { background: var(--england); }
.chart-legend .line-key { height: 0; border-top: 2px solid var(--ink); border-radius: 0; }
.chart-legend .target-line-key { height: 0; border-top: 2px dashed var(--ill); border-radius: 0; }
.chart-legend .england-key { background: var(--england); }
.chart-legend .scotland-key { background: var(--scotland); }
.chart-legend .abroad-key { background: var(--abroad); }
.chart-legend .unassigned-key { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.chart-scroll { margin: 17px -4px -5px; overflow-x: auto; overscroll-behavior-inline: contain; }
.chart-canvas { min-width: 820px; }
.chart-canvas svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid-line { stroke: #dedfd9; stroke-width: 1; }
.chart-axis-label, .chart-month-label { fill: var(--muted); font: 9px "DM Sans", sans-serif; }
.chart-month-label { font-size: 8px; }
.selected-month-label { fill: var(--ink); font-weight: 700; }
.selected-chart-band { fill: rgb(216 154 50 / 8%); }
.attendance-bar { fill: var(--england); opacity: .88; }
.selected-attendance-bar { fill: var(--scotland); opacity: 1; }
.average-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.average-point { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.target-chart-line { stroke: var(--ill); stroke-width: 1.5; stroke-dasharray: 5 5; }
.target-chart-label { fill: var(--ill); font: 600 8px "DM Sans", sans-serif; }
.location-segment { opacity: .92; }
.selected-location-frame { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }

.financial-year-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, .58fr) 1.42fr; gap: 8px 28px; align-items: center; }
.financial-year-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.financial-year-heading h2 { margin-bottom: 5px; font: 600 23px/1.1 "Newsreader", serif; }
.financial-year-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.financial-locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.financial-location { padding: 13px 15px; border-radius: 10px; background: #f1f1ec; }
.financial-location-name { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.financial-location-name i { width: 8px; height: 8px; border-radius: 50%; }
.financial-location > div:nth-child(2) { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin: 8px 0; }
.financial-location strong { font: 600 20px "Newsreader", serif; }
.financial-location > div:nth-child(2) span { color: var(--muted); font: 600 16px "Newsreader", serif; }
.financial-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #dddeda; }
.financial-progress span { display: block; height: 100%; border-radius: inherit; }
.england-financial .financial-progress span { background: var(--england); }
.scotland-financial .financial-progress span { background: var(--scotland); }
.abroad-financial .financial-progress span { background: var(--abroad); }
.financial-note { grid-column: 2; margin: 0; color: var(--muted); font-size: 9px; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.calendar-column { min-width: 0; display: grid; gap: 22px; }
.calendar-panel, .editor-panel { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.calendar-panel { padding: clamp(18px, 2.5vw, 30px); }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: end; margin-bottom: 25px; }
.month-title-row { display: flex; align-items: center; gap: 13px; }
.month-title-row h2 { min-width: 185px; margin: 0; text-align: center; font: 600 29px "Newsreader", serif; }
.icon-button, .text-button { border: 1px solid var(--line); background: white; cursor: pointer; }
.icon-button { width: 32px; height: 32px; border-radius: 50%; }
.icon-button:hover, .text-button:hover { border-color: var(--england); }
.calendar-actions { display: flex; align-items: center; gap: 14px; }
.selected-month-score { text-align: right; display: grid; }
.selected-month-score strong { font: 600 19px "Newsreader", serif; }
.selected-month-score span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.text-button { border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; }

.weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.weekday-row span { padding: 8px; }
.calendar-grid { border: 1px solid var(--line); border-width: 1px 0 0 1px; transition: opacity .15s; }
.calendar-grid.is-loading { opacity: .45; }
.day-cell { min-width: 0; min-height: 112px; position: relative; padding: 10px; overflow: hidden; text-align: left; border: 1px solid var(--line); border-width: 0 1px 1px 0; background: #F3F2EE; cursor: pointer; isolation: isolate; }
.day-cell::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .96; }
.day-cell:hover { outline: 2px solid rgb(24 35 31 / 32%); outline-offset: -6px; z-index: 2; }
.day-cell.selected { outline: 2px solid var(--ink); outline-offset: -6px; z-index: 3; }
.day-cell.empty { cursor: default; background: #f7f6f2; }
.day-cell.weekend { background: #f3f2ee; }
.day-cell.weekend::after { content: "Weekend"; position: absolute; bottom: 8px; right: 7px; color: rgb(24 35 31 / 35%); font-size: 8px; text-transform: uppercase; }
.day-number { display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 11px; font-weight: 700; border-radius: 50%; }
.day-cell.today .day-number { color: white; background: var(--ink); }
.day-detail { position: absolute; left: 10px; bottom: 10px; display: grid; color: var(--ink); }
.day-detail strong { font-size: 10px; }
.day-detail span { font-size: 9px; opacity: .84; text-transform: capitalize; }
.day-detail.unassigned { color: #9ba19e; }
.entry-mark { position: absolute; right: 9px; top: 7px; color: var(--location-color); font: 900 22px/1 "DM Sans", sans-serif; letter-spacing: -3px; -webkit-text-stroke: .35px currentColor; }

.day-cell.location-england { --location-color: var(--england); }
.day-cell.location-scotland { --location-color: var(--scotland); }
.day-cell.location-abroad { --location-color: var(--abroad); }
.day-cell.attendance-in-office::before { background: var(--location-color); }
.day-cell.attendance-not-in-office { box-shadow: inset 0 0 0 3px var(--location-color); }
.day-cell.attendance-in-office .day-number { color: white; background: rgb(0 0 0 / 12%); }
.day-cell.attendance-in-office.today .day-number { color: white; background: var(--ink); }
.day-cell.attendance-in-office .entry-mark { color: rgb(255 255 255 / 88%); }
.day-cell.location-scotland.attendance-in-office .entry-mark { color: var(--ink); }
.day-cell.attendance-in-office .day-detail { color: white; }
.day-cell.location-scotland.attendance-in-office .day-number,
.day-cell.location-scotland.attendance-in-office .day-detail { color: var(--ink); }
.day-cell.location-scotland.attendance-in-office.today .day-number { color: white; }
.day-cell[class*="location-"].weekend::after { color: rgb(24 35 31 / 42%); }

.legend { display: flex; flex-wrap: wrap; gap: 10px 17px; color: var(--muted); padding-top: 18px; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 14px; border-radius: 3px; }
.legend-swatch.england-location { background: var(--england); }
.legend-swatch.scotland-location { background: var(--scotland); }
.legend-swatch.abroad-location { background: var(--abroad); }
.legend-swatch.in-office { background: var(--england); }
.legend-swatch.not-in-office { box-shadow: inset 0 0 0 3px var(--england); }
.legend-icon { min-width: 18px; color: var(--ink); font-size: 17px; font-weight: 900; line-height: 1; text-align: center; -webkit-text-stroke: .25px currentColor; }

.editor-panel { padding: 26px; position: sticky; top: 18px; }
.editor-heading h2 { font: 600 25px/1.1 "Newsreader", serif; margin-bottom: 8px; }
.editor-heading > p:last-child { color: var(--muted); font-size: 12px; }
fieldset { margin: 24px 0 0; padding: 0; border: 0; }
legend { margin-bottom: 9px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.date-fields legend { grid-column: 1 / -1; }
.date-fields label { color: var(--muted); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.date-fields input { width: 100%; display: block; margin-top: 5px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 7px; color: var(--ink); background: white; font-size: 11px; }
.choice-grid { display: grid; gap: 7px; }
.location-choices { grid-template-columns: repeat(3, 1fr); }
.attendance-choices, .work-status-choices { grid-template-columns: 1fr 1fr; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { height: 46px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; font-size: 10px; font-weight: 600; }
.choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #f1f1ec; }
.choice input:focus-visible + span { outline: 3px solid rgb(54 91 117 / 25%); }
.choice.disabled { opacity: .4; }
.choice.disabled span { cursor: not-allowed; }
.choice i { width: 9px; height: 9px; border-radius: 50%; }
.england-dot { background: var(--england); }
.scotland-dot { background: var(--scotland); }
.abroad-dot { background: var(--abroad); }
.choice b { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #e8e9e4; font-size: 11px; }
.form-note { color: var(--muted); margin: 20px 0 12px; padding-top: 15px; border-top: 1px solid var(--line); font-size: 10px; }
.form-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.primary-button, .clear-button { border-radius: 8px; padding: 11px 14px; cursor: pointer; font-size: 11px; font-weight: 700; }
.primary-button { color: white; border: 1px solid var(--ink); background: var(--ink); }
.primary-button:hover { background: #2b3934; }
.clear-button { color: var(--muted); border: 1px solid var(--line); background: transparent; }
.form-message { min-height: 18px; margin: 8px 0 0; color: var(--green); font-size: 10px; }
.form-message.error { color: var(--ill); }

footer { width: min(1480px, calc(100% - 44px)); margin: 34px auto 28px; padding-top: 17px; border-top: 1px solid var(--line); display: flex; gap: 25px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .selected-card { grid-column: 1 / -1; }
  .workspace { grid-template-columns: 1fr; }
  .editor-panel { position: static; }
  .editor-panel form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .form-note, .form-actions, .form-message { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  main { width: min(100% - 24px, 1480px); }
  .site-header { padding: 0 16px; }
  .intro { align-items: start; flex-direction: column; padding-top: 45px; }
  h1 { font-size: 58px; }
  .summary-grid { grid-template-columns: 1fr; }
  .selected-card { grid-column: auto; }
  .financial-year-card { display: block; }
  .financial-locations { grid-template-columns: 1fr; margin-top: 18px; }
  .financial-note { margin-top: 10px; }
  .chart-heading { display: block; }
  .chart-legend { max-width: none; justify-content: flex-start; margin-top: 13px; }
  .chart-scroll { margin-top: 12px; }
  .location-counts { grid-template-columns: 1fr 1fr; }
  .location-counts > span:last-child { grid-column: 1 / -1; }
  .selected-location-counts > span:last-child { grid-column: auto; }
  .calendar-toolbar { align-items: start; gap: 15px; }
  .calendar-actions { align-items: end; flex-direction: column-reverse; }
  .day-cell { min-height: 78px; padding: 5px; }
  .entry-mark { right: 6px; top: 6px; font-size: 19px; }
  .day-detail { left: 5px; bottom: 5px; }
  .day-detail strong { display: none; }
  .day-detail span { max-width: 52px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .day-cell.weekend::after { display: none; }
  .editor-panel form { display: block; }
  footer { width: calc(100% - 24px); flex-wrap: wrap; }
}

@media (max-width: 470px) {
  .month-title-row { gap: 5px; }
  .month-title-row h2 { min-width: 130px; font-size: 23px; }
  .calendar-panel { padding: 12px; }
  .weekday-row span { font-size: 0; }
  .weekday-row span::first-letter { font-size: 9px; }
  .day-cell { min-height: 62px; }
  .day-detail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}