/* Adboard OS — the light theme.

   Adboard's brand book has had a light palette since 24 August: --paper,
   --ink, --rule. brand.css carries them. This is that palette, used properly,
   rather than the dark landing-page treatment: an operations product is read
   for hours in daylight, and the aurora belongs on a website.

   The structure follows what works in Viktor and nothing else about it:

     * one line of icon-and-fact pairs under a title, not a table of labels
     * lists of rows with a logo, a name and one line, not grids of columns
     * a coloured dot carries state; a sentence explains it only when it is bad
     * an empty state is a picture and one action, not a paragraph
     * the primary button is black, so violet always means "this is the thing"

   Nothing here is decorative. If a rule, a shadow or a border is not
   separating two things that need separating, it is not in this file. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Light and dark, from the laptop rather than from a switch.

   There is no toggle. `prefers-color-scheme` is the operating system already
   knowing, and a product that asks a question the machine has answered is
   asking for the sake of it. `color-scheme` below hands the same answer to
   the scrollbars, the form controls and the native date pickers, which do not
   read our stylesheet and would otherwise stay light on a dark page.

   Every colour in this file is one of the tokens below. That is the whole
   trick: the dark block redefines the same names and nothing else changes.
   A literal hex anywhere else in this file is a bug, because it will not move
   when the ground does. */
html{color-scheme:light dark}

:root{
  /* ground */
  --bg:#FBFAFD;            --surface:#FFFFFF;
  --sink:#F4F3F8;          --nav:#F7F6FA;
  /* ink */
  --tx:#14131C;            --tx-2:#5C5A6B;    --tx-3:#8B889C;
  /* edges */
  --rule:#E7E4F0;          --rule-2:#D6D2E4;
  /* accent — Adboard violet, unchanged from the brand */
  --vio:#6E5AF6;           --vio-hi:#8B7CFF;  --vio-soft:#F0EDFF;
  --vio-line:#DDD6FF;
  /* state. Colour carries meaning and is never decorative or reassigned. */
  --ok:#0F9D76;            --ok-soft:#E7F7F1;   --ok-line:#C9EDE1;
  --wait:#B26A00;          --wait-soft:#FFF5E4; --wait-line:#F5E3C4;
  --bad:#C6403A;           --bad-soft:#FDEDEC;  --bad-line:#F6D5D3;
  /* The one solid, high-contrast control: the primary button, the pressed
     chip, the ask button. It is the ground inverted, which is why it needs
     its own name -- in the dark it becomes near-white with dark text, and
     `var(--tx)` with white on top would be white on white. */
  --solid:#14131C;         --solid-hi:#2A2833;  --on-solid:#FFFFFF;
  /* Text on a generated avatar hue. Those hues stay saturated in both
     grounds, so this does not flip with the theme. */
  --on-hue:#FFFFFF;
  /* the hover wash, and the three shadows */
  --wash:rgba(20,19,28,.045);
  --shadow-sm:rgba(20,19,28,.06);
  --shadow-md:rgba(20,19,28,.18);
  --shadow-lg:rgba(20,19,28,.22);
  --veil:rgba(20,19,28,.28);
  /* shape */
  --r:14px; --r2:10px; --r3:8px;
  /* spacing. One scale. Every gap in this file is one of these, so that
     vertical rhythm is a decision made once rather than per block. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* type */
  --ui:'Sora',system-ui,-apple-system,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,monospace;
  --ring:0 0 0 3px rgba(110,90,246,.16);
}

/* The same product at night. Not the light one with the lights off: the
   greys are warmed slightly towards the brand's void, the state colours are
   lifted because a dark ground eats saturation, and the soft fills become
   translucent so they sit on the surface rather than replacing it. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B0B10;            --surface:#14141C;
    --sink:#1B1B24;          --nav:#0E0E15;
    --tx:#EDEDF4;            --tx-2:#9B9DB3;    --tx-3:#6E7089;
    --rule:#25252F;          --rule-2:#33333F;
    --vio:#8B7CFF;           --vio-hi:#B4AAFF;  --vio-soft:rgba(139,124,255,.16);
    --vio-line:rgba(139,124,255,.34);
    --ok:#4ADE9E;            --ok-soft:rgba(74,222,158,.13);   --ok-line:rgba(74,222,158,.32);
    --wait:#FFB454;          --wait-soft:rgba(255,180,84,.13);  --wait-line:rgba(255,180,84,.32);
    --bad:#FF6B5E;           --bad-soft:rgba(255,107,94,.13);   --bad-line:rgba(255,107,94,.32);
    --solid:#EDEDF4;         --solid-hi:#FFFFFF; --on-solid:#14131C;
    --wash:rgba(255,255,255,.055);
    /* Shadows on a dark ground read as black, not as ink. A tinted shadow
       here just makes an edge look dirty. */
    --shadow-sm:rgba(0,0,0,.45);
    --shadow-md:rgba(0,0,0,.55);
    --shadow-lg:rgba(0,0,0,.65);
    --veil:rgba(4,4,8,.7);
    --ring:0 0 0 3px rgba(139,124,255,.3);
  }
}

*{box-sizing:border-box; margin:0; padding:0}

/* Every icon in this app is a 24-box inline svg. Without a default size an
   svg with no width fills its flex parent, which is how one alert glyph ends
   up 300px tall across a banner. */
svg{width:16px; height:16px; flex:none; display:block}

body{
  background:var(--bg); color:var(--tx);
  font:400 15px/1.55 var(--ui);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body::before{content:none}          /* no aurora in here */

a{color:inherit}
button{font:inherit; cursor:pointer}

/* ---- frame ------------------------------------------------------------- */

.app{display:grid; grid-template-columns:224px 1fr; min-height:100vh}

.nav{
  background:var(--nav); border-right:1px solid var(--rule);
  padding:var(--s5) var(--s3) var(--s4); display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.nav .brand{
  display:flex; align-items:center; gap:9px; padding:0 10px var(--s5);
  font-weight:700; font-size:19px; letter-spacing:-.03em;
}
.nav .brand .mark{
  width:22px; height:22px; border-radius:7px; flex:none;
  background:linear-gradient(140deg,var(--vio),var(--vio-hi));
}
.nav a{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:var(--r3);
  color:var(--tx-2); text-decoration:none; font-size:14px; font-weight:400;
}
.nav a:hover{background:var(--wash); color:var(--tx)}
.nav a[aria-current="page"]{background:var(--surface); color:var(--tx); font-weight:500;
  box-shadow:0 1px 2px var(--shadow-sm)}
.nav a svg{width:17px; height:17px; flex:none; opacity:.72}
.nav a[aria-current="page"] svg{opacity:1; color:var(--vio)}
.nav a .count{
  margin-left:auto; font-family:var(--data); font-size:11px; font-weight:500;
  color:var(--wait); background:var(--wait-soft); border-radius:999px; padding:1px 7px;
}
.nav .group{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx-3); padding:var(--s5) 10px var(--s2); font-weight:500;
}
.nav .foot{
  margin-top:auto; padding:var(--s4) 10px 0; border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:10px;
}
.nav .foot .who{font-size:13.5px; font-weight:500; line-height:1.3}
.nav .foot .role{font-size:11.5px; color:var(--tx-3)}

.main{min-width:0; padding:var(--s6) var(--s7) 96px; max-width:1180px}

/* ---- page head --------------------------------------------------------- */

.crumb{font-size:13px; color:var(--tx-3); margin-bottom:var(--s3)}
.crumb a{color:var(--tx-3); text-decoration:none}
.crumb a:hover{color:var(--tx-2)}
.crumb .sep{margin:0 7px; opacity:.6}

.head{display:flex; align-items:flex-start; gap:var(--s5); margin-bottom:0}
.head h1{font-size:31px; font-weight:600; letter-spacing:-.035em; line-height:1.1}
.head .actions{margin-left:auto; display:flex; gap:8px; flex:none}
.sub{color:var(--tx-2); font-size:14.5px; margin-top:var(--s2); max-width:72ch}

/* The one line of facts under a title. Each is an icon and a value, never a
   label and a value — the icon is the label, which is how it stays one line. */
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4);
      margin-top:var(--s4); font-size:13.5px; color:var(--tx-2)}
.meta span{display:inline-flex; align-items:center; gap:6px}
.meta svg{width:14px; height:14px; opacity:.6}
.meta .avatar{width:19px; height:19px; font-size:9px}

h2.section{
  font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--tx);
  margin:var(--s7) 0 var(--s4);
}
/* The first thing under a page head does not need the full gap again. */
.head + h2.section, .meta + h2.section, .tabs + h2.section,
.banner + h2.section, .sub + h2.section{margin-top:var(--s6)}
h2.section .aside{float:right; font-size:13px; font-weight:400; color:var(--tx-3)}
.section-sub{color:var(--tx-2); font-size:13.5px; margin:calc(var(--s3) * -1) 0 var(--s4); max-width:76ch}

/* ---- buttons ----------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--solid); color:var(--on-solid); border:1px solid var(--solid);
  border-radius:var(--r2); padding:8px 15px; font-size:14px; font-weight:500;
  text-decoration:none;
}
.btn:hover{background:var(--solid-hi)}
.btn.ghost{background:var(--surface); color:var(--tx); border-color:var(--rule-2)}
.btn.ghost:hover{background:var(--sink)}
.btn svg{width:15px; height:15px}

/* ---- cards ------------------------------------------------------------- */

.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
      padding:var(--s5)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--s4)}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---- figures ----------------------------------------------------------- */

.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
      overflow:hidden}
.fig{padding:var(--s4) var(--s5); border-right:1px solid var(--rule)}
.fig:last-child{border-right:0}
.fig .k{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
        color:var(--tx-3); font-weight:500}
.fig .v{font-size:29px; font-weight:600; letter-spacing:-.035em; line-height:1.2; margin-top:var(--s1)}
.fig .v .unit{font-size:13px; font-weight:400; color:var(--tx-3); letter-spacing:0; margin-left:4px}
.fig .v.none{font-size:14px; font-weight:400; color:var(--tx-3); letter-spacing:0}
.fig.attn .v{color:var(--wait)}
.fig.bad .v{color:var(--bad)}

/* ---- rows -------------------------------------------------------------- */
/* A list, not a table. Logo or icon, then a name and one line under it, then
   whatever state belongs on the right. Reads at a glance; a table does not. */

.rows{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
      overflow:hidden}
.row{display:flex; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5);
     border-bottom:1px solid var(--rule); text-decoration:none; color:inherit}
.row:last-child{border-bottom:0}
a.row:hover{background:var(--sink)}
.row .body{min-width:0; flex:1}
.row .name{font-size:14.5px; font-weight:500; letter-spacing:-.01em}
.row .desc{font-size:13px; color:var(--tx-2); margin-top:3px;
           overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
           -webkit-line-clamp:1; -webkit-box-orient:vertical}
.row .right{margin-left:auto; display:flex; align-items:center; gap:10px; flex:none;
            max-width:46%; justify-content:flex-end; flex-wrap:wrap}
/* A pill on the right of a row must never win the width fight with the row's
   own name. One financial-effect sentence in a nowrap pill squeezed a title
   down to one word per line. */
.row .right .pill{max-width:230px; overflow:hidden; text-overflow:ellipsis; display:block}
.row .chev{color:var(--tx-3); width:16px; height:16px; flex:none}

/* the square that carries a logo, an initial, or an icon */
.tile{width:34px; height:34px; border-radius:9px; flex:none;
      display:flex; align-items:center; justify-content:center;
      background:var(--sink); border:1px solid var(--rule); overflow:hidden}
.tile svg{width:18px; height:18px}
.tile img{width:100%; height:100%; object-fit:contain; padding:5px}
.tile.lg{width:44px; height:44px; border-radius:11px}
.tile.lg svg{width:22px; height:22px}
.tile.vio{background:var(--vio-soft); border-color:var(--vio-line); color:var(--vio)}
.tile.ok{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok)}
.tile.wait{background:var(--wait-soft); border-color:var(--wait-line); color:var(--wait)}
.tile.bad{background:var(--bad-soft); border-color:var(--bad-line); color:var(--bad)}

.avatar{width:26px; height:26px; border-radius:50%; flex:none;
        display:flex; align-items:center; justify-content:center;
        font-size:11px; font-weight:600; color:var(--on-hue); letter-spacing:-.02em}

/* ---- state ------------------------------------------------------------- */

.dot{width:7px; height:7px; border-radius:50%; flex:none; display:inline-block;
     background:var(--tx-3)}
.dot.ok{background:var(--ok)} .dot.wait{background:var(--wait)}
.dot.bad{background:var(--bad)} .dot.vio{background:var(--vio)}

.pill{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
      padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500;
      background:var(--sink); color:var(--tx-2); border:1px solid var(--rule)}
.pill.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}
.pill.wait{background:var(--wait-soft); color:var(--wait); border-color:var(--wait-line)}
.pill.bad{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line)}
.pill.vio{background:var(--vio-soft); color:var(--vio); border-color:var(--vio-line)}

/* ---- filter chips ------------------------------------------------------ */

.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4)}
.chip{display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
      border-radius:999px; font-size:13px; background:var(--surface);
      border:1px solid var(--rule); color:var(--tx-2); text-decoration:none}
.chip:hover{border-color:var(--rule-2)}
.chip[aria-pressed="true"]{background:var(--solid); border-color:var(--solid); color:var(--on-solid)}
.chip .n{font-family:var(--data); font-size:11.5px; opacity:.72}

/* ---- tabs -------------------------------------------------------------- */

.tabs{display:flex; gap:var(--s1); margin:var(--s5) 0 var(--s6); overflow-x:auto;
      padding-bottom:2px; border-bottom:1px solid var(--rule)}
.tabs a{padding:var(--s2) var(--s3) var(--s3); border-radius:var(--r3) var(--r3) 0 0;
        font-size:13.5px; color:var(--tx-2); text-decoration:none;
        white-space:nowrap; margin-bottom:-1px; border-bottom:2px solid transparent}
.tabs a:hover{background:var(--wash)}
.tabs a[aria-current="page"]{color:var(--tx); font-weight:500;
  border-bottom-color:var(--vio); background:none}

/* ---- banners ----------------------------------------------------------- */

.banner{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) var(--s4);
        border-radius:var(--r2); font-size:13.5px; line-height:1.5;
        margin:0 0 var(--s5)}
.banner svg{width:17px; height:17px; flex:none; margin-top:1px}
.banner.wait{background:var(--wait-soft); color:var(--wait)}
.banner.bad{background:var(--bad-soft); color:var(--bad)}
.banner.info{background:var(--vio-soft); color:var(--vio)}

/* Something that is not there. Never a zero. */
.empty{background:var(--surface); border:1px dashed var(--rule-2);
       border-radius:var(--r); padding:var(--s6) var(--s5); text-align:center;
       color:var(--tx-2)}
.empty .tile{margin:0 auto 12px}
.empty b{display:block; color:var(--tx); font-weight:600; font-size:15px; margin-bottom:5px}
.empty p{font-size:13.5px; max-width:56ch; margin:0 auto}

.note{color:var(--tx-3); font-size:13px; line-height:1.55; margin-top:var(--s4);
      max-width:80ch}

/* ---- key / value (used sparingly, inside a detail card) ----------------- */

.kv{display:grid; grid-template-columns:minmax(140px,auto) 1fr;
     gap:var(--s3) var(--s5); font-size:14px; line-height:1.5}
.kv dt{color:var(--tx-3); font-size:13px}
.kv dd{color:var(--tx)}

/* ---- prose ------------------------------------------------------------- */

.prose{font-size:14.5px; line-height:1.7; color:var(--tx-2); max-width:78ch}
.prose h1,.prose h2,.prose h3{color:var(--tx); margin:24px 0 9px; letter-spacing:-.02em}
.prose h1{font-size:20px} .prose h2{font-size:17px} .prose h3{font-size:15px}
.prose p,.prose ul,.prose ol{margin:0 0 12px}
.prose ul,.prose ol{padding-left:22px}
.prose code{font-family:var(--data); font-size:12.5px; background:var(--sink);
            padding:1px 5px; border-radius:5px}
.prose pre{background:var(--sink); padding:12px 14px; border-radius:var(--r3);
           overflow-x:auto; font-family:var(--data); font-size:12.5px; margin:0 0 12px}

code,.mono{font-family:var(--data); font-size:12.5px}
.path{font-family:var(--data); font-size:11.5px; color:var(--tx-3); word-break:break-all}
.when{font-family:var(--data); font-size:12px; color:var(--tx-3); white-space:nowrap}

/* ---- source banner ----------------------------------------------------- */

.source-banner{display:flex; gap:var(--s3); align-items:center;
  padding:var(--s2) var(--s4); background:var(--wait-soft); color:var(--wait);
  border-radius:var(--r2); font-size:12.5px; margin-bottom:var(--s5)}
.source-banner svg{width:16px; height:16px; flex:none}
.source-banner.live{display:none}
.source-banner b{font-weight:600}

/* ---- misc -------------------------------------------------------------- */

.err{background:var(--bad-soft); color:var(--bad); border-radius:var(--r2);
     padding:12px 15px; font-size:13.5px; margin-bottom:14px}
.loading{color:var(--tx-3); font-size:13px; padding:40px 0}
.scroll{overflow-x:auto}
.stack{display:flex; flex-direction:column; gap:var(--s4)}
.inline-logos{display:flex; gap:5px; align-items:center}
.inline-logos .tile{width:22px; height:22px; border-radius:6px}
.inline-logos .tile img{padding:3px}
.more{font-size:12px; color:var(--tx-3); margin-left:3px}

/* a thin progress bar, used for "1 of 3 live" style facts */
.bar{height:5px; border-radius:999px; background:var(--sink); overflow:hidden; margin-top:9px}
.bar i{display:block; height:100%; background:var(--vio); border-radius:999px}
.bar.ok i{background:var(--ok)} .bar.wait i{background:var(--wait)}

/* ---- narrow ------------------------------------------------------------ */

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .nav{position:static; height:auto; flex-direction:row; flex-wrap:wrap; gap:6px;
       border-right:0; border-bottom:1px solid var(--rule); padding:14px}
  .nav .brand{width:100%; padding-bottom:12px}
  .nav .group,.nav .foot{display:none}
  .nav a{padding:6px 11px; border:1px solid var(--rule); background:var(--surface);
         font-size:13px}
  .main{padding:var(--s5) var(--s4) 72px}
  .head{flex-wrap:wrap}
  .head h1{font-size:25px}
  .head .actions{margin-left:0; width:100%}
  .figs{grid-template-columns:repeat(2,1fr)}
  .fig{border-bottom:1px solid var(--rule)}
  .fig:nth-child(2n){border-right:0}
  .kv{grid-template-columns:1fr; gap:2px}
  .kv dd{margin-bottom:12px}
  .row{flex-wrap:wrap}
  .row .right{margin-left:0; width:100%; padding-left:48px}
}


/* ---- the ask box --------------------------------------------------------
   A popup, not a panel. It sits out of the way until it is wanted, and takes
   the middle of the screen when it is. */

.ask-open{
  position:fixed; right:var(--s5); bottom:var(--s5); z-index:40;
  display:flex; align-items:center; gap:var(--s2);
  background:var(--solid); color:var(--on-solid); border:0; border-radius:999px;
  padding:11px 18px 11px 15px; font-size:14px; font-weight:500;
  box-shadow:0 6px 20px var(--shadow-md);
}
.ask-open:hover{background:var(--solid-hi)}
.ask-open svg{width:16px; height:16px}

.ask-veil{
  position:fixed; inset:0; z-index:50; background:var(--veil);
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh var(--s4) var(--s4);
}
/* Load-bearing. `display:flex` on a class beats the `[hidden]` attribute,
   which only ever gets `display:none` from the user-agent stylesheet. Without
   this the veil is permanently visible, setting .hidden does nothing, and the
   box opens on load and cannot be closed by escape, the backdrop or anything
   else. It shipped like that. */
.ask-veil[hidden]{display:none}
.ask-box{
  width:min(620px,100%); background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r); box-shadow:0 20px 60px var(--shadow-lg);
  overflow:hidden;
}
.ask-head{display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5);
          border-bottom:1px solid var(--rule)}
.ask-head svg{color:var(--vio)}
/* `background` too, not just the border. Without it this falls through to
   brand.css's `input{background:var(--glass)}`, which is a white wash meant
   for the dark landing pages -- invisible here by luck rather than by
   decision, and luck is not a thing to rely on across two grounds. */
.ask-input{flex:1; border:0; outline:0; background:transparent;
  font:400 16px var(--ui); color:var(--tx);
           background:none}
.ask-input::placeholder{color:var(--tx-3)}
.ask-head kbd{font-family:var(--data); font-size:10.5px; color:var(--tx-3);
              border:1px solid var(--rule); border-radius:5px; padding:2px 6px}

.ask-body{padding:var(--s4) var(--s5) var(--s5)}
.ask-hint{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
          color:var(--tx-3); margin-bottom:var(--s3)}
.ask-suggest{display:block; width:100%; text-align:left; background:none;
             border:0; border-radius:var(--r3); padding:var(--s2) var(--s3);
             font-size:14px; color:var(--tx-2)}
.ask-suggest:hover{background:var(--sink); color:var(--tx)}
.ask-q{font-size:15px; font-weight:500; margin-bottom:var(--s3)}
.ask-a{font-size:13.5px; color:var(--tx-2); line-height:1.6}
.ask-a p{margin-bottom:var(--s3)}
.ask-ctx{color:var(--tx-3); font-size:12.5px}

@media (max-width:900px){
  .ask-open{right:var(--s4); bottom:var(--s4); padding:10px 15px}
  .ask-open span{display:none}
  .ask-veil{padding:8vh var(--s3) var(--s3)}
}


/* ---- form fields --------------------------------------------------------
   Only the cron modal uses these so far. Kept plain: a select that looks like
   a select is a select people can use. */

.t-field{display:block; margin-bottom:var(--s4)}
.t-field > span{display:block; font-size:13px; color:var(--tx-2); margin-bottom:6px}
.t-field input, .t-field select, .t-field textarea{
  display:block; width:100%; padding:10px var(--s3);
  border:1px solid var(--rule); border-radius:var(--r2);
  font:400 14px var(--ui); color:var(--tx); background:var(--surface);
}
.t-field input:focus, .t-field select:focus, .t-field textarea:focus{
  outline:0; border-color:var(--vio); box-shadow:var(--ring);
}
.t-field textarea{resize:vertical; min-height:60px}
#t-days{display:flex; flex-wrap:wrap; gap:var(--s2)}
#t-days .chip{user-select:none}
#t-preview code{font-size:11.5px}

/* ---- assigning a client's team ------------------------------------------ */
/* The one editable thing on a page that is otherwise all derived, so it is
   allowed to look like a form rather than a list. */
.pkg{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface);
     overflow:hidden}
.pkg-row{display:flex; align-items:center; gap:var(--s3); padding:13px var(--s4);
         border-bottom:1px solid var(--rule); cursor:pointer}
.pkg-row:last-of-type{border-bottom:0}
.pkg-row:hover{background:var(--wash)}
.pkg-row input{width:17px; height:17px; flex:none; accent-color:var(--vio); cursor:pointer}
.pkg-name{font-weight:500; font-size:14.5px}
.pkg-needs{font-family:var(--data); font-size:11px; color:var(--tx-3)}
.pkg-row .pill{margin-left:auto}
.pkg-foot{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
          border-top:1px solid var(--rule); background:var(--sink)}
.pkg-said{font-size:12.5px; color:var(--tx-2)}
@media (max-width:640px){
  .pkg-needs{display:none}
  .pkg-row .pill{margin-left:0; flex-basis:100%}
  .pkg-row{flex-wrap:wrap}
}