/* Mentee cabinet. Look carried over from the prototype the team approved
   (cabinet-prototype branch, 15.10); fonts are self-hosted so no page of the
   cabinet talks to Google Fonts. Golos Text is variable (400-600). */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/golos-text-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/golos-text-latin.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:"Unbounded";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/unbounded-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/unbounded-latin.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{
  --bg:#F7F7F2; --surface:#FFFFFF; --ink:#1D1C16; --muted:#6B6A5E; --line:#E3E2D8;
  --accent:#F2D53C; --accent-ink:#1D1C16; --accent-soft:#FBF1B8;
  --ok:#2F7D4A; --ok-soft:#E1F1E5; --warn:#A35D00; --warn-soft:#FCEBD0; --off:#8A897C; --off-soft:#EFEEE6;
  --f-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15150F; --surface:#1F1E17; --ink:#F1F0E6; --muted:#A6A495; --line:#34332A;
  --accent:#F2D53C; --accent-ink:#1D1C16; --accent-soft:#3A3416;
  --ok:#7CCB93; --ok-soft:#1E3324; --warn:#F2B05C; --warn-soft:#3A2A12; --off:#9A988A; --off-soft:#2A2920; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15150F; --surface:#1F1E17; --ink:#F1F0E6; --muted:#A6A495; --line:#34332A;
  --accent:#F2D53C; --accent-ink:#1D1C16; --accent-soft:#3A3416;
  --ok:#7CCB93; --ok-soft:#1E3324; --warn:#F2B05C; --warn-soft:#3A2A12; --off:#9A988A; --off-soft:#2A2920; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:none;margin:0 auto;padding-block:20px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;margin:0}
h1{font-size:24px} h2{font-size:18px} h3{font-size:15px;font-family:var(--f-body);font-weight:600}
.muted{color:var(--muted)} .small{font-size:13px} .mono{font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;text-decoration:none;line-height:1.3}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn.sm{font-size:13px;padding:4px 10px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:14px;margin-bottom:12px}
.brand img{width:36px;height:36px}

/* login + programme picker */
.center{max-width:420px;margin:32px auto;display:grid;gap:16px}
.field{display:grid;gap:6px}
.field input{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.field input.code{font-family:var(--f-mono);font-size:22px;letter-spacing:.3em}
.msg{font-size:14px;border-radius:8px;padding:10px 12px;background:var(--off-soft)}
.msg.err{background:var(--warn-soft);color:var(--warn)}
.linkbtn{border:0;background:none;padding:0;text-decoration:underline;color:var(--muted);font-size:14px;justify-self:start}
.prog{display:grid;gap:4px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px}
.prog:hover{border-color:var(--ink)}

/* shell */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px}
.side{display:grid;gap:4px;align-content:start;position:sticky;top:12px}
.side .who{padding:8px 10px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.nav{display:flex;align-items:center;gap:8px;text-align:left;border:0;background:none;border-radius:8px;padding:9px 10px;text-decoration:none}
.nav[aria-current="page"]{background:var(--accent-soft);font-weight:600}
.nav .ext{margin-left:auto;font-size:12px;color:var(--muted)}
.nav.out{color:var(--muted);margin-top:8px}
main{display:grid;gap:20px;min-width:0;align-content:start}
.head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:end;justify-content:space-between}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;border-radius:999px;padding:2px 10px;font-weight:500;white-space:nowrap}
.t-webinar{background:var(--accent-soft)} .t-offline{background:var(--off-soft)} .t-onboarding{background:var(--ok-soft);color:var(--ok)}
.s-ok{background:var(--ok-soft);color:var(--ok)} .s-new{background:var(--off-soft);color:var(--off)}
.next{display:grid;gap:10px;border-color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.list{display:grid;gap:8px}
.ev{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.ev .date{font-family:var(--f-mono);font-size:13px;line-height:1.3}
.ev .date b{display:block;font-size:18px;font-family:var(--f-display);font-weight:500}
.ev details{margin-top:4px;font-size:14px}
.ev summary{cursor:pointer;color:var(--muted);font-size:13px}
.block{display:grid;gap:8px}
.block>h3{display:flex;justify-content:space-between;gap:8px;padding:0 2px}
.rec{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-align:left;width:100%;text-decoration:none}
.rec:hover{border-color:var(--ink)}
.tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:11px}
.tick.has{border-color:var(--ink)}

/* recording */
.video{aspect-ratio:16/9;width:100%;border:0;border-radius:var(--r);background:#14130E;display:block}
.screen{aspect-ratio:16/9;width:100%;border:0;border-radius:var(--r);background:#14130E;color:#F1F0E6;display:grid;place-items:center;text-align:center;padding:16px}
.note{font-size:13px;color:var(--muted);border-left:3px solid var(--accent);padding-left:10px;margin:0}
.desc{margin:0;overflow-wrap:anywhere}
ul.desc{padding-left:20px;display:grid;gap:4px}
.mprog{display:none;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14px}
.mprog span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot{margin-top:32px;font-size:13px;color:var(--muted);text-align:center}
.loading{padding:40px 0;text-align:center;color:var(--muted)}

/* stage 2: event page, settings, mailings */
/* An event card opens its page from anywhere on it (Maryna, 29.10); the title
   link is stretched over the card, buttons and links stay on top of it. */
.evlink{text-decoration:none}
.ev,.ev-card{position:relative;cursor:pointer}
.ev .evlink::after,.ev-card .evlink::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.ev .act,.ev-card .act{position:relative;z-index:1}
.ev:hover,.ev-card:hover{border-color:var(--ink)}
.ev:hover .evlink,.ev-card:hover .evlink{text-decoration:underline}
.more{color:var(--muted);margin-top:4px}
.switch{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.switch input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a{padding:8px 12px;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;color:var(--muted)}
.tabs a[aria-selected="true"]{border-color:var(--ink);color:var(--ink);font-weight:600}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 14px}
.seg button[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.item{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.post{display:grid;gap:10px}
.post textarea{font:inherit;font-size:14px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);resize:vertical}
.post .msg{margin:0}
.s-warn{background:var(--warn-soft);color:var(--warn)}

@media (max-width:760px){
  .item{grid-template-columns:minmax(0,1fr)}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static;display:flex;overflow-x:auto;gap:4px;padding-bottom:4px}
  .side .who{display:none}
  .mprog{display:flex}
  .nav{white-space:nowrap}
  .nav.out{margin-top:0}
  .ev{grid-template-columns:64px minmax(0,1fr)} .ev .act{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Site: site texts, one row per { de, en, uk } text */
.site{display:grid;gap:10px}
.site .fld{display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.site .fld[data-missing]{border-color:var(--warn)}
.site .langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.site .lang{display:grid;gap:4px;align-content:start}
.site textarea{font:inherit;font-size:14px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);resize:vertical}
.site .grp{border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.site .grp>summary{cursor:pointer;padding:10px 12px;font-weight:600;font-size:14px}
.site .grp-in{display:grid;gap:10px;padding:0 10px 10px}
.site.only-missing .fld:not([data-missing]),.site.only-missing .grp:not([data-missing]){display:none}
.savebar{position:sticky;bottom:0;display:grid;gap:8px;background:var(--bg);padding:12px 0;border-top:1px solid var(--line)}
.savebar .btn{justify-self:start}
.savebar .msg{margin:0}
@media (max-width:760px){.site .langs{grid-template-columns:minmax(0,1fr)}}
.btn.back{justify-self:start}
/* A file's editor: the way back sits on the title's line. */
.headl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.headl h1{margin:0}
.site textarea{overflow:hidden;min-height:38px}

/* Site lists: events, testimonials, team */
.lst{display:grid;gap:10px}
.lst>.btn{justify-self:start}
.lsthead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.litem{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.litem.open{border-color:var(--ink)}
.lhead{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px}
.lt{border:0;background:none;text-align:left;font-weight:600;padding:4px 2px;flex:1;min-width:0;overflow-wrap:anywhere}
.lbtns{display:flex;gap:4px;flex:none}
.lbody{display:grid;gap:10px;padding:0 10px 12px}
.lbody .fld{border:0;padding:0;background:none}
.site select{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);max-width:100%}
.phs{display:flex;flex-wrap:wrap;gap:8px}
.ph{display:grid;gap:4px;justify-items:start;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--bg)}
.ph img{width:96px;height:96px;object-fit:cover;border-radius:6px}
.ph.off{opacity:.5;text-decoration:line-through}
.ph.off img{filter:grayscale(1)}
.site textarea[readonly]{opacity:.7}
@media (max-width:760px){.lhead{flex-wrap:wrap}}
.ph img.logo{width:auto;max-width:240px;height:64px;object-fit:contain;background:#fff}
.fld>label.btn{justify-self:start}

/* /admin/: the website admin on its own page */
.adminbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.adminbar .brand{margin:0}
.adminlinks{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adminmain{max-width:none}
.site.only-missing .litem:not([data-missing]){display:none}
.site.only-missing .grp:has(.litem[data-missing]){display:block}

/* start screen: cards for the lists that keep growing, rows for the rest */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.dcard:hover{border-color:var(--ink)}
.dcard h3{font-family:var(--f-display);font-weight:500;font-size:16px;margin-bottom:4px}
.dcard .btn{position:relative;z-index:1;margin-top:auto}
.dcard>.small:last-of-type,.dcard>.chip{margin-bottom:8px}
.cover{color:inherit;text-decoration:none}
.cover::after{content:"";position:absolute;inset:0;border-radius:inherit}
.rec{position:relative}
.rowend{display:flex;gap:10px;align-items:center}
.rowend .ext{position:relative;z-index:1;color:var(--muted)}
.block>h2{font-size:16px;padding:0 2px}
.msg.warnline{background:var(--warn-soft)}
.msg.warnline a{color:inherit}

/* The Ukrainian version of a title, next to the English one. */
.uk-hint{font-size:.85em;font-weight:400;opacity:.55;margin-left:.35em}
/* A list inside a list item (a chart's rows): indented. */
.lst.inner{margin-left:10px;padding-left:10px;border-left:2px solid var(--line, #ddd)}
/* Icon editor (text cards): the icon on its colored circle; circle colors; a grid of the site's icons. */
.icopick summary{display:flex;gap:8px;align-items:center;cursor:pointer}
.icobadge{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid #1D1C16}
.icocolors{gap:8px;align-items:center;margin-top:10px}
.sw{cursor:pointer}
.colorpick{gap:8px;align-items:center}
.colorpick .sw{position:relative}
.sw input,.ico input{position:absolute;opacity:0;pointer-events:none}
.sw span{display:block;width:26px;height:26px;border-radius:50%;border:2px solid var(--line)}
.sw input:checked+span{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.sw input:disabled+span{opacity:.35;cursor:not-allowed}
.icogrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ico{display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--line);border-radius:var(--r);cursor:pointer;background:var(--surface)}
.ico:has(input:checked){border-color:var(--ink);background:var(--accent-soft)}
/* Add menu («＋ Add ▾»): a button that opens a list of types to add. */
.addmenu{position:relative;display:inline-block}
.addmenu>summary{list-style:none;cursor:pointer}
.addmenu>summary::-webkit-details-marker{display:none}
.addmenu .menu{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:260px;max-width:min(420px,90vw);display:grid;gap:2px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.addmenu .menu button{display:grid;gap:2px;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;cursor:pointer}
.addmenu .menu button:hover,.addmenu .menu button:focus-visible{background:var(--accent-soft)}
.addmenu .menu button:disabled{opacity:.45;cursor:not-allowed;background:none}
/* Switches of a list item (Border, Full width…) side by side. */
.switches{display:flex;flex-wrap:wrap;gap:6px 24px}
/* Start screen: two columns on wide screens (content cards | pages and settings), one below. */
.dash,.dashcol{display:grid;gap:24px;align-content:start}
@media (min-width:1100px){.dash{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}}
.dash .block{align-content:start}
/* DE · EN · UK once per group: a three-language field after another one in the same
   group (section, card, list item) lines up in the same columns, so it shows no
   labels. Stacked languages (narrow screens) and the "only untranslated" filter
   (which hides fields) keep them on every field. Each field keeps its language
   for screen readers (aria-label). */
@media (min-width:761px){
  .site:not(.only-missing) .fld:has(> .langs) ~ .fld:has(> .langs) .langtag{display:none}
}
/* A page block's title line: the title, and ↑ ↓ Remove on the right (also when collapsed). */
details.blk>summary{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
details.blk>summary{list-style:none}
details.blk>summary::-webkit-details-marker{display:none}
details.blk>summary::before{content:'▶';font-size:.75em;flex:0 0 auto}
details.blk[open]>summary::before{content:'▼'}
details.blk>summary .blktitle{flex:1 1 320px;min-width:0}
details.blk>summary .blkbtns{display:flex;gap:6px;margin-left:auto}
/* ⓘ hints: the text shows on hover or focus (tap). */
.info{position:relative;display:inline-block;margin-left:4px;color:var(--muted);font-size:13px;font-weight:400;cursor:help;vertical-align:baseline}
.info:hover::after,.info:focus::after{content:attr(data-tip);position:absolute;z-index:30;left:0;top:calc(100% + 6px);width:max-content;max-width:min(380px,80vw);padding:8px 10px;white-space:normal;line-height:1.4;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
h1 .info{font-size:14px}
/* Text boxes grow with their text; no resize handle. */
.site textarea{resize:none}
/* A page block's title line: number, title, type tag, background dot, ↗, ↑ ↓ ✕. */
.blkno{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:6px;background:var(--off-soft);color:var(--muted);font-size:12px;font-weight:600}
.tag{display:inline-block;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:400;vertical-align:middle}
.tag.off{border-style:dashed}
.bgdot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--line);flex:0 0 auto}
.bgdot.bg-white{background:#fff}.bgdot.bg-cream{background:#FDF6D3}
.blkabout{margin:0 0 4px}
details.blk>summary a.ext{text-decoration:none}
/* The page outline and the page's notes: a sticky column on wide screens; below the form otherwise. */
.sitewrap{display:flex;flex-direction:column;gap:16px}
.sitewrap>.sidecol{order:2}
.outline{display:none}
@media (min-width:1100px){
  .sitewrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
  /* The column runs the form's full height: the outline sticks to the top of the window,
     the notes card to its bottom. */
  .sitewrap>.sidecol{order:0;align-self:stretch;display:flex;flex-direction:column;gap:12px}
  .sidecol .outline:not([hidden]){position:sticky;top:12px;max-height:calc(100vh - 150px)}
  .sidecol .notecard{margin-top:auto;position:sticky;bottom:12px}
  .sitewrap:not(:has(.notecard)):has(.outline[hidden]){grid-template-columns:minmax(0,1fr)}
  .outline:not([hidden]){display:block;overflow:auto;min-height:0;font-size:13px}
  .outline ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .outline a{display:block;padding:5px 8px;border-radius:6px;color:var(--muted);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .outline a:hover{background:var(--off-soft);color:var(--ink)}
  .outline a.cur{background:var(--accent-soft);color:var(--ink);font-weight:600}
  .outline .d1 a{padding-left:20px}
}
.site details.grp{scroll-margin-top:12px}
/* Notes: a card with the note's first lines; a click slides a panel in from the left. */
.outline .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin:0 6px;vertical-align:middle}
.notecard{display:grid;gap:4px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;flex:0 0 auto}
.notecard:hover,.notecard:focus-visible{border-color:var(--ink)}
.notepreview{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line;color:var(--ink)}
.notedrawer{position:fixed;inset:0;z-index:60}
.notebackdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.notepanel{position:absolute;top:0;bottom:0;left:0;width:min(600px,100vw);display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--surface);border-right:1px solid var(--line);box-shadow:8px 0 32px rgba(0,0,0,.35);transform:translateX(-100%);transition:transform .2s ease-out}
.notedrawer.open .notebackdrop{opacity:1}
.notedrawer.open .notepanel{transform:none}
.notepanel header{display:flex;align-items:center;gap:10px}
.notepanel header .btn{margin-left:auto}
.notepanel textarea{flex:1;width:100%;font:inherit;font-size:15px;line-height:1.55;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);resize:none}
@media (prefers-reduced-motion:reduce){.notebackdrop,.notepanel{transition:none}}
/* People (team, testimonials): photo on the left, full name beside it. */
.namephoto{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.namephoto>.fld:first-child{margin:0}
@media (max-width:520px){.namephoto{grid-template-columns:minmax(0,1fr)}}
/* Half-width fields side by side (e.g. a team member's group and LinkedIn). */
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.halves{grid-template-columns:minmax(0,1fr)}}
.besidephoto{display:grid;gap:10px;align-content:start}
.ph img.wide{width:auto;max-width:min(480px,100%);height:auto;max-height:280px;object-fit:contain}
.fldhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2px}
/* A section's eye (shown / hidden on the site); a hidden section's title line is dimmed. */
.btn.eye{display:inline-grid;place-items:center;padding:4px;line-height:0;border:0;background:none;box-shadow:none;color:var(--muted)}
.btn.eye:hover,.btn.eye:focus-visible{color:var(--ink)}
details.blk.is-hidden>summary .blktitle,details.blk.is-hidden>summary .bgdot{opacity:.5}
details.blk.is-hidden>summary .btn.eye{color:var(--warn)}

/* The About page's impact section: where its figures come from (the Waves list). */
.wavesinfo{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.wavesinfo p{margin:0}
.wavesinfo .tablewrap{overflow-x:auto}
.wavetable{border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.wavetable th,.wavetable td{padding:3px 8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.wavetable tbody th{text-align:left;font-weight:500;color:var(--muted)}
.wavetable thead th{font-weight:600}

/* Short fields side by side (docs Field.row), e.g. a wave's number, season and year, then its four figures. */
.rowfields{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:end}
.rowfields .fld{flex:0 1 13rem;min-width:8rem}
.rowfields label .muted{display:none} /* "(optional)": the row's hint says what an empty field means */
.rowfields textarea,.rowfields select{width:100%}

/* A few choices side by side (docs Field t: 'radio'), e.g. a card's width. */
.radios{display:flex;flex-wrap:wrap;gap:6px 20px}

/* Hidden on the site: a list item or group with its eye crossed out, its title faded. */
.litem.is-hidden>.lhead .lt,details.grp.is-hidden>summary .grptitle{opacity:.5}
.litem.is-hidden>.lhead .btn.eye,details.grp.is-hidden>summary .btn.eye{color:var(--warn)}
details.grp>summary .btn.eye{float:right;margin:-4px 0}
/* The field a refused save points at (admin.js, revealField) */
.errfld{outline:2px solid var(--warn);outline-offset:4px;border-radius:8px}
.savebar .msg .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* Optional fields that are empty: one line of links where they would be (admin.js, formFor) */
.addfields{display:flex;flex-wrap:wrap;gap:2px 18px}
.addfields .linkbtn{color:var(--ink);opacity:.7}
.addfields .linkbtn:hover,.addfields .linkbtn:focus-visible{opacity:1}
/* A field the screen finds wrong (admin.js, checkField) and the refused save's list of problems */
.fieldmsg{margin:0;color:var(--warn);font-size:13px}
.problems{margin:6px 0 0;padding-left:18px;max-height:30vh;overflow:auto}
.problems .linkbtn{color:inherit;text-align:left;font-size:14px}
/* Near the save button: how many fields are marked */
.saverow{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.problemcount{color:var(--warn);font-weight:600;font-size:14px}
/* A date and an optional time (admin.js, inputFor) */
.datepick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.site input[type=date],.site input[type=time]{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.site input[type=time]:disabled{opacity:.5}
/* A long list's search box and filters (admin.js, filterBar) */
.lfilter{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.site input[type=search]{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);flex:1 1 14rem;min-width:10rem}
.lfilter select{font:inherit;font-size:14px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
/* A group drawn flat (admin.js formFor): its fields sit with its parent's */
.flat{display:contents}
/* A section's look (background, layout, cards per row): radio groups side by side, as wide as their choices */
.rowfields .fld:has(> .radios){flex:0 1 auto}