/* Give Back, on the Brooklyn Sports & Entertainment app template (ai_aws_infrastructure docs/DESIGNING_AN_APP.md and
   docs/design/app-starter.css; Tagger, brooklynse/ai_tagger static/css/app.css, is the first app built on it).

   The arena at night: near-black ground, surfaces told apart by tone and never by a line, bone text, photography
   carries the colour. Copper is live (open, waiting, the one active tab, the one card with a travelling light);
   seafoam is settled (verified, approved, going); bone is neutral. Instrument Serif for the one headline on a page
   and the big numbers; Geist for everything you read or press. Square corners (2 px), no emoji, no caps labels, one
   thin stroke icon set (templates/_icons.html). Motion is feedback, never a page-load show.

   The previous look (fadeaway's amber arena) is kept whole: tag ui-fadeaway-original, docs/UI-ORIGINAL.md.
   Page rules live in giveback.css; this file is the system. Class names the templates and app.js hook (.btn .ghost
   .chip .tile .panel .card .row .q .txt .toast .beam …) are kept and given the template's look. */

/* ---------- the faces, self-hosted (static/fonts, SIL OFL: *-OFL.txt beside each). No call to Google. ---------- */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/InstrumentSerif-Regular-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:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/InstrumentSerif-Regular-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/InstrumentSerif-Italic-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:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/InstrumentSerif-Italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/Geist-Variable-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:"Geist";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/Geist-Variable-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{color-scheme:dark;
  --ink:#F4EFE6;--ink-2:#C7BFB0;--ink-3:#8A8272;
  --ground:#0B0B0B;--surface:#141414;--surface-2:#1A1917;--surface-3:#22201C;--surface-4:#2A2723;--surface-5:#33302B;
  --hdr-bg:rgba(11,11,11,.92);--tabbar-bg:rgba(20,20,20,.96);--row-tint:rgba(244,239,230,.025);--btn-hover:#fff;--shadow:rgba(0,0,0,.55);
  --copper:#B56A3E;--copper-hi:#D98B5A;--copper-lo:#7D4624;--seafoam:#8FB5A8;--seafoam-lo:#5F8A7C;
  --alert:#D9705A;                         /* failed, delete, an error line: a reddened copper, never a new hue */
  --serif:"Instrument Serif","Times New Roman",serif;--sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;--t-hover:180ms;--t-ui:240ms;--t-reveal:800ms;
  --g:12px;--gap-section:28px;
  /* the type roles; the page's inline styles still name some of these */
  --f-body:400 15px/1.5 var(--sans);--f-meta:400 13px/1.45 var(--sans);--f-item:500 14px/1.35 var(--sans);--f-control:500 14px/1.2 var(--sans);
  --f-chip:500 13px/1.2 var(--sans);--f-panel:500 16px/1.3 var(--sans);--f-page:400 34px/1.05 var(--serif);--f-field:400 13px/1.4 var(--sans);
  --f-section:400 13px/1.4 var(--sans);--f-over:400 13px/1.4 var(--sans);--f-count:600 12px/1.2 var(--sans);--f-prose:400 14.5px/1.6 var(--sans);
  --f-stat:400 40px/1 var(--serif);--f-total:400 64px/.95 var(--serif);--f-display:400 28px/1.05 var(--serif);
  /* the previous system's names, mapped onto this one so nothing goes grey or amber */
  --bg:var(--ground);--panel:var(--surface);--panel2:var(--surface-2);--line:var(--surface-3);--mute:var(--ink-3);--soft:var(--ink-2);
  --amber:var(--copper-hi);--amber2:var(--copper-hi);--amber-face:var(--copper-hi);--green:var(--seafoam);--red:var(--alert);--ui:var(--sans);--display:var(--serif)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font:var(--f-body);-webkit-font-smoothing:antialiased;min-height:100%}
a{color:var(--ink);text-decoration:none}
p a,.m a,small a{text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px;transition:color var(--t-hover),text-decoration-color var(--t-hover)}
p a:hover,.m a:hover,small a:hover{color:var(--copper-hi);text-decoration-color:var(--copper-hi)}
::selection{background:var(--copper);color:var(--ink)}
input,select,button,textarea{font:inherit;color:inherit;caret-color:var(--copper-hi)}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
img{display:block}
.sp{flex:1}
.hidden{display:none!important}
.ico{width:1.1em;height:1.1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.m,.note{font-size:13px;color:var(--ink-3)}
.t-over{font:var(--f-over);color:var(--ink-2)}
.lede{font-size:16px;color:var(--ink-2);max-width:60ch;margin:0;text-wrap:pretty}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--surface-4)}
::-webkit-scrollbar-track{background:transparent}
html{scrollbar-color:var(--surface-3) transparent}

/* ---------- the shell: the header, then the page; the page scrolls ---------- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.hdr{position:sticky;top:0;z-index:30;height:68px;display:flex;align-items:center;gap:28px;padding:0 40px;background:var(--hdr-bg);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);flex:none}
.brand{display:flex;align-items:center;gap:16px;flex:none;white-space:nowrap}
.brand .bkse{height:30px;width:auto}
.brand .bar{width:1px;height:26px;background:var(--surface-3)}
.brand .name{font-family:var(--serif);font-size:27px;letter-spacing:-.01em;line-height:1;color:var(--ink);transition:color var(--t-hover)}
.brand:hover .name{color:var(--copper-hi)}
.tabs{display:flex;gap:4px;min-width:0}
.tab{font-size:14px;font-weight:500;color:var(--ink-2);padding:9px 13px;border-radius:2px;display:inline-flex;gap:8px;align-items:center;white-space:nowrap;
  transition:color var(--t-hover),background var(--t-hover)}
.tab:hover{color:var(--ink);background:var(--surface)}
.tab.on{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--copper-hi)}
.who{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink-2);flex:none}
.who-n{max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-out{color:var(--ink-2);padding:8px 12px;background:var(--surface);border-radius:2px;font-weight:500;display:inline-flex;gap:8px;align-items:center;
  transition:background var(--t-hover),color var(--t-hover)}
.who-out:hover{color:var(--ink);background:var(--surface-2)}
#screen{flex:1;min-width:0;padding:8px 40px 64px}
@media (max-width:1180px){.hdr{gap:16px;padding:0 24px}.who-n{display:none}#screen{padding:8px 24px 56px}.tab{padding:9px 10px}}

/* ---------- controls: flat, square, decided once ----------
   .btn is the one primary on a screen (bone); .ghost is the default (surface); .ghost.quiet is transparent;
   .btn.copper only for the action that sends something out. */
.btn,.ghost{font-size:14px;font-weight:500;border:0;padding:10px 16px;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  white-space:nowrap;text-decoration:none;line-height:1.2;
  transition:background var(--t-hover),color var(--t-hover),transform var(--t-press) var(--ease-out),opacity var(--t-hover),box-shadow var(--t-hover)}
.btn{background:var(--ink);color:var(--ground)}
.btn:hover{background:var(--btn-hover)}
.ghost{background:var(--surface-2);color:var(--ink)}
.ghost:hover{background:var(--surface-3)}
.btn:active,.ghost:active{transform:scale(.98)}
.btn.copper{background:var(--copper-hi);color:var(--ground)}   /* ground on copper-hi: 7.3:1 */
.btn.copper:hover{background:#E59C6E}
.ghost.quiet{background:transparent;color:var(--ink-2)}
.ghost.quiet:hover{background:var(--surface);color:var(--ink)}
.ghost.on{background:var(--surface-4);color:var(--ink)}       /* a row's main action, or a toggle that is on: lifted a tone, never bone */
.ghost.on:hover{background:var(--surface-5)}
.ghost.warn:hover,.btn.warn:hover{color:var(--alert)}
.ghost.warn:hover{background:rgba(217,112,90,.1)}
.btn.sm,.ghost.sm{padding:7px 11px;font-size:13px}
.btn .ico,.ghost .ico{width:15px;height:15px}
.btn:disabled,.ghost:disabled,.btn.dis,.ghost.dis{opacity:.38;cursor:not-allowed;transform:none}
/* the arrow link: a secondary action in words */
.lnk,.cta{font-size:14px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;
  transition:color var(--t-hover),gap var(--t-ui) var(--ease-out)}
.lnk:hover,.cta:hover{color:var(--copper-hi);gap:16px}
.lnk .ico,.cta .ico{width:18px;height:18px}

/* fields */
input.txt,select.txt,textarea.txt{background:var(--surface-2);border:0;color:var(--ink);padding:0 12px;border-radius:2px;outline:none;min-width:0;height:42px;font-size:14px;
  transition:box-shadow var(--t-hover),background var(--t-hover)}
textarea.txt{height:auto;padding:10px 12px;line-height:1.5}
input.txt:hover,select.txt:hover,textarea.txt:hover{background:var(--surface-3)}
input.txt:focus,select.txt:focus,textarea.txt:focus{box-shadow:inset 0 0 0 1px var(--copper-hi);outline:none}
input[type=file].txt{height:auto;padding:9px 10px}
input[type=file]::file-selector-button{font:500 13px/1.2 var(--sans);background:var(--surface-3);color:var(--ink);border:0;border-radius:2px;padding:7px 11px;margin-right:10px;cursor:pointer}
::placeholder{color:var(--ink-3)}
input[readonly].txt{color:var(--ink-2);background:var(--surface)}
select.txt{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C7BFB0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
select option{background:var(--surface-2);color:var(--ink)}
input[type=search].txt{padding-left:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8272' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;width:12px;height:12px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8272' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}
input[type=checkbox]{accent-color:var(--copper-hi);width:16px;height:16px}
input[type=number]{font-variant-numeric:tabular-nums}

/* segmented choices: the one on is bone */
.seg{display:inline-flex;gap:3px;background:var(--surface);padding:4px;border-radius:2px;flex-wrap:wrap}
.seg>span,.seg>button{padding:7px 11px;font-size:13px;font-weight:500;color:var(--ink-2);border-radius:2px;cursor:pointer;border:0;background:none;white-space:nowrap;
  transition:background var(--t-hover),color var(--t-hover)}
.seg>span:hover,.seg>button:hover{color:var(--ink);background:var(--surface-2)}
.seg>.on{color:var(--ground)!important;background:var(--ink)}

/* ---------- chips and states: tonal, square, coloured by meaning ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:5px 10px;background:var(--surface-2);border-radius:2px;color:var(--ink);line-height:1.2;
  white-space:nowrap;border:0}
.chip .ico{width:14px;height:14px}
.chip.ok{color:var(--seafoam);background:rgba(95,138,124,.18)}
.chip.warn{color:var(--copper-hi);background:rgba(181,106,62,.18)}
.chip.quiet{color:var(--ink-3);background:transparent;padding-left:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;font-weight:500;padding:3px 7px;border-radius:2px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap;margin-left:6px;vertical-align:1px}
.state{font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ink-2)}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.state.live{color:var(--copper-hi)}
.state.live::before{animation:ping 1.6s infinite}
.state.ok{color:var(--seafoam)}

/* ---------- surfaces: filled, no border; a tone step is the elevation ---------- */
.panel,.card,.tile{background:var(--surface);border-radius:2px;min-width:0}
.card{padding:16px}
.tile{padding:16px 18px 14px;display:flex;flex-direction:column;gap:4px}
.empty{color:var(--ink-3);text-align:center;padding:36px 16px;font-size:14px;text-wrap:pretty}
.empty b{color:var(--ink);font-weight:500}
.note{background:var(--surface-2);border-radius:2px;padding:10px 12px;color:var(--ink-2)}
.why{font-size:13px;color:var(--copper-hi);background:rgba(181,106,62,.12);border-radius:2px;padding:8px 10px}

/* ---------- the live card: a copper light travels its edge. One per screen. ---------- */
@property --beam-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.beam{position:relative;isolation:isolate}
.beam::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--beam-a),transparent 0deg 262deg,var(--copper-hi) 300deg,#F3C9A2 318deg,var(--copper-hi) 334deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 6s linear infinite}
.beam::after{content:"";position:absolute;inset:-7px;border-radius:inherit;padding:9px;z-index:2;filter:blur(7px);opacity:.45;pointer-events:none;
  background:conic-gradient(from var(--beam-a),transparent 0deg 262deg,var(--copper-hi) 300deg,#F3C9A2 318deg,var(--copper-hi) 334deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 6s linear infinite}
@media (max-width:720px){.beam::after{display:none}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(90px);background:var(--surface-3);color:var(--ink);padding:12px 16px;border-radius:2px;font-size:14px;
  box-shadow:0 12px 32px var(--shadow);transition:transform .4s var(--ease-out);z-index:300;max-width:min(680px,calc(100vw - 32px));text-align:center}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast{display:flex;align-items:center;gap:10px}
.toast .ico{width:17px;height:17px}
.toast.ok .ico{color:var(--seafoam)}
.toast.err .ico{color:var(--alert)}

/* ---------- motion ---------- */
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(217,139,90,.55)}70%{box-shadow:0 0 0 8px rgba(217,139,90,0)}100%{box-shadow:0 0 0 0 rgba(217,139,90,0)}}
@keyframes beam{to{--beam-a:360deg}}
@keyframes rise{from{opacity:.35;transform:translateY(14px)}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
[data-rise]{animation:rise var(--t-reveal) var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .beam::before,.beam::after{--beam-a:300deg}
}

/* ---------- light, by choice (the theme toggle in the header). The template is dark by default; light keeps its rules:
   surfaces told apart by tone, bone and warm near-black instead of grey, copper still means live and seafoam settled,
   each a shade deeper so text in them passes 4.5:1 on these surfaces. ---------- */
:root[data-theme=light]{color-scheme:light;
  --ink:#1C1915;--ink-2:#4A443B;--ink-3:#6B6357;
  --ground:#F4EFE6;--surface:#FBF9F5;--surface-2:#EFE9DF;--surface-3:#E6DFD3;--surface-4:#DAD2C4;--surface-5:#CFC6B6;
  --copper:#B56A3E;--copper-hi:#9C5228;--copper-lo:#E2B596;--seafoam:#3D6C5F;--seafoam-lo:#8BAEA1;--alert:#B0432C;
  --hdr-bg:rgba(244,239,230,.92);--tabbar-bg:rgba(251,249,245,.96);--row-tint:rgba(28,25,21,.03);--btn-hover:#000;--shadow:rgba(60,48,30,.18)}
:root[data-theme=light] .brand .bkse{filter:invert(1)}                 /* the white wordmark, in ink */
:root[data-theme=light] ::selection{background:#E2B596;color:#1C1915}
/* the drawn carets, search glass and clear cross, in the light theme's secondary ink */
:root[data-theme=light] select.txt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A443B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E")}
:root[data-theme=light] input[type=search].txt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6357' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
:root[data-theme=light] input[type=search]::-webkit-search-cancel-button{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6357' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}

/* ---------- the theme toggle: a sun in dark (go light), a moon in light (go dark) ---------- */
.theme-tg{width:36px;height:36px;padding:0;border:0;border-radius:2px;background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex:none;transition:background var(--t-hover),color var(--t-hover)}
.theme-tg:hover{background:var(--surface-2);color:var(--ink)}
.theme-tg .ico{width:17px;height:17px}
.theme-tg .moon,:root[data-theme=light] .theme-tg .sun{display:none}
:root[data-theme=light] .theme-tg .moon{display:block}