/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* PHAEMA page styles ("skins"). They change layout, type and density; the colour themes in themes.css still
   apply on top, so every style works in Standard, Dark, High contrast and Match my device.
   Rules kept in every style: underlined links, the yellow GOV.UK focus state, text contrast of at least 4.5:1,
   no meaning carried by colour alone, and nothing hidden without JavaScript. */

/* ------------------------------------------------------------------ shared: collapsible panels */
:root {
  --ph-surface: #ffffff; --ph-page: var(--ph-bg);
  --area-estate: #1d3557; --area-leases: #1d5f8a; --area-cases: #6a3d9a; --area-buildings: #2f6b3f;
  --area-money: #8a5a12;
}
html[data-theme="dark"] {
  --ph-surface: #1b1f24;
  --area-estate: #7fa6d6; --area-leases: #6fb3e0; --area-cases: #b99be0; --area-buildings: #7cc48f; --area-money: #e0b264;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --ph-surface: #1b1f24;
    --area-estate: #7fa6d6; --area-leases: #6fb3e0; --area-cases: #b99be0; --area-buildings: #7cc48f; --area-money: #e0b264;
  }
}
html[data-theme="contrast"] {
  --ph-surface: #000; --area-estate: #ffdd00; --area-leases: #ffdd00; --area-cases: #ffdd00;
  --area-buildings: #ffdd00; --area-money: #ffdd00;
}
.phaema-panel { margin-bottom: 30px; }
.phaema-panel[data-area="estate"] { --area: var(--area-estate); }
.phaema-panel[data-area="leases"] { --area: var(--area-leases); }
.phaema-panel[data-area="cases"] { --area: var(--area-cases); }
.phaema-panel[data-area="buildings"] { --area: var(--area-buildings); }
.phaema-panel[data-area="money"] { --area: var(--area-money); }
.phaema-panel__title { margin-bottom: 15px; }
.phaema-panel__toggle {
  display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.phaema-panel__toggle:hover .phaema-panel__state { text-decoration-thickness: 3px; }
.phaema-panel__toggle:focus { outline: 3px solid transparent; background: #fd0; color: #0b0c0c;
  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; }
.phaema-panel__state { flex: none; font-size: 1rem; font-weight: 400; color: var(--ph-link); text-decoration: underline;
  text-underline-offset: .15em; white-space: nowrap; }
.phaema-panel__toggle:focus .phaema-panel__state { color: #0b0c0c; }
.phaema-panel__state::before { content: ""; display: inline-block; width: .45em; height: .45em; margin-right: .45em;
  border: solid currentColor; border-width: 0 .14em .14em 0; transform: translateY(-.15em) rotate(45deg); }
.phaema-panel__toggle[aria-expanded="true"] .phaema-panel__state::before { transform: translateY(.05em) rotate(-135deg); }
.phaema-panel--closed .phaema-panel__title { margin-bottom: 0; }
.phaema-panels-control { display: flex; justify-content: flex-end; margin: -10px 0 15px; }
@media (prefers-reduced-motion: no-preference) {
  .phaema-panel__state::before { transition: transform .15s ease-out; }
}
@media print {
  .phaema-panel__body[hidden] { display: block !important; }
  .phaema-panel__state, .phaema-panels-control { display: none !important; }
}

/* Dashboard switch between "My work" and "Whole estate" */
.phaema-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 30px; padding: 0; list-style: none;
  border-bottom: 1px solid var(--ph-border); }
.phaema-tabs a { display: block; padding: 10px 18px 8px; margin-bottom: -1px; font-size: 1.1875rem; }
.phaema-tabs a[aria-current="page"] { color: var(--ph-text); font-weight: 700; text-decoration: none;
  border: 1px solid var(--ph-border); border-bottom-color: var(--ph-page); background: var(--ph-page); }
.phaema-tabs a:focus { background: #fd0; color: #0b0c0c; outline: none; box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; }

/* Lists of things to do on My work */
.phaema-agenda { list-style: none; margin: 0 0 20px; padding: 0; }
.phaema-agenda li { display: grid; grid-template-columns: 7.5em 1fr; gap: 2px 15px; padding: 10px 0;
  border-bottom: 1px solid var(--ph-border); }
.phaema-agenda__when { font-weight: 700; }
.phaema-agenda__when--late { color: #d4351c; }
html[data-theme="dark"] .phaema-agenda__when--late, html[data-theme="contrast"] .phaema-agenda__when--late { color: inherit; }
.phaema-agenda__what .govuk-body-s { display: block; margin: 2px 0 0; color: var(--ph-secondary); }
@media (max-width: 640px) { .phaema-agenda li { grid-template-columns: 1fr; } }
.phaema-person { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 15px; margin-bottom: 20px; }
.phaema-person .govuk-form-group { margin-bottom: 0; }

/* ------------------------------------------------------------------ Clear */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-400-normal.82a5516b3709.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-400-italic.a56101834cc7.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-700-normal.833b135521b5.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-700-italic.51574809065a.woff2") format("woff2"); }

html[data-skin="clear"] { --ph-page: #edf1f0; }
html[data-skin="clear"][data-theme="dark"] { --ph-page: #121417; }
@media (prefers-color-scheme: dark) { html[data-skin="clear"][data-theme="auto"] { --ph-page: #121417; } }
html[data-skin="clear"][data-theme="contrast"] { --ph-page: #000; }

html[data-skin="clear"] body, html[data-skin="clear"] body *:not(code):not(pre):not(.phaema-code) {
  font-family: "Atkinson Hyperlegible", arial, sans-serif;
}
html[data-skin="clear"].govuk-template, html[data-skin="clear"] body.govuk-template__body { background-color: var(--ph-page); }
html[data-skin="clear"] .phaema-header { border-bottom-width: 4px; }
html[data-skin="clear"] .phaema-header__brand { letter-spacing: .12em; font-size: 1.375rem; }
html[data-skin="clear"] .govuk-heading-xl { font-size: 2.5rem; letter-spacing: -.01em; margin-bottom: 30px; }
html[data-skin="clear"] .govuk-heading-l { letter-spacing: -.005em; }
html[data-skin="clear"] .govuk-phase-banner { border-bottom: 0; }

/* Panels become sheets of paper, each ruled in the colour of its area (the heading names the area too). */
html[data-skin="clear"] .phaema-panel {
  background: var(--ph-surface); border: 1px solid var(--ph-border); border-left: 6px solid var(--area, var(--ph-border));
  border-radius: 3px; padding: 20px 24px 5px;
}
html[data-skin="clear"] .phaema-panel--closed { padding-bottom: 20px; }
html[data-skin="clear"] .phaema-panel .govuk-table:last-child,
html[data-skin="clear"] .phaema-panel .govuk-summary-list:last-child { margin-bottom: 15px; }
html[data-skin="clear"] .phaema-panel .govuk-table__head .govuk-table__header { font-size: 1rem; color: var(--ph-secondary); }
html[data-skin="clear"] .phaema-stat { background: var(--ph-surface); border: 1px solid var(--ph-border);
  border-left: 6px solid var(--ph-accent); border-radius: 3px; padding: 15px 18px; }
html[data-skin="clear"] .phaema-panel .phaema-stat { border-width: 0 0 0 4px; border-radius: 0; padding: 0 0 0 15px; }
html[data-skin="clear"] .phaema-stat__value { font-size: 2.25rem; }
html[data-skin="clear"] .phaema-filters { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: 3px; }
html[data-skin="clear"] .phaema-tabs a[aria-current="page"] { background: var(--ph-surface); border-bottom-color: var(--ph-surface); }
html[data-skin="clear"] .phaema-tabs { border-bottom-color: var(--ph-border); }
html[data-skin="clear"] .govuk-summary-list__key { font-weight: 700; }
html[data-skin="clear"] .govuk-inset-text { background: var(--ph-surface); border-left-color: var(--ph-accent); padding: 15px 18px; }
html[data-skin="clear"] .govuk-footer { background: var(--ph-surface); }
html[data-skin="clear"][data-theme="contrast"] .phaema-panel, html[data-skin="clear"][data-theme="contrast"] .phaema-stat {
  border: 2px solid #fff; border-left: 6px solid #ffdd00;
}

/* ------------------------------------------------------------------ Compact */
html[data-skin="compact"] .govuk-width-container { max-width: min(1440px, calc(100% - 60px)); }
@media (max-width: 640px) { html[data-skin="compact"] .govuk-width-container { max-width: none; } }
html[data-skin="compact"] .govuk-main-wrapper { padding-top: 15px; padding-bottom: 20px; }
html[data-skin="compact"] .govuk-heading-xl { font-size: 2rem; margin-bottom: 20px; }
html[data-skin="compact"] .govuk-heading-l { font-size: 1.5rem; margin-bottom: 15px; }
html[data-skin="compact"] .govuk-heading-m { font-size: 1.25rem; margin-bottom: 10px; }
html[data-skin="compact"] .govuk-heading-s { font-size: 1rem; margin-bottom: 8px; }
html[data-skin="compact"] .govuk-caption-l, html[data-skin="compact"] .govuk-caption-xl { font-size: 1.125rem; }
html[data-skin="compact"] .govuk-body, html[data-skin="compact"] .govuk-body-m, html[data-skin="compact"] .govuk-list,
html[data-skin="compact"] .govuk-table, html[data-skin="compact"] .govuk-summary-list,
html[data-skin="compact"] .govuk-label, html[data-skin="compact"] .govuk-hint,
html[data-skin="compact"] .govuk-details__summary-text, html[data-skin="compact"] .govuk-inset-text { font-size: 1rem; }
html[data-skin="compact"] .govuk-body, html[data-skin="compact"] .govuk-list,
html[data-skin="compact"] .govuk-table, html[data-skin="compact"] .govuk-summary-list { margin-bottom: 15px; }
html[data-skin="compact"] .govuk-table__header, html[data-skin="compact"] .govuk-table__cell { padding: 6px 15px 6px 0; }
html[data-skin="compact"] .govuk-summary-list__key, html[data-skin="compact"] .govuk-summary-list__value,
html[data-skin="compact"] .govuk-summary-list__actions { padding-top: 5px; padding-bottom: 5px; }
html[data-skin="compact"] .govuk-form-group { margin-bottom: 20px; }
html[data-skin="compact"] .govuk-inset-text { padding: 10px 15px; margin: 15px 0; }
html[data-skin="compact"] .govuk-details { margin-bottom: 15px; }
html[data-skin="compact"] .phaema-stat__value { font-size: 1.875rem; }
html[data-skin="compact"] .phaema-stat { margin-bottom: 12px; }
html[data-skin="compact"] .phaema-panel { margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px solid var(--ph-border); }
html[data-skin="compact"] .phaema-panel__title { margin-bottom: 8px; }
html[data-skin="compact"] .phaema-tabs { margin-bottom: 15px; }
html[data-skin="compact"] .phaema-tabs a { padding: 6px 14px 5px; font-size: 1rem; }
html[data-skin="compact"] .phaema-agenda li { padding: 5px 0; font-size: 1rem; }
html[data-skin="compact"] .phaema-header__inner { padding: 8px 0; }
html[data-skin="compact"] .govuk-phase-banner { padding: 5px 0; }