/* The page's look: its tokens, fonts and controls. index.html (and later extension.html) links this
   and keeps only its own layout inline. Tokens from "Light and dark palettes for the page" (#59),
   fonts from "How the page gets its fonts" (#60), controls from "Controls in the Highlands look" (#61).
   tests/contrast.test.mjs checks every pair the palette lists. */
/* shared look */
/* The part of the look the Planning Center extension's frame uses, and only that (see
   docs/adr/0006-the-shared-look-holds-only-what-the-frame-uses.md): extension/frame.css holds an exact
   copy of everything between these two markers (tests/frame.test.mjs checks). Change it here, then
   copy it there; it reaches volunteers with the next release of the extension. The fonts are
   url("fonts/…"): web/fonts/ from this file, extension/fonts/ from frame.css. */
:root{--bg:#f2f2f2;--surface:#ffffff;--surface2:#f7f8f8;--ink:#101314;--dim:#4b555b;--line:#d5d9db;--field:#e9f2f6;--edge:#7d8a91;--hover:#dcebf2;--link:#1d5f93;--focus:#1d5f93;--primary:#06354b;--on-primary:#ffffff;--primary-hover:#0b4a68;--pale:#c8e7fa;--on-pale:#06354b;--good:#146c2e;--good-bg:#e3f4e8;--bad:#b42318;--bad-bg:#fdeceb;--warn:#8a4b00;--warn-bg:#fdf1dc;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0b0f11;--surface:#13191c;--surface2:#1a2226;--ink:#e4e9eb;--dim:#a7b3b9;--line:#2c373c;--field:#1f2a2f;--edge:#6b7c85;--hover:#283740;--link:#8cc4ef;--focus:#8cc4ef;--primary:#c8e7fa;--on-primary:#06354b;--primary-hover:#e0f1fc;--pale:#c8e7fa;--on-pale:#06354b;--good:#6fdc8c;--good-bg:#10291a;--bad:#ff8f86;--bad-bg:#33130f;--warn:#f3b65e;--warn-bg:#2f210b;color-scheme:dark}}
@font-face{font-family:"Libre Franklin";font-weight:400;font-display:swap;src:url("fonts/libre-franklin-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-weight:400;font-display:swap;src:url("fonts/libre-franklin-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-weight:600;font-display:swap;src:url("fonts/libre-franklin-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-weight:600;font-display:swap;src:url("fonts/libre-franklin-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-weight:800;font-display:swap;src:url("fonts/libre-franklin-latin-ext-800-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-weight:800;font-display:swap;src:url("fonts/libre-franklin-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Until Libre Franklin loads (font-display:swap), Arial stands in, sized to its widths and line
   height so the swap doesn't move the text. local() can't name system-ui, so system-ui comes after. */
@font-face{font-family:"Libre Franklin fallback";font-weight:400;src:local("Arial"),local("ArialMT");size-adjust:105.05%;ascent-override:91.96%;descent-override:23.42%;line-gap-override:0%}
@font-face{font-family:"Libre Franklin fallback";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:99.05%;ascent-override:97.53%;descent-override:24.84%;line-gap-override:0%}
@font-face{font-family:"Libre Franklin fallback";font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:101.14%;ascent-override:95.51%;descent-override:24.32%;line-gap-override:0%}
*{box-sizing:border-box}[hidden]{display:none!important}
body{color:var(--ink);font:400 18px/1.4 "Libre Franklin","Libre Franklin fallback",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button{min-height:48px;padding:10px 24px;border-radius:999px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);font-weight:600;font-size:18px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
button:hover{background:var(--hover);border-color:var(--ink)}
button.primary{background:var(--primary);color:var(--on-primary);border-color:transparent}
button.primary:hover{background:var(--primary-hover);border-color:transparent}
button.big{min-height:64px;font-size:22px;font-weight:800}
button.wide{width:100%}
button.danger{background:var(--bad);color:var(--surface);border-color:transparent}
button.danger:hover{background:var(--bad);border-color:transparent;filter:brightness(1.12)}
button:disabled,button:disabled:hover{background:var(--surface2);border-color:var(--line);color:var(--dim);cursor:default;filter:none}
button.link,button.link:hover{min-height:44px;padding:0;border:0;background:none;color:var(--link);text-decoration:underline;font-size:16px;font-weight:600;text-align:left;justify-content:flex-start}
button.link:hover{text-decoration-thickness:2px}
label{display:block;font-weight:600;font-size:16px;line-height:1.2;color:var(--dim);margin:14px 0 6px;padding-left:20px}
input[type=text],input[type=password]{width:100%;min-height:52px;padding:10px 22px;border-radius:999px;border:2px solid var(--edge);background:var(--field);color:var(--ink);font-size:18px}
input[type=text]:hover,input[type=password]:hover{border-color:var(--ink)}
input[type=text]:disabled,input[type=password]:disabled{border-color:var(--line);background:var(--surface2);color:var(--dim)}
input.err,input.err:hover{border-color:var(--bad);background:var(--bad-bg)}
.ferr{font-weight:600;font-size:16px;color:var(--bad);margin:6px 0 0 20px}
.card{background:var(--surface);border-radius:17px;padding:20px 22px}
.notice{position:relative;background:var(--warn-bg);color:var(--ink);border-radius:17px;padding:16px 20px 16px 62px;font-size:18px}
.notice::before{content:"!";position:absolute;left:20px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--warn);color:var(--warn-bg);font-weight:800;line-height:28px;text-align:center}
.notice.bad{background:var(--bad-bg)}.notice.bad::before{background:var(--bad);color:var(--bad-bg)}
.confirm{background:var(--bad-bg);border-radius:17px;padding:16px 20px}
.confirm p{margin:0 0 12px;font-weight:600}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 14px;border-radius:999px;background:var(--pale);color:var(--on-pale);font-weight:600;font-size:16px;white-space:nowrap}
.say{font-size:16px;color:var(--dim)}.say:empty{display:none}
/* shared look */

/* The rail: the same in both modes. White at 12% (field), 45% (edge), 20% (line), 55% (disabled text),
   10% (good) and 8% (status) over the rail's dark blue are written out as solid colours, and so are
   the rail's cards (white at 6%), the plan block on a card (8% more) and the build result (10%). The
   flyout's scrim stays see-through, so the setlist shows under it. */
:root{--rail:#06354b;--rail-ink:#ffffff;--rail-pale:#c8e7fa;--rail-pale-hover:#e0f1fc;--rail-field:#244d61;--rail-edge:#76909c;--rail-hover:#2d5a6f;--rail-focus:#c8e7fa;--rail-line:#385d6f;--rail-off:#8fa4ae;--rail-status:#1a4559;--rail-good:#8fe8a8;--rail-good-bg:#1f495d;--rail-bad:#ffb4ad;--rail-bad-bg:#5c1a14;--rail-warn:#ffd28a;--rail-warn-bg:#4d3507;--rail-card:#154156;--rail-plan:#285064;--rail-result:#1f495d;--scrim:rgb(0 0 0 / .35)}

/* Buttons the frame doesn't use: small, back (a link-coloured text pill) and the ✕ icon circle. */
button.small{min-height:44px;padding:6px 18px;font-size:16px}
button.back{min-height:44px;padding:6px 14px;font-size:16px;border-color:transparent;background:transparent;color:var(--link)}
button.back:hover{background:var(--hover);border-color:transparent}
button.back:disabled{background:transparent;border-color:transparent}
button.icon{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:20px;flex:none}

/* Fields the frame doesn't use: search, number and untyped inputs, and selects with their chevron. */
input:not([type]),input[type=search],input[type=number],select{width:100%;min-height:52px;padding:10px 22px;border-radius:999px;border:2px solid var(--edge);background-color:var(--field);color:var(--ink);font-size:18px}
select{appearance:none;padding-right:48px;font-weight:600;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%234b555b' stroke-width='2.6'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center}
@media (prefers-color-scheme:dark){select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23a7b3b9' stroke-width='2.6'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E")}}
input:not([type]):hover,input[type=search]:hover,input[type=number]:hover,select:hover{border-color:var(--ink)}
input:not([type]):disabled,input[type=search]:disabled,input[type=number]:disabled,select:disabled{border-color:var(--line);background-color:var(--surface2);color:var(--dim);cursor:default}
select.err{border-color:var(--bad);background-color:var(--bad-bg)}
td input:not([type=checkbox]),td select{min-height:44px;padding:6px 16px}td select{padding-right:44px;background-position:right 16px center}

/* Range sliders: a 96px name, the slider, then the value in a field pill. The track fills in the link
   colour up to the thumb, from --p (set by the page as the value moves). */
.slider{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;align-items:center;gap:14px;min-height:48px}
.slider output{background:var(--field);border-radius:999px;text-align:center;font-weight:600;padding:6px 0;font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,var(--link) var(--p,50%),var(--edge) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--surface);border:3px solid var(--link)}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--edge)}
input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--link)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--surface);border:3px solid var(--link)}
input[type=range]:focus-visible{border-radius:999px}
input[type=range]:disabled{opacity:.45;cursor:default}

/* Checkboxes: a 28px square, filled in the link colour with a tick when checked. */
input[type=checkbox]{appearance:none;flex:none;width:28px;height:28px;margin:0;border-radius:8px;border:2px solid var(--edge);background:var(--field);display:inline-grid;place-items:center;vertical-align:middle;cursor:pointer}
input[type=checkbox]:hover{border-color:var(--ink)}
input[type=checkbox]:checked{background:var(--link);border-color:var(--link)}
input[type=checkbox]:checked::after{content:"";width:8px;height:14px;border:solid var(--surface);border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
input[type=checkbox]:disabled{opacity:.45;cursor:default}
label.check{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:0;color:var(--ink);cursor:pointer}
label.check:has(input:disabled){color:var(--dim);cursor:default}

/* Tables: 60px rows with a line between them; rows that need attention tinted. */
table{border-collapse:collapse;width:100%;font-size:18px}
th{font-size:16px;font-weight:600;color:var(--dim);text-align:left;padding:8px 12px}
td{padding:6px 12px;height:60px;border-top:1px solid var(--line)}
tr.unmapped td{background:var(--warn-bg)}

/* The warning tag doesn't rely on colour alone: it has an edge. */
.tag.warn{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 2px var(--warn)}

/* Status text: what the page reports, spacing kept. */
pre{background:var(--surface2);color:var(--ink);border-radius:17px;padding:16px 20px;margin:0;white-space:pre-wrap;font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
code{font:18px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface2);border-radius:8px;padding:2px 8px;overflow-wrap:anywhere}

/* On the rail, the rail's tokens stand in for the page's: pale primary and focus, the white-at-12%
   fill and the white-at-45% edge. Secondary buttons have no fill there. */
.rail{--bg:var(--rail);--surface:var(--rail);--surface2:var(--rail);--ink:var(--rail-ink);--dim:var(--rail-pale);--line:var(--rail-line);--field:var(--rail-field);--edge:var(--rail-edge);--hover:var(--rail-hover);--link:var(--rail-pale);--focus:var(--rail-focus);--primary:var(--rail-pale);--on-primary:var(--rail);--primary-hover:var(--rail-pale-hover);--good:var(--rail-good);--good-bg:var(--rail-good-bg);--bad:var(--rail-bad);--bad-bg:var(--rail-bad-bg);--warn:var(--rail-warn);--warn-bg:var(--rail-warn-bg);background:var(--rail);color:var(--ink);color-scheme:dark}
.rail button:where(:not(.primary,.danger,.back,:hover,:disabled)){background:transparent}
.rail button:disabled,.rail button:disabled:hover{background:transparent;border-color:var(--line);color:var(--rail-off)}
.rail button.danger{color:var(--bad-bg)}
.rail .card{background:transparent;border:1px solid var(--line)}
.rail pre{background:var(--rail-status)}
.rail input[type=range]::-webkit-slider-thumb{background:var(--rail)}
.rail input[type=checkbox]:checked::after{border-color:var(--rail)}