@charset "UTF-8";
:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #3c3427;
  --muted: #625e53;
  --line: #ddded7;
  --canvas: #f6f5ee;
  --page: #faf9f5;
  --accent: #295a88;
  --strong: #403626;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-size: 16px; line-height: 1.5; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; }
button { color: inherit; }
button, input, select { border-radius: 5px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #918465; outline-offset: 4px; }
[hidden] { display: none !important; }
svg { width: 19px; height: 19px; flex-shrink: 0; vertical-align: middle; }
[data-icon] { display: inline-flex; align-items: center; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 242px; padding: 35px 18px 24px; background: var(--canvas); border-right: 1px solid var(--line); overflow-y: auto; }
.brand { display: block; margin: 0 6px 30px; text-decoration: none; }
.brand-logo { display: block; width: 180px; max-width: 100%; height: auto; }
.library-link, .nav-link { display: flex; align-items: center; gap: 11px; text-decoration: none; font-size: 15px; min-height: 46px; padding: 10px 12px; border-radius: 5px; color: #454239; }
.library-link { color: var(--ink); margin-bottom: 22px; }
.tool-count { margin-left: auto; border: 1px solid #f0e2c1; border-radius: 4px; font-size: 12px; min-width: 22px; text-align: center; color: var(--muted); }
.nav-group { margin-bottom: 23px; }
.nav-group h2 { margin: 0 12px 7px; color: #6b6659; font-size: 12px; letter-spacing: 1.25px; font-weight: 600; text-transform: uppercase; }
.nav-link { margin: 2px 0; }
.nav-link svg { width: 18px; height: 18px; color: #716e61; }
.nav-link:hover, .library-link:hover { background: #f6eeda; }
.nav-link[aria-current="page"], .library-link[aria-current="page"] { background: #f4ead1; color: #4d4636; font-weight: 600; }
.nav-link[aria-current="page"] svg { color: #5b5340; }
.sidebar-bottom { margin-top: auto; padding: 36px 12px 0; display: flex; gap: 9px; color: #685e48; font-size: 12px; line-height: 1.8; }
.local-dot { width: 6px; height: 6px; border-radius: 50%; background: #7f7459; flex-shrink: 0; margin-top: 8px; }
.muted { color: #6d685b; }
.page-shell { margin-left: 242px; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 0 48px; background: #fff; }
.breadcrumb { min-width: 0; font-size: 13px; color: var(--muted); }
.breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.breadcrumb li + li::before { content: '/'; color: #948568; }
.breadcrumb a { color: var(--accent); text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--ink); }
.today-label { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #948767; }
.today-label svg { width: 15px; height: 15px; }
main { max-width: 1420px; padding: 43px 48px 0; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 31px; }
.eyebrow { margin: 0 0 11px; font-size: 12px; letter-spacing: 1.3px; color: var(--accent); font-weight: 700; }
h1 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -1.4px; line-height: 1.2; font-weight: 620; margin: 0 0 12px; }
.description { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 650px; }
.heading-icon { border: 1px solid #f3e8ce; width: 57px; height: 57px; border-radius: 12px; background: #faf6eb; display: grid; place-items: center; color: #7b7056; flex-shrink: 0; }
.heading-icon svg { width: 26px; height: 26px; }
h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.calculator-workspace { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid #f3e7ca; border-radius: 9px; overflow: hidden; background: #fff; }
.input-panel { min-width: 0; display: flex; flex-direction: column; padding: 26px 28px 0; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.text-button { display: inline-flex; gap: 5px; align-items: center; border: 0; padding: 4px 0; background: none; color: #8e8162; font-size: 12px; }
.text-button:hover { color: var(--accent); }
.text-button svg { width: 13px; height: 13px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.field { min-width: 0; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.field label { font-size: 14px; font-weight: 550; }
.field input, .field select { display: block; width: 100%; min-width: 0; height: 46px; padding: 0 11px; border: 1px solid #eeddb6; color: #3c372a; background: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.field input:hover, .field select:hover { border-color: #beaa7c; }
.field input[aria-invalid="true"] { border-color: #b25b4e; }
.field input[type="date"] { appearance: auto; }
.field input[type="number"] { font-variant-numeric: tabular-nums; }
.field select { padding-right: 24px; }
.field-wide, .check-field { grid-column: 1 / -1; }
.field-hint { margin-top: 7px; min-height: 18px; font-size: 12px; color: #978969; }
.today-button { background: none; border: 0; padding: 0; color: var(--accent); font-size: 12px; }
.check-field { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.6; }
.check-field input { accent-color: var(--accent); width: 16px; height: 16px; margin: 3px 0 0; flex-shrink: 0; }
.check-field small { display: block; font-size: 12px; color: #978969; }
.input-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 24px 0; }
.input-actions button { padding: 5px 8px; min-height: 30px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: #776c52; }
.input-actions button:hover { background: #f9f4e8; border-color: #ccbc98; }
.input-actions .swap { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; }
.swap svg { width: 14px; height: 14px; }
.input-footer { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 15px 0; border-top: 1px solid #f9f3e5; color: #978969; font-size: 12px; }
.input-footer svg { width: 13px; height: 13px; }
.result-panel { background: var(--strong); color: #fff; padding: 29px 32px 24px; display: flex; flex-direction: column; min-width: 0; position: relative; }
.result-label { text-transform: uppercase; letter-spacing: 1.65px; font-size: 12px; color: #d3c5a5; margin: 0 0 14px; display: flex; align-items: center; gap: 7px; }
.result-label::before { content: ''; width: 5px; height: 5px; background: #cbbb96; border-radius: 50%; }
.result-number { font-size: clamp(43px, 5.5vw, 78px); line-height: 1.15; letter-spacing: -3.6px; font-weight: 450; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-number.long { font-size: clamp(29px, 3vw, 48px); letter-spacing: -1.6px; }
.result-unit { font-size: 22px; letter-spacing: -.4px; margin-left: 10px; color: #cfc19f; white-space: nowrap; font-weight: 400; }
.result-secondary { font-size: 16px; color: #f5ebd5; margin: 14px 0 8px; }
.result-note { font-size: 12px; line-height: 1.7; color: #c4b186; margin: 0 0 29px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 19px; border-top: 1px solid #544d3b; }
.result-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; padding: 9px 12px; border: 1px solid #70654d; color: #f4e9cf; background: transparent; }
.result-actions button:first-child { background: #f7efdd; border-color: #f7efdd; color: #373226; }
.result-actions button:hover { background: #574f3d; color: #fff; }
.result-actions button:disabled { opacity: .45; cursor: default; }
.result-actions svg { width: 14px; height: 14px; }
.form-error { font-size: 14px; color: #a03e32; padding-bottom: 15px; }
.empty-result { margin: 27px 0; font-size: 25px; letter-spacing: -.5px; }
.detail-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 45px; margin-top: 35px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-heading > span { font-size: 12px; color: #b39c66; letter-spacing: 1.5px; }
.breakdown dl { margin: 0; border-top: 1px solid var(--line); }
.metric { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.metric dt { color: #7e7358; }
.metric dd { margin: 0; text-align: right; color: #443e30; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.calculation-context { color: #9b8e6f; font-size: 12px; margin: 12px 0 0; line-height: 1.7; }
.explanation h2 { margin-bottom: 16px; }
.explanation details { padding: 13px 0; border-bottom: 1px solid var(--line); }
.explanation details:first-child { border-top: 1px solid var(--line); }
.explanation summary { cursor: pointer; font-size: 14px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.explanation summary::-webkit-details-marker { display: none; }
.explanation summary::after { content: ''; width: 12px; height: 12px; margin-top: 4px; flex-shrink: 0; background: linear-gradient(#998b6c, #998b6c) center / 12px 2px no-repeat, linear-gradient(#998b6c, #998b6c) center / 2px 12px no-repeat; }
.explanation details[open] summary::after { background-size: 12px 2px, 0 0; }
.explanation details p { font-size: 12px; line-height: 1.85; color: #867a5d; margin: 11px 0 0; }
.related { margin-top: 38px; }
.section-heading a { font-size: 12px; color: #7c7156; text-decoration: none; }
.section-heading a:hover { text-decoration: underline; }
#related-tools { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.related-tool { display: flex; align-items: center; gap: 11px; text-decoration: none; padding: 19px 17px; border-right: 1px solid var(--line); min-width: 0; }
.related-tool:first-child { padding-left: 0; }
.related-tool:last-child { border-right: 0; }
.related-tool:hover { background: #faf5ea; }
.related-tool > svg { color: #958868; width: 19px; height: 19px; }
.related-tool strong { display: block; font-size: 14px; font-weight: 500; }
.related-tool small { display: block; font-size: 12px; color: #a09376; margin-top: 3px; }
.related-tool .arrow { margin-left: auto; font-size: 16px; color: #b9a371; }
.page-footer { margin-top: 39px; padding: 19px 0 25px; display: flex; gap: 19px; align-items: center; font-size: 12px; color: #b8a370; }
.page-footer > span:first-child { color: #84785c; font-weight: 600; }
.page-footer a { margin-left: auto; text-decoration: none; }
.search-box { border: 1px solid #eedeb8; border-radius: 6px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fff; }
.search-box:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.search-box input:focus, .search-box input:focus-visible { outline: none; box-shadow: none; }
.search-box > span { color: #9f9376; }
.search-box input { border: 0; background: transparent; width: 100%; min-width: 0; padding: 0; border-radius: 0; color: var(--ink); font-size: 16px; line-height: 1.5; }
.search-count { white-space: nowrap; font-size: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 21px 0 31px; }
.filters button { background: transparent; border: 1px solid var(--line); padding: 7px 17px; font-size: 14px; }
.filters button[aria-pressed="true"] { background: var(--strong); color: #fff; border-color: var(--strong); }
.directory-category { margin-top: 34px; }
.directory-category h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: #6b6557; margin-bottom: 16px; }
.directory-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.directory-tool { display: flex; align-items: flex-start; gap: 15px; text-decoration: none; padding: 25px 20px; border-bottom: 1px solid var(--line); }
.directory-tool:nth-child(odd) { border-right: 1px solid var(--line); padding-left: 0; }
.directory-tool:hover { background: #f9f4e8; }
.directory-tool > svg { margin-top: 4px; color: var(--accent); }
.directory-tool strong { font-size: 17px; font-weight: 650; }
.directory-tool p { font-size: 15px; margin: 8px 0 0; color: #514e45; line-height: 1.7; max-width: 58ch; }
.no-results { padding: 30px 0; color: var(--muted); }
.toast { position: fixed; bottom: 24px; left: calc(50% + 121px); transform: translateX(-50%); padding: 12px 22px; z-index: 40; background: #373227; color: #fff; box-shadow: 0 4px 20px #0002; border-radius: 7px; font-size: 14px; max-width: 90vw; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 50; padding: 12px 20px; background: #fff; }
.skip-link:focus { top: 12px; }
.mobile-toggle { display: none; }
.noscript { position: fixed; bottom: 0; width: 100%; padding: 18px; background: #fff1c9; z-index: 50; text-align: center; }
@media (min-width: 1500px) { main { padding-top: 55px; } .calculator-workspace { min-height: 345px; } .input-panel { padding: 30px 36px 0; } .result-panel { padding: 32px 38px 26px; } }
@media (max-width: 1150px) { .sidebar { width: 215px; padding-inline: 13px; } .brand { margin-inline: 7px; font-size: 18px; } .nav-link, .library-link { font-size: 15px; gap: 8px; padding-inline: 9px; } .page-shell { margin-left: 215px; } main { padding: 34px 28px 0; } .topbar { padding: 0 28px; } .input-panel { padding: 23px 20px 0; } .result-panel { padding: 26px 24px 22px; } .detail-layout { gap: 28px; } .result-number { font-size: 61px; } .result-unit { font-size: 20px; } .toast { left: calc(50% + 107px); } }
@media (max-width: 960px) { .calculator-workspace { grid-template-columns: 1fr; } .fields { gap: 18px; } .result-panel { min-height: 280px; } .result-number { font-size: 68px; } .result-number.long { font-size: 45px; } .detail-layout { grid-template-columns: 1fr; gap: 29px; } .heading-icon { display: none; } #related-tools { grid-template-columns: 1fr; } .related-tool { border-right: 0; border-bottom: 1px solid var(--line); padding: 15px 0; } .related-tool:last-child { border-bottom: 0; } .directory-grid { grid-template-columns: 1fr; } .directory-tool, .directory-tool:nth-child(odd) { padding-inline: 0; border-right: 0; } .today-label { display: none; } }
@media (max-width: 650px) { .sidebar { width: 250px; transform: translateX(-100%); top: 61px; transition: transform .18s; box-shadow: 8px 0 20px #2b271e10; padding-top: 22px; } body.menu-open .sidebar { transform: translateX(0); } .sidebar .brand { margin-bottom: 25px; } .page-shell { margin-left: 0; } .topbar { height: 61px; padding: 0 20px; justify-content: flex-start; position: sticky; top: 0; z-index: 25; } .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; padding: 0; background: transparent; border: 0; } .breadcrumb { font-size: 12px; gap: 10px; } main { padding: 30px 20px 0; } h1 { font-size: 30px; letter-spacing: -1px; } .eyebrow { font-size: 12px; } .description { font-size: 14px; } .page-heading { margin-bottom: 26px; } .input-panel { padding: 22px 19px 0; } .input-actions { margin-block: 20px; } .result-panel { padding: 26px 23px 24px; min-height: 290px; } .result-number { font-size: 66px; } .detail-layout { margin-top: 29px; } .page-footer { flex-wrap: wrap; gap: 9px 16px; } .page-footer a { margin-left: 0; flex-basis: 100%; } .toast { left: 50%; } .search-count { display: none; } }
@media (max-width: 370px) { main { padding-inline: 14px; } .fields { grid-template-columns: 1fr; } .input-actions .swap { flex-basis: 100%; margin-bottom: 4px; } .metric { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.range-calendar { margin-top: 28px; padding: 25px 28px 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.calendar-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.calendar-heading p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.calendar-jumps { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.calendar-jumps button, .calendar-pager button { background: #fff; border: 1px solid var(--line); color: var(--accent); padding: 6px 10px; font-size: 12px; min-height: 34px; }
.calendar-jumps button:hover, .calendar-pager button:hover:not(:disabled) { background: #f9f4e8; border-color: #ccbc98; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 0; margin-top: 8px; border-bottom: 1px solid var(--line); }
.calendar-toolbar label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.calendar-toolbar input { min-width: 0; max-width: 180px; height: 34px; padding: 4px 7px; border: 1px solid #eeddb6; background: #fff; color: var(--ink); font-size: 14px; }
.calendar-pager { display: flex; align-items: center; gap: 13px; }
.calendar-pager span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.calendar-pager button { font-size: 17px; line-height: 1; width: 34px; padding: 4px; }
.calendar-pager button:disabled { color: #d3c5a5; cursor: default; }
.calendar-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 38px; margin-top: 20px; }
.range-month { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.range-month caption { text-align: left; font-size: 15px; font-weight: 600; margin-bottom: 13px; }
.range-month th { font-size: 12px; color: #85795c; font-weight: 400; padding-bottom: 7px; }
.calendar-day { height: 38px; text-align: center; padding: 0; font-size: 14px; color: #a09477; }
.calendar-day.full { background: #f5ead2; color: #433d2f; }
.calendar-day.partial { background: repeating-linear-gradient(135deg, #f6edd9, #f6edd9 4px, #fdfbf6 4px, #fdfbf6 7px); color: #433d2f; }
.calendar-day > span { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; }
.calendar-day.endpoint > span { border: 1.5px solid #5b5340; border-radius: 50%; color: #3c372a; font-weight: 600; }
.calendar-day.none.endpoint > span { border-style: dashed; }
.calendar-day.full.endpoint > span { background: var(--strong); color: #fff; border-color: var(--strong); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; font-size: 12px; color: #776c53; }
.calendar-legend > span { display: flex; align-items: center; gap: 7px; }
.calendar-legend i { display: inline-block; width: 14px; height: 14px; border: 1px solid #d9ceb3; border-radius: 2px; }
.legend-full { background: #f5ead2; }
.legend-partial { background: repeating-linear-gradient(135deg, #f5ead2, #f5ead2 2px, #fff 2px, #fff 4px); }
.calendar-legend .legend-endpoint { border: 1.5px solid var(--accent); border-radius: 50%; }
.calendar-note { margin: 9px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
@media (max-width: 1150px) { .range-calendar { padding-inline: 20px; } .calendar-months { gap: 20px; } .calendar-heading { flex-wrap: wrap; gap: 12px; } }
@media (max-width: 760px) { .calendar-months { grid-template-columns: 1fr; gap: 25px; } .calendar-toolbar { align-items: flex-start; } }
@media (max-width: 650px) { .range-calendar { padding: 21px 18px 18px; } .calendar-toolbar { gap: 16px; } }

.calendar-nav-link { margin-bottom: 5px; }
.calculator-calendar-link { text-align: right; margin-top: 13px; font-size: 13px; color: var(--accent); }
.calculator-calendar-link a { text-decoration: none; }
.calculator-calendar-link a:hover { text-decoration: underline; }
.calendar-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; border-block: 1px solid var(--line); padding-block: 18px; }
.calendar-controls label { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 13px; }
.calendar-controls input { min-width: 0; max-width: 180px; padding: 7px 9px; border: 1px solid #eeddb6; background: #fff; color: var(--ink); font-size: 14px; }
#calendar-year { width: 92px; }
.calendar-controls .calendar-pager { margin-left: auto; }
.calendar-view-tabs { display: inline-flex; padding: 3px; background: #f8f1e2; border-radius: 6px; }
.calendar-view-tabs button { background: transparent; border: 0; padding: 7px 12px; font-size: 13px; color: #7a6e54; }
.calendar-view-tabs button[aria-pressed="true"] { color: var(--ink); background: #fff; box-shadow: 0 1px 3px #3631261c; }
.calendar-plain-button, .calendar-range-actions button { font-size: 12px; background: transparent; border: 1px solid #f0e2c0; padding: 7px 10px; min-height: 34px; }
.calendar-plain-button:hover, .calendar-range-actions button:hover { background: #f8f1e2; }
.calendar-plain-button:disabled { opacity: .45; cursor: default; }
.calendar-options { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 21px; }
.country-options { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 0; padding: 0; border: 0; }
.country-options legend { font-size: 12px; color: var(--muted); margin-bottom: 8px; padding: 0; }
.country-option { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.country-option input, #calendar-inclusive { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.country-dot { display: inline-block; border-radius: 50%; width: 7px; height: 7px; flex-shrink: 0; }
.country-dot.norway { background: #a74737; }
.country-dot.denmark { background: #865c9e; }
.country-dot.sweden { background: #30709a; }
.calendar-selection { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #f9f4e7; border: 1px solid #f2e6ca; padding: 18px 21px; border-radius: 6px; }
.calendar-selection .eyebrow { margin-bottom: 7px; }
#selection-status { margin: 0; font-size: 14px; color: #615844; }
.selection-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; flex-shrink: 0; max-width: 270px; }
.selection-actions label { display: flex; align-items: center; gap: 7px; width: 100%; font-size: 13px; margin-bottom: 2px; }
.calendar-lowdown { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 13px; }
.calendar-duration > strong { font-size: 34px; font-weight: 500; letter-spacing: -1px; }
.calendar-duration > strong span { font-size: 18px; color: var(--muted); letter-spacing: 0; }
.calendar-duration p { margin: 4px 0; font-size: 14px; }
.calendar-duration small { color: var(--muted); font-size: 12px; }
.calendar-workdays { display: flex; flex-direction: column; gap: 9px; }
.calendar-workdays > div { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; }
.calendar-workdays span { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.calendar-workdays strong { font-size: 13px; font-weight: 550; }
.calendar-workdays small { grid-column: 2; font-size: 12px; color: var(--muted); text-align: right; }
.calendar-range-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-top: 13px; border-top: 1px solid var(--line); }
.calendar-range-actions a { font-size: 13px; color: var(--accent); margin-left: auto; }
#calendar-coverage { border-left: 2px solid #d5c8a9; padding-left: 12px; margin-top: 20px; }
.calendar-feature .calendar-months { margin-top: 22px; }
.calendar-feature .range-month { border-spacing: 0 3px; }
.calendar-feature .range-month caption { font-size: 17px; padding-block: 8px; margin-bottom: 8px; }
.range-month .week-number { width: 29px; font-size: 11px; color: #b39c66; font-weight: 400; padding-right: 7px; font-variant-numeric: tabular-nums; }
.calendar-feature .calendar-day { position: relative; height: 48px; }
.calendar-day > button { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 45px; padding: 0; background: transparent; border: 0; border-radius: 0; color: #564e3b; font-size: 14px; }
.calendar-day > button > span:first-child { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; }
.calendar-day.weekend > button { color: #a46a58; }
.calendar-day.endpoint > button > span:first-child { outline: 1.5px solid var(--accent); outline-offset: -1px; }
.calendar-day.full.endpoint > button > span:first-child { color: white; background: var(--strong); outline-color: var(--strong); }
.calendar-day.none.endpoint > button > span:first-child { outline-style: dashed; }
.calendar-day > button[aria-current="date"] > span:first-child { box-shadow: inset 0 -2px #b88835; }
.calendar-day > button:hover { background: #47403112; }
.calendar-day > button:focus-visible { z-index: 1; outline-offset: -2px; border-radius: 3px; }
.calendar-day.range-preview { background: #e0d6bf; }
.calendar-day.pending-anchor > button > span:first-child { outline: 2px dashed var(--accent); }
.day-holidays { display: flex; height: 7px; gap: 3px; align-items: center; justify-content: center; }
.day-holidays .country-dot { width: 4px; height: 4px; }
.calendar-months.year-view { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.year-view .calendar-day, .year-view .calendar-day > button { height: 36px; }
.year-view .calendar-day > button { font-size: 12px; }
.year-view .calendar-day > button > span:first-child { width: 25px; height: 25px; }
.year-view .range-month caption { font-size: 14px; }
.year-view .range-month .week-number { width: 22px; font-size: 10px; padding-right: 3px; }
.legend-today { border-bottom: 2px solid #b88835 !important; }
.holiday-section { margin-top: 30px; }
#holiday-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.holiday-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; }
.holiday-row time { flex: 0 0 55px; font-variant-numeric: tabular-nums; color: var(--muted); }
.holiday-country { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); font-size: 11px; }
.holiday-row strong { display: block; font-weight: 500; }
.holiday-row small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.calendar-rules { font-size: 13px; color: var(--muted); line-height: 1.8; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 25px; }
.calendar-rules summary { cursor: pointer; color: var(--ink); font-size: 14px; }
.calendar-rules p { max-width: 85ch; }
.calendar-rules a { text-underline-offset: 3px; }
@media (max-width: 1200px) { .calendar-months.year-view { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calendar-selection { flex-wrap: wrap; } .selection-actions { max-width: none; } .selection-actions label { width: auto; margin-right: 10px; } }
@media (max-width: 960px) { .calendar-lowdown { grid-template-columns: 1fr; } .calendar-controls .calendar-pager { margin-left: 0; } #holiday-list { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .calendar-controls { gap: 13px; } .calendar-pager { gap: 8px; } .calendar-pager span { font-size: 11px; } .calendar-options { align-items: flex-start; } .calendar-selection { padding: 17px; } .calendar-range-actions a { margin: 6px 0 0; flex-basis: 100%; } .calendar-months.year-view { grid-template-columns: 1fr; } .year-view .calendar-day, .year-view .calendar-day > button { height: 42px; } .year-view .calendar-day > button { font-size: 14px; } }

.country-flag { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #342f241a; flex-shrink: 0; vertical-align: middle; }
.jurisdiction-groups { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.jurisdiction-groups .country-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jurisdiction-groups .country-options legend { margin-bottom: 9px; }
.jurisdiction-groups .country-option { padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: 13px; }
.country-option:has(input:checked) { border-color: #c6b58c; background: #faf6ec; }
.calendar-options { align-items: flex-start; }
.local-preference { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 21px; color: var(--muted); font-size: 12px; }
.local-preference p { margin: 0; flex: 1; min-width: 220px; }
.local-preference .text-button { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.local-preference .text-button:disabled { opacity: .45; cursor: default; }
.day-holidays { height: 9px; gap: 2px; }
.day-holidays .country-flag { width: 10px; height: 7px; border-radius: 0; }
.year-view .day-holidays { gap: 1px; }
.year-view .day-holidays .country-flag { width: 6px; height: 5px; }
.holiday-country .country-flag { width: 18px; height: 13px; }
.calendar-workdays .country-flag { width: 18px; height: 13px; }
.calendar-workdays > div { grid-template-columns: minmax(0, 1fr) auto; }
.holiday-country { min-width: 52px; }
@media (max-width: 1150px) { .calendar-options > .calendar-plain-button { align-self: flex-end; } .jurisdiction-groups { flex-basis: 100%; } }
@media (max-width: 650px) { .jurisdiction-groups .country-options { grid-template-columns: 1fr; } .jurisdiction-groups .country-option { min-height: 42px; } .country-option input { margin-right: 3px; } .year-view .day-holidays .country-flag { width: 10px; height: 7px; } }

.language-switch { display: flex; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; font-size: 12px; }
.language-switch a { padding: 6px 8px; color: var(--muted, #7d7257); text-decoration: none; border-radius: 4px; }
.language-switch a[aria-current] { color: var(--ink, #2d291f); background: #f7f0df; font-weight: 600; }
.language-switch a:hover { text-decoration: underline; }
.topbar .today-label { margin-left: 18px; }
@media (max-width: 850px) { .topbar .today-label { display: none; } }
@media (max-width: 650px) { .topbar { gap: 8px; } .breadcrumb { min-width: 0; font-size: 11px; } .language-switch { font-size: 11px; gap: 0; } .language-switch a { padding: 6px; } }
.not-found { max-width: 720px; margin: 15vh auto; padding: 24px; }
@media (max-width: 650px) {
  .mobile-toggle, .language-switch { flex-shrink: 0; }
  .topbar { height: auto; min-height: 61px; flex-wrap: wrap; padding-block: 10px; }
  .breadcrumb { flex: 1; min-width: 115px; }
  .breadcrumb ol { gap: 3px 6px; }
  .breadcrumb li { gap: 6px; }
}

/* Calendar: bounded month cards, clear states, compact year overview. */
.calendar-controls { background: #fff; border: 1px solid #d5c8aa; border-radius: 7px; padding: 14px 16px; }
.calendar-view-tabs { background: #f5ebd5; }
.calendar-view-tabs button[aria-pressed="true"] { background: #423c2e; color: #fff; box-shadow: none; border-radius: 4px; }
.calendar-pager span { color: #3c3629; font-weight: 600; }
.calendar-controls [data-calendar="today"] { background: #f8d57f; border-color: #c39b42; color: #312a18; font-weight: 650; }
.calendar-settings { margin-block: 12px; border: 1px solid #daceb3; border-radius: 7px; background: #fff; }
.calendar-settings > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; padding: 13px 16px; cursor: pointer; color: #443e30; font-size: 13px; font-weight: 600; list-style: none; }
.calendar-settings > summary::-webkit-details-marker { display: none; }
.calendar-settings > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); margin-left: auto; margin-right: 3px; }
.calendar-settings[open] > summary::after { transform: rotate(225deg); }
.calendar-settings[open] > summary { border-bottom: 1px solid #efdfbb; }
#settings-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 400; color: #70654d; }
#settings-summary > span { display: inline-flex; align-items: center; gap: 5px; }
#settings-summary .country-flag { width: 18px; height: 13px; }
.calendar-settings .calendar-options { padding: 18px 16px 12px; }
.calendar-settings .local-preference { margin: 0; padding: 0 16px 16px; }
.calendar-layers { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 14px 24px; padding: 16px; border-top: 1px solid #e0d7c1; background: #fcf9f1; }
.calendar-layers label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #494232; }
.calendar-layers .layer-toggle { flex-wrap: nowrap; }
.calendar-layers small { color: #7f7459; font-size: 11px; }
.calendar-layers input { width: 16px; height: 16px; accent-color: #544d3b; flex-shrink: 0; }
.calendar-layers select { min-width: 0; max-width: 100%; padding: 7px; background: #fff; border: 1px solid #cebf9b; border-radius: 4px; color: #433d2e; font-size: 12px; }
.calendar-selection { background: #f8f0df; border-color: #cebe9a; padding: 14px 17px; }
#selection-status { color: #4a4333; font-size: 13px; }
.calendar-feature .calendar-months { align-items: stretch; gap: 18px; margin-top: 17px; }
.calendar-month-card { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #cbbb95; border-radius: 7px; overflow: hidden; box-shadow: 0 2px 3px #332e2305; }
.calendar-month-card.current-month { border-color: #a9832c; box-shadow: 0 0 0 1px #a9832c; }
.calendar-feature .range-month { border-collapse: collapse; border-spacing: 0; }
.calendar-feature .range-month caption { margin: 0; padding: 12px 11px; font-size: 16px; background: #f8f1e2; border-bottom: 1px solid #d6c9ac; color: #373227; text-transform: capitalize; }
.year-view .range-month caption { font-size: 14px; }
.current-month .range-month caption { background: #fbefcf; border-color: #d4bc81; }
.current-month-label { float: right; margin-top: 1px; text-transform: none; font-size: 10px; letter-spacing: .03em; color: #463710; background: #f4d681; border: 1px solid #d4b25b; border-radius: 3px; padding: 1px 5px; }
.range-month thead th { padding: 9px 0; color: #615844; background: #fdfaf5; border-bottom: 1px solid #ddd2b9; font-size: 11px; font-weight: 550; }
.range-month thead th:last-child { color: #9a3e3a; }
.range-month .week-number { width: 25px; padding: 0; background: #f9f3e6; color: #746a51; border-right: 1px solid #d8ccb1; }
.year-view .range-month .week-number { width: 24px; padding: 0; font-size: 10px; }
.calendar-day, .calendar-blank, .range-month tbody .week-number { border-bottom: 1px solid #f5ebd5; }
.calendar-feature .calendar-day { height: 46px; border-right: 1px solid #f9f3e4; }
.calendar-day > button { height: 46px; color: #3b3629; }
.calendar-day.weekend { background: #f5f3ef; }
.calendar-day.weekend > button { color: #6d634c; }
.calendar-day.sunday, .calendar-day.has-holiday { background: #fcf1ef; }
.calendar-day.sunday > button, .calendar-day.has-holiday > button { color: #a23935; font-weight: 650; }
.year-view .calendar-day > button { height: 38px; font-size: 12px; }
.year-view .calendar-day { height: 38px; }
.calendar-day.full { background: #e0d7c1; }
.calendar-day.range-preview { background: #d4c7a9; }
.calendar-day.full > button { color: #3d382b; }
.calendar-day.full.endpoint > button > span:first-child { background: #403a2c; color: #fff; outline-color: #403a2c; }
.calendar-day > button[aria-current="date"] > span:first-child { background: #f5cc62; color: #2c250f; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #92691c; outline: 0; }
.calendar-day > button:hover { background: #47403114; }
.calendar-day > button:focus-visible { outline: 2px solid #464031; outline-offset: -2px; }
.calendar-day .day-moon { position: absolute; right: 2px; top: 3px; display: block; line-height: 0; }
.calendar-day .day-moon .moon-icon { width: 7px; height: 7px; }
.calendar-day .day-tyre { position: absolute; left: 2px; bottom: 2px; display: block; line-height: 0; }
.calendar-day .day-tyre .tyre-icon { width: 8px; height: 8px; }
.day-holidays { min-height: 7px; }
.year-view .day-holidays .country-flag { width: 7px; height: 5px; }
.moon-icon { display: inline-block; width: 13px; height: 13px; flex-shrink: 0; border: 1px solid #36465d; border-radius: 50%; background: #fff; box-sizing: border-box; vertical-align: middle; }
.moon-0 { background: #36465d; }
.moon-1 { background: linear-gradient(to right, #36465d 50%, #fff 50%); }
.moon-2 { background: #fff; border-width: 1.5px; }
.moon-3 { background: linear-gradient(to right, #fff 50%, #36465d 50%); }
.tyre-icon { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #8b5d26; outline: 1px dashed #8b5d26; outline-offset: 1px; box-sizing: border-box; vertical-align: middle; flex-shrink: 0; }
.month-phases { display: flex; flex-wrap: wrap; gap: 1px; padding: 8px 7px; margin-top: auto; border-top: 1px solid #dbd0b7; background: #f3f5f8; }
.month-phases button { display: inline-flex; gap: 5px; align-items: center; justify-content: center; flex: 1; min-width: 35px; padding: 5px 2px; background: transparent; border: 0; font-size: 11px; font-variant-numeric: tabular-nums; color: #3c5063; border-radius: 3px; }
.month-phases button:hover, .month-phases button:focus-visible { background: #dde5ed; }
.moon-zone-note { font-size: 11px; color: #596b77; }
.moon-zone-note strong { color: #334f65; font-weight: 550; }
.moon-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 13px; font-size: 12px; color: #455a6a; }
.moon-legend > span { display: flex; gap: 7px; align-items: center; }
.calendar-legend .legend-today { background: #f5cc62; border: 1px solid #92691c !important; border-radius: 50%; }
.calendar-legend .legend-full { background: #e0d7c1; border-color: #b7a16e; }
.calendar-legend .legend-holiday i { background: #fcf1ef; border-color: #aa514b; }
.calendar-legend .tyre-icon { border: 3px solid #8b5d26; border-radius: 50%; }
.tyre-information { padding: 20px; border: 1px solid #c6b398; border-radius: 7px; background: #fffdf8; margin-top: 26px; }
.tyre-information h2 { font-size: 17px; }
.tyre-information .section-heading { flex-wrap: wrap; gap: 8px; }
.tyre-region-tag { color: #76592c !important; font-size: 11px !important; letter-spacing: 0 !important; }
.tyre-scope { font-size: 12px; color: #6d665a; margin: -2px 0 16px; }
.tyre-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tyre-cards > div + div { padding-left: 24px; border-left: 1px solid #ded2bc; }
.tyre-cards h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 14px; color: #594526; }
.tyre-cards p { color: #625e51; font-size: 12px; line-height: 1.7; margin: 8px 0; }
.tyre-season > strong { font-size: 12px; color: #796545; }
.tyre-season p span { white-space: nowrap; }
.tyre-date-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tyre-date-links button { background: none; border: 0; padding: 0; font-size: 12px; color: #77501a; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.all-year-label { display: inline-block; font-size: 13px; color: #574f3c; border: 1px solid #d6caad; background: #f8f1e1; padding: 5px 8px; border-radius: 4px; }
.tyre-source, .tyre-projection { font-size: 11px; color: #746952; line-height: 1.6; }
.tyre-source { padding-top: 12px; margin: 14px 0 0; border-top: 1px solid #ded2bc; }
@media (min-width: 1100px) { .calendar-months.year-view { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .calendar-layers { grid-template-columns: 1fr; } .tyre-cards { grid-template-columns: 1fr; gap: 16px; } .tyre-cards > div + div { padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid #ded2bc; } }
@media (max-width: 650px) { .calendar-feature .calendar-months { gap: 18px; } .year-view .calendar-day > button, .year-view .calendar-day { height: 42px; } .year-view .calendar-day > button { font-size: 14px; } .calendar-settings > summary { gap: 9px; } #settings-summary { max-width: 70%; } .tyre-information { padding: 16px; } }
.calendar-day-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 11px 14px; background: #eef3f8; border: 1px solid #afc0cd; border-radius: 5px; color: #354f63; font-size: 12px; line-height: 1.7; margin: 14px 0 0; }
.calendar-day-detail > span { display: inline-flex; gap: 7px; align-items: center; }
.month-phase-detail { margin: 0; padding: 7px 10px; font-size: 11px; line-height: 1.5; color: #334f65; background: #e8eef5; border-top: 1px solid #dbd0b7; }

.export-trigger, .studio-primary { background: #423c2e; color: #fff; border: 1px solid #423c2e; }
.export-trigger:hover, .studio-primary:hover { background: #302c22; }
.personal-day-dot { position: absolute; left: 3px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: #4969a3; }
.calendar-studio { margin-top: 34px; padding-top: 24px; border-top: 2px solid #cfc19f; }
.studio-heading { display: flex; align-items: flex-start; gap: 20px; justify-content: space-between; margin-bottom: 18px; }
.studio-heading h2 { font-size: 21px; margin: 0 0 7px; }
.studio-heading p { color: #7e7358; font-size: 13px; margin: 0; line-height: 1.7; }
#workspace-status { max-width: 230px; font-size: 11px; color: #655c46; line-height: 1.6; padding-top: 4px; }
#workspace-status.storage-unavailable { color: #8a5822; }
.calendar-studio details { border: 1px solid #d6caad; border-radius: 7px; background: #fff; margin: 12px 0; overflow: hidden; }
.calendar-studio summary { padding: 16px 18px; cursor: pointer; font-size: 14px; color: #484132; font-weight: 550; }
.calendar-studio details[open] summary { background: #f9f4e7; border-bottom: 1px solid #ded3bb; }
.studio-body { padding: 20px; }
.pdf-layouts { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 9px; margin-bottom: 24px; }
.pdf-layouts button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 6px; border: 1px solid #d6caad; background: #fff; font-size: 11px; color: #6c624b; }
.pdf-layouts button[aria-pressed=true] { border-color: #544d3b; background: #faf4e8; box-shadow: 0 0 0 1px #544d3b; color: #3e382b; }
.layout-sketch { width: 56px; height: 43px; padding: 5px; border: 1px solid currentColor; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(4,1fr); gap: 3px; }
.layout-sketch i { border: 1px solid currentColor; opacity: .55; }
.layout-compact { border-bottom-width: 7px; }
.layout-monthly, .layout-weekly { grid-template-columns: repeat(7,1fr); grid-template-rows: 1fr; gap: 2px; }
.layout-family { grid-template-columns: repeat(5,1fr); grid-template-rows: 1fr; }
.layout-daily { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.layout-multi { grid-template-columns: repeat(3,1fr); grid-template-rows: 1fr; }
.studio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.studio-grid label, .logo-controls label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: #675e48; }
.studio-grid input, .studio-grid select, .studio-grid textarea { width: 100%; min-width: 0; border: 1px solid #d3c5a5; padding: 9px; background: #fff; color: #373226; font: inherit; }
.studio-grid input[type=color] { height: 36px; padding: 3px; }
.studio-wide { grid-column: 1 / -1; }
.studio-checks { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px 18px; padding-block: 18px; border-block: 1px solid #f2e4c5; margin-block: 20px; }
.studio-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #5c5440; }
.studio-check input { accent-color: #544d3b; width: 15px; height: 15px; flex-shrink: 0; }
.studio-hint { font-size: 12px; color: #817559; line-height: 1.7; }
.logo-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-block: 18px; }
.logo-controls input { max-width: 260px; font-size: 12px; }
#logo-preview { max-height: 65px; max-width: 160px; object-fit: contain; }
.studio-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.studio-actions button, .logo-controls button, .file-button { padding: 9px 12px; border: 1px solid #d2c5a5; background: #fdfbf6; font-size: 12px; border-radius: 4px; }
.studio-actions .studio-primary { background: #423c2e; color: #fff; border-color: #423c2e; }
.studio-actions a { font-size: 13px; color: #574f3c; text-decoration: underline; }
#pdf-estimate { font-size: 11px; color: #7d7257; }
.studio-message { font-size: 12px; color: #71664e; line-height: 1.7; margin-bottom: 0; }
.studio-message:empty { display: none; }
.file-button { display: inline-flex; align-items: center; gap: 10px; }
.file-button input { font-size: 11px; max-width: 190px; }
.storage-actions { padding-top: 16px; border-top: 1px solid #f0e2c1; }
.personal-event-row { display: grid; grid-template-columns: 90px 1fr auto auto auto; align-items: start; gap: 10px; padding-block: 13px; border-top: 1px solid #f2e6c9; font-size: 12px; }
.personal-event-row time { font-size: 11px; color: #897d60; }
.personal-event-row strong, .personal-event-row small { display: block; }
.personal-event-row small { white-space: normal; overflow-wrap: anywhere; color: #7f7358; margin-top: 5px; }
.personal-event-row button { background: transparent; border: 0; text-decoration: underline; text-underline-offset: 3px; color: #615843; font-size: 12px; padding: 0; }
#personal-count { display: inline-block; margin-left: 8px; font-size: 11px; color: #877b5e; }
@media(max-width:1100px) { .pdf-layouts { grid-template-columns: repeat(3,1fr); } .studio-grid, .studio-checks { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .studio-heading { flex-direction: column; gap: 9px; } .studio-body { padding: 15px; } .studio-grid, .studio-checks { grid-template-columns: 1fr; } .personal-event-row { grid-template-columns: 80px 1fr auto auto; } .personal-event-row > span:nth-child(3) { grid-column: 2; grid-row: 2; } .personal-event-row button { grid-row: 1; } }

/* A quiet working surface with a clear first task. */
h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.8px; margin-bottom: 20px; }
.description { max-width: 55ch; }
.topbar { background: #fff; }
.today-label { font-size: 13px; color: var(--muted); }
.language-switch { font-size: 13px; }
.home-page #directory-view > .page-heading { margin-bottom: 24px; }
.home-page #directory-title { font-size: clamp(36px,4vw,46px); margin-bottom: 20px; }
.home-page #directory-view > .page-heading .description { max-width: 46ch; }
.nav-link[aria-current="page"], .library-link[aria-current="page"] { background: #e7e9e1; color: #30362e; }
.nav-link[aria-current="page"] svg { color: #45675e; }
.nav-link:hover, .library-link:hover { background: #eeefe8; }
.tool-count { border-color: #cdd1c5; color: #555a4d; }
.search-box, .calculator-workspace, .calendar-controls, .calendar-settings, .calendar-month-card, .calendar-studio details { background: #fff; border-color: #d5d9d1; }
.search-box:focus-within { border-color: var(--accent); }
.field input, .field select, .calendar-controls input, .calendar-layers select, .studio-grid input, .studio-grid select, .studio-grid textarea { border-color: #b7beb4; }
.calendar-layers, .calendar-studio details[open] summary { background: #f6f7f4; }
.calendar-feature .range-month caption { background: #f2f4ef; border-color: #d5d9d1; color: #353e31; }
.current-month .range-month caption { background: #fbefcf; border-color: #d4bc81; }
.range-month thead th, .range-month .week-number { background: #f7f8f5; border-color: #d9ddd4; color: #555e4e; }
.calendar-day, .calendar-blank, .range-month tbody .week-number { border-bottom-color: #e5e8e1; }
.calendar-selection { background: #fff; border-color: #bfc9bf; }
.calendar-view-tabs { background: #eff1ec; }
.calendar-note, .studio-hint, #settings-summary, .calendar-layers small { font-size: 13px; color: #625e53; }
.year-view .calendar-day > button { font-size: 13px; }
.calendar-day.full, .calendar-day.partial { background: #dce8f4; }
.calendar-day.range-preview { background: #c4d9ee; }
.calendar-day.full > button { color: #234e78; }
.calendar-day.full.endpoint > button > span:first-child { background: #295a88; outline-color: #295a88; color: #fff; }
.legend-full { background: #dce8f4; }
.legend-partial { background: repeating-linear-gradient(135deg, #dce8f4, #dce8f4 2px, #fff 2px, #fff 4px); }
.home-today { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px 18px; padding: 0; margin: 0 0 26px; color: var(--muted); font-size: 14px; }
.home-today > time { color: var(--ink); font-weight: 600; }
.home-current-time { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; color: var(--ink); text-decoration: none; }
.home-current-time > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.home-current-time time { font-weight: 600; font-variant-numeric: tabular-nums; }
.home-start { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 28px; margin-bottom: 42px; }
.home-start > section { padding: 26px; min-width: 0; }
.home-duration-card { background: #fff; border: 1px solid #d5d9d1; border-top: 3px solid var(--strong); }
.home-calendar-card { background: #f6e8b8; border-top: 3px solid #b89c52; }
.home-calendar-week { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0; margin: 0 0 18px; border-block: 1px solid #d7c58e; text-decoration: none; text-underline-offset: 3px; }
.home-calendar-week strong { font-size: 17px; font-weight: 650; }
.home-calendar-week span { font-size: 14px; color: #59513b; }
.home-calendar-week:hover strong { text-decoration: underline; }
.home-start h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 25px; font-weight: 400; margin-bottom: 13px; }
.home-duration-card h2 { font-size: 30px; }
.home-start p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 18px; max-width: 43ch; }
.home-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.home-dates label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
.home-dates input { min-width: 0; width: 100%; min-height: 46px; padding: 10px; border: 1px solid #adb6ab; background: #fff; color: var(--ink); }
.home-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 17px; background: var(--strong); color: #fff; border: 1px solid var(--strong); border-radius: 4px; font-size: 15px; font-weight: 600; text-decoration: none; }
.home-primary:hover { background: #28291f; border-color: #28291f; }
.home-secondary { display: inline-block; font-size: 14px; color: #3e6058; text-underline-offset: 3px; margin: 0; padding-block: 8px; }
.home-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.home-links { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; }
.home-calendar-card .home-primary { background: #fffef9; color: var(--strong); border-color: #968c6d; }
.home-calendar-card .home-primary:hover { background: #fff; border-color: var(--strong); }
.home-nav-link { margin-bottom: 5px; }
.home-dashboard { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(310px,1fr); gap: 28px; margin-bottom: 42px; align-items: start; }
.home-month-panel, .home-zone-panel { min-width: 0; }
.home-month-panel { padding: 22px; border: 1px solid #d5d9d1; background: #fff; }
.home-zone-panel { padding: 20px 0 0; border-top: 2px solid #6b7769; }
.home-panel-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 18px; }
.home-panel-heading h2 { font: 23px Georgia, 'Times New Roman', serif; }
.home-panel-heading a { font-size: 14px; color: var(--accent); text-underline-offset: 3px; }
.home-month { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.home-month caption { text-align: left; text-transform: capitalize; font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.home-month th { font-size: 13px; font-weight: 400; color: var(--muted); padding: 8px 0; }
.home-month th:first-child { width: 28px; background: #f2f4ef; border-right: 1px solid #d5d9d1; }
.home-month abbr { text-decoration: none; }
.home-month td { height: 44px; text-align: center; border-bottom: 1px solid #e7e9e3; }
.home-month td a { display: grid; place-items: center; min-height: 43px; margin: 1px; color: var(--ink); font-size: 16px; text-decoration: none; border-radius: 3px; }
.home-month td a:hover { background: #e8eff6; }
.home-month .home-month-sunday a { color: #a23935; }
.home-month td a[aria-current=date] { background: #f5d276; color: #382b13; box-shadow: inset 0 0 0 1px #b1842d; font-weight: 700; }
.home-widget-note { margin: 15px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; max-width: 60ch; }
.world-clock-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
.home-clock { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 12px 16px; }
.home-clock:not(:nth-child(3n+1)) { border-left: 1px solid #dfe2da; }
.clock-zone-label { width: 100%; min-height: 79px; }
.home-clock strong { display: block; font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.home-zone-name, .home-clock label > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.home-zone-name { overflow-wrap: anywhere; line-height: 1.6; }
.home-clock select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 5px; border: 1px solid #b7beb4; border-radius: 3px; background: #fff; color: var(--ink); font-size: 14px; }
.analog-clock { width: 140px; max-width: 100%; height: auto; flex-shrink: 0; margin: 12px 0 18px; overflow: visible; }
.clock-rim { fill: #fff; stroke: #a3ada3; stroke-width: 1.5; }
.clock-tick { stroke: #c7cec5; stroke-width: .8; }
.clock-hour-tick { stroke: #576354; stroke-width: 1.5; }
.clock-numerals { fill: #576354; font: 10px Arial, sans-serif; text-anchor: middle; }
.clock-hour-hand, .clock-minute-hand { stroke: #343d34; stroke-linecap: round; stroke-width: 4; }
.clock-minute-hand { stroke-width: 2.5; }
.clock-second-hand { stroke: #b35a42; stroke-width: 1; }
.clock-pin { fill: #b35a42; }
.home-clock-reading { text-align: center; margin-top: auto; }
.home-clock-reading time { font-size: clamp(22px,2vw,28px); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.3px; white-space: nowrap; }
.home-clock-reading small { display: block; font-size: 13px; color: var(--muted); margin-top: 9px; line-height: 1.6; }
.home-zone-panel .home-panel-heading h2 { font-size: 28px; }
.world-clock-grid-expanded { row-gap: 28px; }
.world-clock-grid-expanded .home-clock { padding: 24px; }
.world-clock-grid-expanded .analog-clock { width: 190px; margin-block: 18px 24px; }
.world-clock-grid-expanded .home-clock-reading time { font-size: 34px; }
.world-clock-grid-expanded .home-clock-reading small { font-size: 14px; }
#world-clock-content { border-top: 2px solid #6b7769; padding-top: 24px; }
#world-clock-content > .home-widget-note { max-width: 75ch; margin-top: 24px; font-size: 14px; }
#home-timezones { scroll-margin-top: 85px; }
@media(max-width:1050px) { .home-dashboard { grid-template-columns: 1fr; } }
@media(max-width:850px) { .home-start { grid-template-columns: 1fr; gap: 22px; } .home-current-time { margin-left: 0; } }
@media(max-width:400px) { .home-dates { grid-template-columns: 1fr; } .home-start > section, .home-month-panel { padding: 19px; }  }

@media(max-width:1100px) {
  .world-clock-grid-expanded { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .world-clock-grid-expanded .home-clock { border-left: 0; }
  .world-clock-grid-expanded .home-clock:nth-child(even) { border-left: 1px solid #dfe2da; }
}
@media(max-width:550px) {
  .world-clock-grid { grid-template-columns: 1fr; row-gap: 0; }
  .world-clock-grid .home-clock { border-left: 0; }
  .world-clock-grid .home-clock + .home-clock { border-top: 1px solid #dfe2da; }
  .home-clock, .world-clock-grid-expanded .home-clock { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 10px 18px; padding: 18px; align-items: start; }
  .analog-clock, .world-clock-grid-expanded .analog-clock { grid-column: 1; grid-row: 1 / 3; width: 100px; margin: auto 0; }
  .clock-zone-label { grid-column: 2; min-height: 0; }
  .home-clock-reading { grid-column: 2; text-align: left; }
  .home-clock-reading time, .world-clock-grid-expanded .home-clock-reading time { font-size: 26px; }
  .home-clock-reading small { margin-top: 5px; }
}
@media(max-width:360px) { .home-clock, .world-clock-grid-expanded .home-clock { grid-template-columns: 78px minmax(0,1fr); gap: 10px; padding: 14px; } }

/* Place comparison is a reference tool, with the answer beside the two inputs. */
#home-zone-comparison { grid-column: 1 / -1; }
#time-zone-comparison { margin-bottom: 38px; scroll-margin-top: 85px; }
.zone-comparison { border-top: 2px solid #6b7769; padding-top: 22px; }
.zone-comparison-heading { margin-bottom: 22px; }
.zone-comparison-heading h2 { font: 28px Georgia, 'Times New Roman', serif; margin: 0 0 9px; }
.zone-comparison-heading p { margin: 0; color: var(--muted); font-size: 15px; }
.zone-comparison-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(270px,1fr); gap: 32px; align-items: start; }
.zone-comparison-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 22px; }
.zone-picker { min-width: 0; }
.zone-picker > label:first-child { display: block; font-weight: 600; margin-bottom: 8px; }
.zone-picker input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 40px 10px 12px; border: 1px solid #adb6ab; background: #fff; color: var(--ink); font-size: 14px; }
.zone-combobox { position: relative; }
.zone-picker-toggle { position: absolute; right: 1px; top: 1px; width: 38px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #526a5e; }
.zone-picker-toggle:hover { background: #f0f3ee; }
.zone-picker-popup { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #aeb9ad; border-radius: 5px; box-shadow: 0 8px 22px #273b2720; overflow: hidden; }
.zone-picker-popup [role=listbox] { max-height: 290px; max-height: min(290px,45vh); overflow-y: auto; overscroll-behavior: contain; }
.zone-picker-popup [role=option] { padding: 11px 12px; cursor: pointer; border-bottom: 1px solid #edf0e9; }
.zone-picker-popup [role=option]:last-child { border-bottom: 0; }
.zone-picker-popup [role=option]:hover, .zone-picker-popup [aria-selected=true] { background: #edf2e9; }
.zone-picker-popup strong { display: block; font-size: 14px; font-weight: 600; }
.zone-picker-popup [role=option] span { display: block; margin-top: 3px; font-size: 12px; color: #625e53; overflow-wrap: anywhere; line-height: 1.5; }
.zone-picker-popup .zone-search-hint { margin: 0; padding: 13px; }
.zone-search-hint { margin: 7px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.zone-search-hint:empty { display: none; }
.zone-comparison-actions { grid-column: 1 / -1; display: flex; gap: 12px 24px; flex-wrap: wrap; }
.zone-comparison-actions button { border: 0; padding: 7px 0; background: transparent; color: #3e6058; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.zone-comparison-result { padding: 0 0 0 28px; border-left: 1px solid var(--line); }
.zone-comparison-context { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.zone-difference { font: 32px Georgia, 'Times New Roman', serif; color: #345c50; margin: 0 0 22px; }
.zone-comparison-times { margin: 0; display: grid; gap: 13px; }
.zone-comparison-times dt { font-size: 14px; font-weight: 600; }
.zone-comparison-times dd { margin: 3px 0 0; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.zone-comparison-note { max-width: 90ch; margin: 16px 0 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
@media(max-width:1000px) {
  .zone-comparison-layout { grid-template-columns: 1fr; gap: 22px; }
  .zone-comparison-result { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .zone-comparison-times { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:550px) {
  .zone-comparison-controls, .zone-comparison-times { grid-template-columns: 1fr; }
  .zone-comparison-controls { gap: 20px; }
  .zone-difference { font-size: 29px; }
}