/* CP Energy design layer (docs/DESIGN.md). Loaded after the page's own styles: it changes how things look
   (type, surfaces, borders, focus), not where they are. Refined Oct 26 with the ui-styling skill's approach:
   crisp 1px borders, quiet shadows, 8-12 px corners, restrained colour, flat surfaces (no gradients, no
   glows, no hover lifts). Shared with CP Energy Feedback Station: white, dark grey, dark blue #144A86, light blues. */
:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --line:#E4E7EC; --line-2:#D0D5DD;
  --fg:#1F242B; --muted:#5B636D;
  --ink:#144A86; --ink-2:#0F3A6B; --ink-fg:#FFFFFF; --accent:#144A86; --on-accent:#FFFFFF;
  --accent-soft:#E3EBF5; --accent-fg:#0F3A6B; --sky:#95B2D5; --sky-3:#EEF3F9;
  --info:#2F67A8; --info-soft:#EEF3F9;
  --f-display:"Outfit","Barlow Semi Condensed",system-ui,sans-serif;
  --f-body:"Work Sans","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --shadow-2:0 8px 24px rgba(16,24,40,.10),0 2px 4px rgba(16,24,40,.05);
  --ring:0 0 0 3px rgba(20,74,134,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}
body{font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;background:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}

/* header: flat brand blue with a hairline edge */
.top{background:var(--ink);padding:10px 20px;min-height:60px;border-bottom:1px solid var(--ink-2);box-shadow:none;position:relative;z-index:5}
.mark{width:32px;height:32px;border-radius:8px;box-shadow:none}
.logo h1{font-size:18px;letter-spacing:-.01em}
.gsearch input{border-radius:8px}

/* side menu (the phone layout turns it into a bottom bar, so sizes only apply above 680px) */
nav.rail{background:var(--surface);border-right-color:var(--line)}
.navbtn{border-radius:8px;color:var(--muted);transition:background 120ms var(--ease),color 120ms var(--ease)}
.navbtn:hover{background:#F1F4F8;color:var(--fg)}
.navbtn[aria-current="page"]{background:var(--accent-soft);color:var(--ink);font-weight:600}
.navbtn[aria-current="page"] .count{background:var(--ink);color:#fff}
.navbtn .count{border-radius:6px;font-weight:500}
@media (min-width:681px){
  nav.rail{padding:14px 10px;gap:2px}
  .navbtn{padding:9px 12px;min-height:40px}
}
.fbnav{margin-top:10px;border-top:1px solid var(--line);border-radius:0;padding-top:14px}
.fbnav:hover{border-radius:8px}
.fbnav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.access{border-top-color:var(--line)}

/* lists */
.list{background:var(--bg)}
.listhead{background:var(--surface)}
.listhead{padding:20px 18px 12px;gap:12px;border-bottom-color:var(--line)}
.listhead h2{font-size:24px;letter-spacing:-.02em}
.items{padding:12px;gap:8px;background:var(--bg)}
.item{border-radius:10px;padding:13px 14px;box-shadow:var(--shadow);border-color:var(--line);transition:border-color 120ms var(--ease),background 120ms var(--ease)}
.item:hover{border-color:var(--line-2);background:var(--surface-2)}
.item[aria-current="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--surface)}
.kind{width:32px;height:32px;border-radius:8px}
.chip{border-radius:6px;padding:2px 8px;font-weight:500;letter-spacing:0}
.role{border-radius:6px}
.search,.compose input,.field input,.field select,.field textarea{border-color:var(--line-2);border-radius:8px;background:var(--surface);min-height:40px;
  transition:border-color 120ms var(--ease),box-shadow 120ms var(--ease)}
.search:focus,.compose input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:var(--ring)}
.seg{border:0;background:#EEF1F5;border-radius:9px;padding:3px;gap:2px}
.seg button{border-radius:7px;min-height:32px;transition:background 120ms var(--ease),color 120ms var(--ease)}
.seg button[aria-pressed="true"]{color:var(--fg);box-shadow:0 1px 2px rgba(16,24,40,.10),0 0 0 1px rgba(16,24,40,.04)}

/* buttons */
.btn,.xlbtn,.newbtn,.copy{border-radius:8px;font-weight:600;transition:background 120ms var(--ease),border-color 120ms var(--ease)}
.btn,.xlbtn,.newbtn{min-height:38px;padding:8px 14px}
.btn,.xlbtn{border-color:var(--line-2);background:var(--surface)}
.btn:hover,.xlbtn:hover{background:var(--surface-2);border-color:var(--line-2)}
.btn.primary,.newbtn{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.btn.primary:hover,.newbtn:hover{background:var(--ink-2);border-color:var(--ink-2);filter:none}
.btn:disabled{opacity:.55;cursor:progress}
.btn.sm{min-height:32px;padding:5px 11px;font-size:13.5px}

/* detail */
.detail{padding:24px;gap:16px}
.dhead h2,.dhead h3{font-size:26px;letter-spacing:-.02em}
.panel,.vis,.banner,.email{border-radius:12px}
.panel{box-shadow:var(--shadow);padding:16px 18px;border-color:var(--line)}
.panel h4,.card h4,.vis h4,.banner h4{letter-spacing:.06em;font-size:11.5px}
.vis{border-color:#CFDDEE;background:var(--sky-3)}
.pp{border-radius:8px}

/* dashboard */
#dash{padding:24px;gap:20px}
.dgrid{gap:16px}
.hello h2{font-size:30px;letter-spacing:-.02em}
.card{border-radius:12px;padding:18px 20px;box-shadow:var(--shadow);border-color:var(--line);gap:12px}
.sup{background:var(--ink);border-color:var(--ink);box-shadow:none}
.tile{border-radius:10px;background:var(--surface);box-shadow:none;border:1px solid var(--line);position:relative;padding:12px 14px 12px 16px;transition:border-color 120ms var(--ease),background 120ms var(--ease)}
.tile::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.tile:hover{border-color:var(--line-2);background:var(--surface-2)}
.tile b{font-size:28px;letter-spacing:-.02em}
.wd{border-radius:8px;background:var(--surface)}
.wd.today{border-color:var(--ink);box-shadow:inset 0 2px 0 var(--ink)}
.node{border-radius:10px;box-shadow:var(--shadow)}
.contact div{border-radius:8px}

/* dialogs */
.modal{background:rgba(16,24,40,.45);animation:cpfade 140ms ease-out}
.sheet{border-radius:14px;box-shadow:var(--shadow-2);padding:24px;border-color:var(--line);animation:cprise 160ms var(--ease)}
.sheet h3{font-size:20px;letter-spacing:-.01em}
@keyframes cpfade{from{opacity:0}} @keyframes cprise{from{opacity:0;transform:translateY(6px)}}

/* feedback form */
.fb .fbhead{display:flex;gap:12px;align-items:flex-start}
.fb .fbhead .note{margin-top:2px}
.fbicon{width:38px;height:38px;border-radius:10px;background:var(--sky-3);color:var(--ink);display:grid;place-items:center;flex:none}
.fbicon.warn{background:var(--warn-soft);color:var(--warn)}
.fbicon svg,.fbkind svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fbkinds{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fbkinds[hidden]{display:none}
.fbkind{position:relative;cursor:pointer}
.fbkind input{position:absolute;opacity:0;inset:0;cursor:pointer}
.fbkind span{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line-2);border-radius:10px;padding:12px;height:100%;
  transition:border-color 120ms var(--ease),background 120ms var(--ease)}
.fbkind span svg{color:var(--muted)}
.fbkind b{font-family:var(--f-display);font-weight:600;font-size:14.5px}
.fbkind small{color:var(--muted);font-size:12.5px;line-height:1.35}
.fbkind:hover span{border-color:var(--sky)}
.fbkind input:checked + span{border-color:var(--ink);background:var(--sky-3);box-shadow:0 0 0 1px var(--ink)}
.fbkind input:checked + span svg{color:var(--ink)}
.fbkind input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.fbhint{color:var(--muted);font-size:12.5px}
.fbcheck{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);cursor:pointer}
.fbcheck input{width:17px;height:17px;accent-color:var(--ink)}
.fberr{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:13.5px}
.fbmsg{margin:0;color:var(--warn);font-weight:500}
/* "Your feedback and replies" under the Send feedback form */
.fbmine{border-top:1px solid var(--line);padding-top:12px}
.fbmine summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:14px}
.fbmine-body{margin-top:10px;max-height:260px;overflow:auto}
.fbmine-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fbmine-list li{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.fbmine-list p{margin:4px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.fbst{display:inline-block;font-size:12px;font-weight:600;padding:1px 8px;border-radius:6px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.fbst.st-reviewing,.fbst.st-planned{color:var(--ink);border-color:var(--sky)}
.fbst.st-done{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.fbwhen{margin-left:8px;color:var(--muted);font-size:12.5px}
.fbreply{margin-top:8px;padding:8px 10px;border-left:3px solid var(--ink);background:var(--sky-3);border-radius:0 8px 8px 0}
.fbreply b{font-size:12.5px;color:var(--ink)}
.fbprompt{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;gap:12px;align-items:flex-start;max-width:min(380px,calc(100% - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);padding:16px;animation:cprise 180ms var(--ease)}
.fbprompt b{font-family:var(--f-display);font-size:15.5px}
.fbprompt p{margin:3px 0 10px;color:var(--muted);font-size:13.5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:680px){
  .fbnav{display:none}                                   /* phones: Send feedback is in the profile menu */
  .fbkinds{grid-template-columns:1fr}
  .fbprompt{left:16px;right:16px;bottom:84px;max-width:none}
  .detail{padding:16px}
  #dash{padding:16px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Assign / share picker: the .field input rule above (full width, 40px tall) must not reach its radios and checkboxes. */
.field .picker input[type=radio],.field .picker input[type=checkbox]{width:16px;height:16px;min-height:0;padding:0;margin:0;flex:none;border:0;box-shadow:none;background:none;accent-color:var(--ink)}
.field .picker input[type=radio]:focus-visible,.field .picker input[type=checkbox]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.picker label{justify-content:flex-start;text-align:left;min-height:36px;flex:none;overflow-wrap:anywhere}
.picker small{margin-left:auto;text-align:right}
.cp-busy,.cp-busy *{cursor:progress!important}   /* the task form is waiting for the directory */

/* iPhone/iPad Safari zooms the page in whenever a text box under 16px gets focus (and leaves it zoomed, so the
   Send button ends up off screen). Every text box is 16px on every device, so this never depends on the browser
   reporting a touch screen correctly. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),textarea,select,[contenteditable="true"]{font-size:16px!important}

/* Dark mode (switch in the top banner, js/theme.js). The base dark colours are in app-model.html;
   these are the design layer's extra tokens and the few hard-coded light surfaces above. */
:root[data-theme="dark"]{
  --bg:#0F141A; --surface:#171E27; --surface-2:#1D2631; --line:#2A3542; --line-2:#3A4858;
  --fg:#E6EBF1; --muted:#9DA8B5;
  --ink:#0E2F57; --ink-2:#0A2442; --ink-fg:#EAF0F7; --accent:#7FA7D8; --on-accent:#0B1E36;
  --accent-soft:#1B3253; --accent-fg:#CFE0F5; --sky:#4F6F96; --sky-3:#1A2633; --info:#8DB3E0; --info-soft:#172B44;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 8px 24px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  --ring:0 0 0 3px rgba(127,167,216,.35);
  color-scheme:dark;
}
:root[data-theme="dark"] .navbtn:hover{background:var(--surface-2)}
:root[data-theme="dark"] .seg{background:#0F151C}
:root[data-theme="dark"] .modal{background:rgba(0,0,0,.6)}

/* The light/dark switch in the top banner */
.themebtn{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;margin-left:auto}
.themebtn:hover{background:rgba(255,255,255,.16)}
.themebtn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.themebtn svg{width:19px;height:19px}
.themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .sun{display:block}
:root[data-theme="dark"] .themebtn .moon{display:none}
.themebtn + .me{margin-left:0}
/* Dark: the selected menu item and the filled buttons use the light accent so they stay readable */
:root[data-theme="dark"] .navbtn[aria-current="page"]{background:var(--accent-soft);color:var(--accent-fg)}
:root[data-theme="dark"] .navbtn[aria-current="page"] .count{background:var(--accent);color:var(--on-accent)}
:root[data-theme="dark"] :is(.btn.primary,.newbtn,.ch-new.btn,.ch-new){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}