/* -------------------------------------------------------------------------- Crea Activa — incident management. Design tokens, typography, spacing and components come straight from maqueta-incidencias.html. Anything below the "additions" marker exists only because the mock-up used inline style attributes, which the CSP forbids. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Nunito, self-hosted. Taken from Google Fonts (SIL Open Font License 1.1, see fonts/OFL.txt) and served from this origin, so the browser makes no request to any Google host and the CSP needs no external origin at all. This is the variable font: one file per subset covers the whole 300-600 weight range the interface uses. -------------------------------------------------------------------------- */ @font-face{ font-family:"Nunito"; font-style:normal; font-weight:300 600; font-display:swap; src:url("../fonts/nunito-latin-ext.ffdc8b0c86fb.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:"Nunito"; font-style:normal; font-weight:300 600; font-display:swap; src:url("../fonts/nunito-latin.166202cc391c.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; } :root{ --ca-brand-blue:#6FCBF2; --ca-brand-gray:#706F6F; --ca-primary:#17698F; --ca-primary-hover:#0E5C82; --ca-primary-soft:#E8F6FD; --ca-ink:#3C3C3B; --ca-ink-muted:#706F6F; --ca-ink-subtle:#A3A3A3; --ca-surface:#FFF; --ca-canvas:#F6F8FA; --ca-border:#E3E7EA; --ca-success:#1B7A45; --ca-warning:#A65B00; --ca-danger:#B3261E; --ca-font:"Nunito","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --ca-radius-sm:8px; --ca-radius-md:12px; --ca-shadow-sm:0 1px 2px rgba(60,60,59,.06); --ca-shadow-md:0 4px 14px rgba(60,60,59,.10); } *{box-sizing:border-box} body{margin:0;font-family:var(--ca-font);font-size:15px;font-weight:400;line-height:1.55; color:var(--ca-ink);background:var(--ca-canvas);-webkit-font-smoothing:antialiased} h1{font-size:28px;font-weight:300;margin:0 0 4px} h2{font-size:20px;font-weight:300;margin:0 0 16px} h3{font-size:16px;font-weight:600;margin:0 0 8px} a{color:var(--ca-primary)} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} header{background:var(--ca-surface);border-bottom:1px solid var(--ca-border)} .hrow{display:flex;align-items:center;gap:16px;padding:14px 0} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit} .brand svg{height:24px;width:auto;color:var(--ca-primary)} .brand-name{font-weight:600;font-size:15px} .brand-meta{font-size:12px;color:var(--ca-ink-muted)} .spacer{flex:1} .lang{display:flex;border:1px solid var(--ca-border);border-radius:var(--ca-radius-sm);overflow:hidden} .lang button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600; padding:7px 12px;color:var(--ca-ink-muted);cursor:pointer;min-height:36px} .lang button[aria-pressed="true"]{background:var(--ca-primary-soft);color:var(--ca-primary)} .lang form{display:contents} nav{display:flex;gap:4px;overflow-x:auto} nav a.navlink{border:0;background:transparent;font:inherit;padding:10px 14px;font-size:14px; color:var(--ca-ink-muted);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block} nav a.navlink.active{color:var(--ca-primary);font-weight:600;box-shadow:inset 0 -3px 0 var(--ca-brand-blue)} main{padding:32px 0 48px} .page-head{margin-bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .page-head p{margin:0;color:var(--ca-ink-muted);font-size:14px} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px} .grid.g3{grid-template-columns:repeat(3,1fr)} .grid.g2{grid-template-columns:repeat(2,1fr)} .card{background:var(--ca-surface);border:1px solid var(--ca-border); border-radius:var(--ca-radius-md);padding:24px} .kpi{font-size:32px;font-weight:300;line-height:1.1} .kpi-label{font-size:13px;font-weight:600;color:var(--ca-ink-muted)} .kpi-sub{font-size:12px;color:var(--ca-ink-subtle);margin-top:4px} table{width:100%;border-collapse:collapse;font-size:14px} th{font-size:13px;font-weight:600;color:var(--ca-ink-muted);text-align:left; padding:0 12px 12px;border-bottom:1px solid var(--ca-border)} td{padding:14px 12px;border-bottom:1px solid var(--ca-border);vertical-align:top} tr:last-child td{border-bottom:0} .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600; padding:4px 10px;border-radius:999px} .chip.ok{background:rgba(27,122,69,.09);color:var(--ca-success)} .chip.pend{background:rgba(166,91,0,.10);color:var(--ca-warning)} .chip.no{background:rgba(179,38,30,.09);color:var(--ca-danger)} .chip.info{background:var(--ca-primary-soft);color:var(--ca-primary)} .chip.mut{background:rgba(112,111,111,.10);color:var(--ca-ink-muted)} .actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;align-items:center} .actions.tight{margin-top:0;margin-bottom:16px} .btn{font:inherit;font-weight:600;border-radius:var(--ca-radius-sm);padding:10px 18px; min-height:44px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center; text-decoration:none} .btn-primary{background:var(--ca-primary);color:#fff;border:0} .btn-primary:hover{background:var(--ca-primary-hover)} .btn-secondary{background:transparent;color:var(--ca-primary);border:1px solid var(--ca-border)} .btn-danger{background:transparent;color:var(--ca-danger);border:1px solid var(--ca-border)} .btn-sm{padding:6px 12px;min-height:32px;font-size:13px;border-radius:var(--ca-radius-sm)} .btn-block{width:100%} .notice{display:flex;gap:12px;align-items:flex-start;background:var(--ca-primary-soft); border-left:3px solid var(--ca-brand-blue);border-radius:var(--ca-radius-sm); padding:14px 16px;font-size:14px;margin-bottom:24px} .notice.warn{background:rgba(166,91,0,.08);border-left-color:var(--ca-warning)} .notice.bad{background:rgba(179,38,30,.08);border-left-color:var(--ca-danger)} .notice.good{background:rgba(27,122,69,.08);border-left-color:var(--ca-success)} .notice p{margin:0} .empty{text-align:center;padding:48px 24px;color:var(--ca-ink-muted)} .empty .big{font-size:32px;margin-bottom:8px} .field{margin-bottom:16px} .field label{display:block;font-size:13px;font-weight:600;color:var(--ca-ink-muted);margin-bottom:6px} .field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px; border:1px solid var(--ca-border);border-radius:var(--ca-radius-sm);background:var(--ca-surface);color:var(--ca-ink)} .field textarea{min-height:90px;resize:vertical} .field.error input,.field.error select,.field.error textarea{border-color:var(--ca-danger)} .field-error{font-size:12px;color:var(--ca-danger);margin-top:4px} .field-help{font-size:12px;color:var(--ca-ink-subtle);margin-top:4px} .field-group{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fieldset{border:0;padding:0;margin:0 0 32px} .fieldset legend{font-size:16px;font-weight:400;color:var(--ca-ink);padding:0;margin-bottom:16px} .field ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap} .field ul li label{display:flex;align-items:center;gap:6px;font-weight:400;color:var(--ca-ink);margin:0} .field ul li input{width:auto} .filters{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-end} .filters select,.filters input{font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--ca-border); border-radius:var(--ca-radius-sm);background:var(--ca-surface)} .filters label{display:block;font-size:12px;font-weight:600;color:var(--ca-ink-muted);margin-bottom:4px} .tabs2{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--ca-border);flex-wrap:wrap} .tabs2 a{border:0;background:transparent;font:inherit;font-size:14px;padding:10px 16px; color:var(--ca-ink-muted);cursor:pointer;text-decoration:none} .tabs2 a.active{color:var(--ca-primary);font-weight:600;box-shadow:inset 0 -2px 0 var(--ca-primary)} .tag-row{display:flex;gap:6px;flex-wrap:wrap} .tag{background:var(--ca-primary-soft);color:var(--ca-primary);font-size:12px;font-weight:600; padding:3px 10px;border-radius:999px} .tag.mut{background:rgba(112,111,111,.10);color:var(--ca-ink-muted)} footer{border-top:1px solid var(--ca-border);padding:20px 0;margin-top:16px} .sign{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ca-ink-subtle)} .sign svg{height:11px;width:auto;opacity:.5} .public-shell{max-width:520px;margin:0 auto;padding:48px 20px} .public-card{background:var(--ca-surface);border:1px solid var(--ca-border);border-radius:var(--ca-radius-md); padding:32px;box-shadow:var(--ca-shadow-sm)} .public-logo{display:flex;justify-content:center;margin-bottom:24px} .public-logo svg{height:32px;color:var(--ca-primary)} .inc-item{border:1px solid var(--ca-border);border-radius:var(--ca-radius-sm);padding:16px;margin-bottom:12px; display:block;text-decoration:none;color:inherit} .inc-item .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:12px} .inc-item .code{font-weight:600;font-size:13px;color:var(--ca-ink-muted)} .inc-item .desc{font-size:14px} .inc-item.attention{border-color:var(--ca-warning)} /* The three data the listing gained when it became the centre's list: who filed each incident, when, and when it closed. Wraps instead of squeezing, because a full name and two dates do not fit a phone in one line. */ .inc-item .inc-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px; font-size:12px;color:var(--ca-ink-muted)} /* ------------------------------------------------------------------------- Additions: classes that replace the mock-up's inline style attributes. ------------------------------------------------------------------------- */ .narrow{max-width:640px;margin:0 auto} .stack-top{margin-top:24px} .stack-top-sm{margin-top:12px} .muted{color:var(--ca-ink-muted)} .subtle{color:var(--ca-ink-subtle);font-size:12px} .center-text{text-align:center} .big-tick{font-size:40px;margin-bottom:12px} .nowrap{white-space:nowrap} .code-cell{font-weight:600} .timeline{background:var(--ca-canvas);border-style:dashed} .timeline .entry{margin-bottom:14px} .timeline .entry:last-child{margin-bottom:0} .timeline .entry-meta{font-size:12px;color:var(--ca-ink-muted);font-weight:600} .timeline .entry-body{font-size:14px;white-space:pre-line} /* Private technician-consultant channel. Deliberately unlike .timeline in every axis a glance uses: solid instead of dashed, tinted instead of canvas-grey, and a coloured rule down the side. The point is that nobody writes a private note into the follow-up the centre reads, or the other way round, because the two blocks never look alike. */ .channel{background:var(--ca-primary-soft);border:1px solid var(--ca-primary); border-left-width:5px} .channel .entry{margin-bottom:14px} .channel .entry:last-child{margin-bottom:0} .channel .entry-meta{font-size:12px;color:var(--ca-primary);font-weight:700} .channel .entry-body{font-size:14px;white-space:pre-line} .channel-note{font-size:12px;color:var(--ca-ink-muted);margin:0 0 12px} .mini-table td{padding:8px 12px} .pagination{display:flex;gap:12px;align-items:center;margin-top:20px;font-size:14px} .import-error{color:var(--ca-danger);font-size:12px;margin:2px 0 0} .import-list{margin:0;padding-left:18px;font-size:13px} .messages{margin-bottom:24px} .chart{width:100%;height:140px} .dl{display:grid;grid-template-columns:180px 1fr;gap:8px 16px;font-size:14px;margin:0} .dl dt{color:var(--ca-ink-muted);font-weight:600;font-size:13px} .dl dd{margin:0} .attachment-link{font-size:14px} /* MFA enrolment */ .qr{display:block;width:224px;height:224px;margin:0 auto; border:1px solid var(--ca-border);border-radius:var(--ca-radius-sm);background:#fff} .secret{display:block;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px;letter-spacing:.06em;word-break:break-all;background:var(--ca-canvas); border:1px solid var(--ca-border);border-radius:var(--ca-radius-sm);padding:10px 12px} .steps{margin:0 0 20px;padding-left:20px;font-size:14px;color:var(--ca-ink-muted)} .steps li{margin-bottom:6px} /* ------------------------------------------------------------------------- Centres and users: vertical centre list on the left, scrolling on its own. Layout. A two-column grid. The row height has to come from the panel on the right ALONE, so the left column takes itself out of the flow: the column is position:relative and contributes no height, and the list inside is position:absolute, pinned to the top and bounded by max-height:100% of that column — which is the row height, which is the panel's height. min-height:0 plus overflow-y:auto is NOT enough on its own, and it was tried first: a grid row is as tall as its tallest item's content, so 35 centres made the row 2086px and stretched the page. Absolute positioning is what stops the list from voting on the row height. Pinning only the top (not bottom:0) is what keeps a single centre from leaving a tall empty box: the list is as tall as its content until it reaches the ceiling, and only then does it scroll. Switching centre. Each entry is a link to a URL fragment, so clicking it is not a request: nothing reloads and the list keeps its scroll position. :target reveals the matching panel. `?centre=` still works and marks one panel .is-default, shown while no fragment is set. The highlight. CSS cannot say "this link points at the current fragment", and there is only one :target per page, so the id has to live on the panel. The correspondence between the Nth link and the Nth panel is therefore spelled out position by position, up to 150 centres. Past that the panels still switch correctly; only the highlight stops following. Doing it any other way would need JavaScript, and this application has none. ------------------------------------------------------------------------- */ .centres-layout{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:20px;align-items:stretch} .centres-col{position:relative;min-height:0} .centres-list{position:absolute;top:0;left:0;right:0;max-height:100%; display:flex;flex-direction:column;gap:2px;overflow-y:auto; background:var(--ca-surface);border:1px solid var(--ca-border);border-radius:var(--ca-radius-md);padding:6px} .centre-link{display:flex;flex-direction:column;gap:2px;padding:9px 12px;text-decoration:none;color:var(--ca-ink); border-radius:var(--ca-radius-sm);border-left:3px solid transparent} .centre-link:hover{background:var(--ca-canvas)} .centre-name{font-size:14px;font-weight:600;line-height:1.3} .centre-count{font-size:12px;color:var(--ca-ink-muted)} .centres-panels{min-width:0} .centre-panel{display:none;min-width:0;scroll-margin-top:24px} .centre-panel:target{display:block} .centres-panels:not(:has(.centre-panel:target)) .centre-panel.is-default{display:block} .panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:4px} .panel-head h2{margin:0} /* The selected centre, highlighted. See the note above for why this is a list of positions rather than one rule. */ .centres-layout:not(:has(.centre-panel:target)) .centre-link.is-default, .centres-layout:has(.centre-panel:nth-of-type(1):target) .centre-link:nth-of-type(1), .centres-layout:has(.centre-panel:nth-of-type(2):target) .centre-link:nth-of-type(2), .centres-layout:has(.centre-panel:nth-of-type(3):target) .centre-link:nth-of-type(3), .centres-layout:has(.centre-panel:nth-of-type(4):target) .centre-link:nth-of-type(4), .centres-layout:has(.centre-panel:nth-of-type(5):target) .centre-link:nth-of-type(5), .centres-layout:has(.centre-panel:nth-of-type(6):target) .centre-link:nth-of-type(6), .centres-layout:has(.centre-panel:nth-of-type(7):target) .centre-link:nth-of-type(7), .centres-layout:has(.centre-panel:nth-of-type(8):target) .centre-link:nth-of-type(8), .centres-layout:has(.centre-panel:nth-of-type(9):target) .centre-link:nth-of-type(9), .centres-layout:has(.centre-panel:nth-of-type(10):target) .centre-link:nth-of-type(10), .centres-layout:has(.centre-panel:nth-of-type(11):target) .centre-link:nth-of-type(11), .centres-layout:has(.centre-panel:nth-of-type(12):target) .centre-link:nth-of-type(12), .centres-layout:has(.centre-panel:nth-of-type(13):target) .centre-link:nth-of-type(13), .centres-layout:has(.centre-panel:nth-of-type(14):target) .centre-link:nth-of-type(14), .centres-layout:has(.centre-panel:nth-of-type(15):target) .centre-link:nth-of-type(15), .centres-layout:has(.centre-panel:nth-of-type(16):target) .centre-link:nth-of-type(16), .centres-layout:has(.centre-panel:nth-of-type(17):target) .centre-link:nth-of-type(17), .centres-layout:has(.centre-panel:nth-of-type(18):target) .centre-link:nth-of-type(18), .centres-layout:has(.centre-panel:nth-of-type(19):target) .centre-link:nth-of-type(19), .centres-layout:has(.centre-panel:nth-of-type(20):target) .centre-link:nth-of-type(20), .centres-layout:has(.centre-panel:nth-of-type(21):target) .centre-link:nth-of-type(21), .centres-layout:has(.centre-panel:nth-of-type(22):target) .centre-link:nth-of-type(22), .centres-layout:has(.centre-panel:nth-of-type(23):target) .centre-link:nth-of-type(23), .centres-layout:has(.centre-panel:nth-of-type(24):target) .centre-link:nth-of-type(24), .centres-layout:has(.centre-panel:nth-of-type(25):target) .centre-link:nth-of-type(25), .centres-layout:has(.centre-panel:nth-of-type(26):target) .centre-link:nth-of-type(26), .centres-layout:has(.centre-panel:nth-of-type(27):target) .centre-link:nth-of-type(27), .centres-layout:has(.centre-panel:nth-of-type(28):target) .centre-link:nth-of-type(28), .centres-layout:has(.centre-panel:nth-of-type(29):target) .centre-link:nth-of-type(29), .centres-layout:has(.centre-panel:nth-of-type(30):target) .centre-link:nth-of-type(30), .centres-layout:has(.centre-panel:nth-of-type(31):target) .centre-link:nth-of-type(31), .centres-layout:has(.centre-panel:nth-of-type(32):target) .centre-link:nth-of-type(32), .centres-layout:has(.centre-panel:nth-of-type(33):target) .centre-link:nth-of-type(33), .centres-layout:has(.centre-panel:nth-of-type(34):target) .centre-link:nth-of-type(34), .centres-layout:has(.centre-panel:nth-of-type(35):target) .centre-link:nth-of-type(35), .centres-layout:has(.centre-panel:nth-of-type(36):target) .centre-link:nth-of-type(36), .centres-layout:has(.centre-panel:nth-of-type(37):target) .centre-link:nth-of-type(37), .centres-layout:has(.centre-panel:nth-of-type(38):target) .centre-link:nth-of-type(38), .centres-layout:has(.centre-panel:nth-of-type(39):target) .centre-link:nth-of-type(39), .centres-layout:has(.centre-panel:nth-of-type(40):target) .centre-link:nth-of-type(40), .centres-layout:has(.centre-panel:nth-of-type(41):target) .centre-link:nth-of-type(41), .centres-layout:has(.centre-panel:nth-of-type(42):target) .centre-link:nth-of-type(42), .centres-layout:has(.centre-panel:nth-of-type(43):target) .centre-link:nth-of-type(43), .centres-layout:has(.centre-panel:nth-of-type(44):target) .centre-link:nth-of-type(44), .centres-layout:has(.centre-panel:nth-of-type(45):target) .centre-link:nth-of-type(45), .centres-layout:has(.centre-panel:nth-of-type(46):target) .centre-link:nth-of-type(46), .centres-layout:has(.centre-panel:nth-of-type(47):target) .centre-link:nth-of-type(47), .centres-layout:has(.centre-panel:nth-of-type(48):target) .centre-link:nth-of-type(48), .centres-layout:has(.centre-panel:nth-of-type(49):target) .centre-link:nth-of-type(49), .centres-layout:has(.centre-panel:nth-of-type(50):target) .centre-link:nth-of-type(50), .centres-layout:has(.centre-panel:nth-of-type(51):target) .centre-link:nth-of-type(51), .centres-layout:has(.centre-panel:nth-of-type(52):target) .centre-link:nth-of-type(52), .centres-layout:has(.centre-panel:nth-of-type(53):target) .centre-link:nth-of-type(53), .centres-layout:has(.centre-panel:nth-of-type(54):target) .centre-link:nth-of-type(54), .centres-layout:has(.centre-panel:nth-of-type(55):target) .centre-link:nth-of-type(55), .centres-layout:has(.centre-panel:nth-of-type(56):target) .centre-link:nth-of-type(56), .centres-layout:has(.centre-panel:nth-of-type(57):target) .centre-link:nth-of-type(57), .centres-layout:has(.centre-panel:nth-of-type(58):target) .centre-link:nth-of-type(58), .centres-layout:has(.centre-panel:nth-of-type(59):target) .centre-link:nth-of-type(59), .centres-layout:has(.centre-panel:nth-of-type(60):target) .centre-link:nth-of-type(60), .centres-layout:has(.centre-panel:nth-of-type(61):target) .centre-link:nth-of-type(61), .centres-layout:has(.centre-panel:nth-of-type(62):target) .centre-link:nth-of-type(62), .centres-layout:has(.centre-panel:nth-of-type(63):target) .centre-link:nth-of-type(63), .centres-layout:has(.centre-panel:nth-of-type(64):target) .centre-link:nth-of-type(64), .centres-layout:has(.centre-panel:nth-of-type(65):target) .centre-link:nth-of-type(65), .centres-layout:has(.centre-panel:nth-of-type(66):target) .centre-link:nth-of-type(66), .centres-layout:has(.centre-panel:nth-of-type(67):target) .centre-link:nth-of-type(67), .centres-layout:has(.centre-panel:nth-of-type(68):target) .centre-link:nth-of-type(68), .centres-layout:has(.centre-panel:nth-of-type(69):target) .centre-link:nth-of-type(69), .centres-layout:has(.centre-panel:nth-of-type(70):target) .centre-link:nth-of-type(70), .centres-layout:has(.centre-panel:nth-of-type(71):target) .centre-link:nth-of-type(71), .centres-layout:has(.centre-panel:nth-of-type(72):target) .centre-link:nth-of-type(72), .centres-layout:has(.centre-panel:nth-of-type(73):target) .centre-link:nth-of-type(73), .centres-layout:has(.centre-panel:nth-of-type(74):target) .centre-link:nth-of-type(74), .centres-layout:has(.centre-panel:nth-of-type(75):target) .centre-link:nth-of-type(75), .centres-layout:has(.centre-panel:nth-of-type(76):target) .centre-link:nth-of-type(76), .centres-layout:has(.centre-panel:nth-of-type(77):target) .centre-link:nth-of-type(77), .centres-layout:has(.centre-panel:nth-of-type(78):target) .centre-link:nth-of-type(78), .centres-layout:has(.centre-panel:nth-of-type(79):target) .centre-link:nth-of-type(79), .centres-layout:has(.centre-panel:nth-of-type(80):target) .centre-link:nth-of-type(80), .centres-layout:has(.centre-panel:nth-of-type(81):target) .centre-link:nth-of-type(81), .centres-layout:has(.centre-panel:nth-of-type(82):target) .centre-link:nth-of-type(82), .centres-layout:has(.centre-panel:nth-of-type(83):target) .centre-link:nth-of-type(83), .centres-layout:has(.centre-panel:nth-of-type(84):target) .centre-link:nth-of-type(84), .centres-layout:has(.centre-panel:nth-of-type(85):target) .centre-link:nth-of-type(85), .centres-layout:has(.centre-panel:nth-of-type(86):target) .centre-link:nth-of-type(86), .centres-layout:has(.centre-panel:nth-of-type(87):target) .centre-link:nth-of-type(87), .centres-layout:has(.centre-panel:nth-of-type(88):target) .centre-link:nth-of-type(88), .centres-layout:has(.centre-panel:nth-of-type(89):target) .centre-link:nth-of-type(89), .centres-layout:has(.centre-panel:nth-of-type(90):target) .centre-link:nth-of-type(90), .centres-layout:has(.centre-panel:nth-of-type(91):target) .centre-link:nth-of-type(91), .centres-layout:has(.centre-panel:nth-of-type(92):target) .centre-link:nth-of-type(92), .centres-layout:has(.centre-panel:nth-of-type(93):target) .centre-link:nth-of-type(93), .centres-layout:has(.centre-panel:nth-of-type(94):target) .centre-link:nth-of-type(94), .centres-layout:has(.centre-panel:nth-of-type(95):target) .centre-link:nth-of-type(95), .centres-layout:has(.centre-panel:nth-of-type(96):target) .centre-link:nth-of-type(96), .centres-layout:has(.centre-panel:nth-of-type(97):target) .centre-link:nth-of-type(97), .centres-layout:has(.centre-panel:nth-of-type(98):target) .centre-link:nth-of-type(98), .centres-layout:has(.centre-panel:nth-of-type(99):target) .centre-link:nth-of-type(99), .centres-layout:has(.centre-panel:nth-of-type(100):target) .centre-link:nth-of-type(100), .centres-layout:has(.centre-panel:nth-of-type(101):target) .centre-link:nth-of-type(101), .centres-layout:has(.centre-panel:nth-of-type(102):target) .centre-link:nth-of-type(102), .centres-layout:has(.centre-panel:nth-of-type(103):target) .centre-link:nth-of-type(103), .centres-layout:has(.centre-panel:nth-of-type(104):target) .centre-link:nth-of-type(104), .centres-layout:has(.centre-panel:nth-of-type(105):target) .centre-link:nth-of-type(105), .centres-layout:has(.centre-panel:nth-of-type(106):target) .centre-link:nth-of-type(106), .centres-layout:has(.centre-panel:nth-of-type(107):target) .centre-link:nth-of-type(107), .centres-layout:has(.centre-panel:nth-of-type(108):target) .centre-link:nth-of-type(108), .centres-layout:has(.centre-panel:nth-of-type(109):target) .centre-link:nth-of-type(109), .centres-layout:has(.centre-panel:nth-of-type(110):target) .centre-link:nth-of-type(110), .centres-layout:has(.centre-panel:nth-of-type(111):target) .centre-link:nth-of-type(111), .centres-layout:has(.centre-panel:nth-of-type(112):target) .centre-link:nth-of-type(112), .centres-layout:has(.centre-panel:nth-of-type(113):target) .centre-link:nth-of-type(113), .centres-layout:has(.centre-panel:nth-of-type(114):target) .centre-link:nth-of-type(114), .centres-layout:has(.centre-panel:nth-of-type(115):target) .centre-link:nth-of-type(115), .centres-layout:has(.centre-panel:nth-of-type(116):target) .centre-link:nth-of-type(116), .centres-layout:has(.centre-panel:nth-of-type(117):target) .centre-link:nth-of-type(117), .centres-layout:has(.centre-panel:nth-of-type(118):target) .centre-link:nth-of-type(118), .centres-layout:has(.centre-panel:nth-of-type(119):target) .centre-link:nth-of-type(119), .centres-layout:has(.centre-panel:nth-of-type(120):target) .centre-link:nth-of-type(120), .centres-layout:has(.centre-panel:nth-of-type(121):target) .centre-link:nth-of-type(121), .centres-layout:has(.centre-panel:nth-of-type(122):target) .centre-link:nth-of-type(122), .centres-layout:has(.centre-panel:nth-of-type(123):target) .centre-link:nth-of-type(123), .centres-layout:has(.centre-panel:nth-of-type(124):target) .centre-link:nth-of-type(124), .centres-layout:has(.centre-panel:nth-of-type(125):target) .centre-link:nth-of-type(125), .centres-layout:has(.centre-panel:nth-of-type(126):target) .centre-link:nth-of-type(126), .centres-layout:has(.centre-panel:nth-of-type(127):target) .centre-link:nth-of-type(127), .centres-layout:has(.centre-panel:nth-of-type(128):target) .centre-link:nth-of-type(128), .centres-layout:has(.centre-panel:nth-of-type(129):target) .centre-link:nth-of-type(129), .centres-layout:has(.centre-panel:nth-of-type(130):target) .centre-link:nth-of-type(130), .centres-layout:has(.centre-panel:nth-of-type(131):target) .centre-link:nth-of-type(131), .centres-layout:has(.centre-panel:nth-of-type(132):target) .centre-link:nth-of-type(132), .centres-layout:has(.centre-panel:nth-of-type(133):target) .centre-link:nth-of-type(133), .centres-layout:has(.centre-panel:nth-of-type(134):target) .centre-link:nth-of-type(134), .centres-layout:has(.centre-panel:nth-of-type(135):target) .centre-link:nth-of-type(135), .centres-layout:has(.centre-panel:nth-of-type(136):target) .centre-link:nth-of-type(136), .centres-layout:has(.centre-panel:nth-of-type(137):target) .centre-link:nth-of-type(137), .centres-layout:has(.centre-panel:nth-of-type(138):target) .centre-link:nth-of-type(138), .centres-layout:has(.centre-panel:nth-of-type(139):target) .centre-link:nth-of-type(139), .centres-layout:has(.centre-panel:nth-of-type(140):target) .centre-link:nth-of-type(140), .centres-layout:has(.centre-panel:nth-of-type(141):target) .centre-link:nth-of-type(141), .centres-layout:has(.centre-panel:nth-of-type(142):target) .centre-link:nth-of-type(142), .centres-layout:has(.centre-panel:nth-of-type(143):target) .centre-link:nth-of-type(143), .centres-layout:has(.centre-panel:nth-of-type(144):target) .centre-link:nth-of-type(144), .centres-layout:has(.centre-panel:nth-of-type(145):target) .centre-link:nth-of-type(145), .centres-layout:has(.centre-panel:nth-of-type(146):target) .centre-link:nth-of-type(146), .centres-layout:has(.centre-panel:nth-of-type(147):target) .centre-link:nth-of-type(147), .centres-layout:has(.centre-panel:nth-of-type(148):target) .centre-link:nth-of-type(148), .centres-layout:has(.centre-panel:nth-of-type(149):target) .centre-link:nth-of-type(149), .centres-layout:has(.centre-panel:nth-of-type(150):target) .centre-link:nth-of-type(150){ background:var(--ca-primary-soft);color:var(--ca-primary);border-left-color:var(--ca-primary)} @media (max-width:900px){ .grid{grid-template-columns:1fr 1fr} .field-group{grid-template-columns:1fr} .grid.g3{grid-template-columns:1fr} .dl{grid-template-columns:1fr} /* The users table needs the full width, so the two zones stack and the centre list keeps a scrollbar of its own instead of pushing the panel off the screen. */ .centres-layout{grid-template-columns:1fr} .centres-list{position:static;max-height:280px} } @media (max-width:640px){ h1{font-size:24px} .centres-list{position:static;max-height:220px} .panel-head{flex-direction:column;gap:8px} .card{padding:16px} .grid,.grid.g2{grid-template-columns:1fr} table thead{display:none} table,tbody,tr,td{display:block;width:100%} tr{border:1px solid var(--ca-border);border-radius:var(--ca-radius-sm); padding:12px;margin-bottom:12px;background:var(--ca-surface)} td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:16px;text-align:right} td::before{content:attr(data-label);font-size:12px;font-weight:600;color:var(--ca-ink-muted);text-align:left} }