/* ============================================================================
   dltg — "quadro di controllo"
   Identità: pannello strumenti. Faccia chiara, ghiera scura, etichette mono.
   Signature: il "grip dial" (quanta presa hai su un progetto).
   ========================================================================== */

:root {
    --ink:        #14171c;   /* grafite: testo e struttura */
    --ink-2:      #4a515b;   /* testo secondario */
    --ink-3:      #7c848e;   /* testo terziario / disabilitato */
    --face:       #e7eae5;   /* faccia strumento (sfondo) */
    --panel:      #fbfcfa;   /* superficie readout rialzata */
    --panel-2:    #f1f3ef;   /* superficie incassata */
    --line:       #cdd3cc;   /* filo/hairline */
    --line-soft:  #e0e4de;

    --signal:      #0fa47c;  /* fosforo verde: presa / ok / storie */
    --signal-deep: #0a5d46;
    --amber:       #d98a1f;  /* attenzione / diario / in pausa */
    --amber-deep:  #9a5f10;
    --alert:       #d5463a;  /* allarme / bloccato / urgente */

    --bezel:   #0f1216;      /* ghiera scura (header) */
    --bezel-2: #191d23;

    --radius:   10px;
    --radius-s: 7px;

    /* Bootstrap: aggancio i token globali */
    --bs-body-bg: var(--face);
    --bs-body-color: var(--ink);
    --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
    --bs-body-font-size: 0.975rem;
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
    --bs-emphasis-color: var(--ink);
    --bs-link-color: var(--signal-deep);
    --bs-link-hover-color: var(--signal);
}

* { -webkit-font-smoothing: antialiased; }

body {
    background:
        radial-gradient(120% 80% at 50% -10%, #eef1ec 0%, var(--face) 55%) fixed;
    color: var(--ink);
    letter-spacing: -0.003em;
}

h1, h2, h3, h4, .display {
    font-family: "Space Grotesk", system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* Etichetta strumento: mono, maiuscoletto, tracking — usata come eyebrow/label */
.label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- ghiera / header */
.console {
    background: linear-gradient(180deg, var(--bezel-2), var(--bezel));
    border-bottom: 1px solid #000;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
}
.console__in {
    max-width: 1140px; margin: 0 auto; padding: .7rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__mark {
    width: 30px; height: 30px; flex: none; display: block;
    filter: drop-shadow(0 0 6px rgba(15, 164, 124, .28));
}
.brand__name {
    font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.15rem;
    color: #f4f6f3; letter-spacing: .01em;
}
.brand__tag {
    font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .18em;
    text-transform: uppercase; color: #6c7580; align-self: center;
}
.console__right { display: flex; align-items: center; gap: 1rem; }
.whoami {
    font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: #aeb6bf;
    display: inline-flex; align-items: center; gap: .45rem;
}
.btn-console {
    font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none;
    color: #cfd5db; padding: .32rem .7rem; border-radius: var(--radius-s);
    border: 1px solid #2c323a; transition: background .15s, color .15s, border-color .15s;
}
.btn-console:hover { background: #20252c; color: #fff; border-color: #3a424b; }

/* ---------------------------------------------------------------- LED / stato */
.led {
    width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; flex: none;
    background: var(--led, var(--ink-3));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--led, var(--ink-3)) 22%, transparent),
                0 0 7px color-mix(in srgb, var(--led, var(--ink-3)) 80%, transparent);
}
.led--live { --led: var(--signal); }

/* ---------------------------------------------------------------- chip strumento */
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: "IBM Plex Mono", monospace; font-size: .68rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .22rem .55rem; border-radius: 999px;
    border: 1px solid var(--chip-line, var(--line));
    color: var(--chip-fg, var(--ink-2)); background: var(--chip-bg, var(--panel));
    white-space: nowrap;
}
.chip .led { --led: var(--chip-fg, var(--ink-2)); }

.chip--attivo,     .chip--prio-3 { --chip-fg: var(--amber-deep); --chip-line: color-mix(in srgb, var(--amber) 45%, var(--line)); --chip-bg: #fbf3e4; }
.chip--attivo     { --chip-fg: var(--signal-deep); --chip-line: color-mix(in srgb, var(--signal) 40%, var(--line)); --chip-bg: #e7f4ef; }
.chip--in_pausa   { --chip-fg: var(--amber-deep); --chip-line: color-mix(in srgb, var(--amber) 45%, var(--line)); --chip-bg: #fbf3e4; }
.chip--completato { --chip-fg: var(--ink-2); --chip-line: var(--line); --chip-bg: var(--panel-2); }
.chip--archiviato { --chip-fg: var(--ink-3); --chip-line: var(--line); --chip-bg: var(--panel-2); }

.chip--prio-1 { --chip-fg: var(--ink-3); }
.chip--prio-2 { --chip-fg: var(--signal-deep); }
.chip--prio-3 { --chip-fg: var(--amber-deep); }
.chip--prio-4 { --chip-fg: var(--alert); --chip-line: color-mix(in srgb, var(--alert) 45%, var(--line)); --chip-bg: #fbe9e7; }
.chip--prio-4 .led { animation: led-pulse 1.6s ease-in-out infinite; }

@keyframes led-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------------------------------------------------------- grip dial (signature) */
.grip {
    --pct: 0; --gc: var(--line);
    width: var(--sz, 58px); height: var(--sz, 58px); border-radius: 50%; flex: none;
    display: grid; place-items: center; position: relative;
    background: conic-gradient(var(--gc) calc(var(--pct) * 1%),
                               color-mix(in srgb, var(--line) 65%, transparent) 0);
    transition: background .5s ease;
}
.grip::after {
    content: ""; position: absolute; inset: calc(var(--sz, 58px) / 9);
    border-radius: 50%; background: var(--panel);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.grip__val {
    position: relative; z-index: 1; font-family: "IBM Plex Mono", monospace;
    font-weight: 600; font-size: calc(var(--sz, 58px) / 3.6); color: var(--ink);
    line-height: 1;
}
.grip__val small { font-size: .55em; color: var(--ink-3); }
.grip.is-hi   { --gc: var(--signal); }
.grip.is-mid  { --gc: var(--amber); }
.grip.is-lo   { --gc: var(--alert); }
.grip.is-none { --gc: var(--line); }
.grip.is-none .grip__val { color: var(--ink-3); }

/* ---------------------------------------------------------------- quadro (dashboard) */
.quadro-head {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    margin: .5rem 0 1.4rem;
}
.quadro-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .15rem 0 0; }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.filter {
    font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .06em;
    text-transform: uppercase; text-decoration: none;
    padding: .3rem .7rem; border-radius: 999px;
    color: var(--ink-2); border: 1px solid var(--line); background: var(--panel);
    transition: all .15s;
}
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

.pcard {
    position: relative; display: block; text-decoration: none; color: inherit;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.15rem 1rem; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent, var(--line));
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(20,23,28,.35); border-color: var(--ink-3); }
.pcard--attivo { --accent: var(--signal); }
.pcard--in_pausa { --accent: var(--amber); }
.pcard--completato { --accent: var(--ink-3); }
.pcard--archiviato { --accent: var(--line); }

.pcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pcard__name { font-size: 1.18rem; margin: 0 0 .1rem; line-height: 1.15; }
.pcard__desc { color: var(--ink-2); font-size: .86rem; margin: .5rem 0 .9rem; min-height: 1.2em; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
               border-top: 1px solid var(--line-soft); padding-top: .7rem; }
.readout { display: flex; align-items: baseline; gap: .35rem; }
.readout b { font-family: "IBM Plex Mono", monospace; font-size: 1.05rem; color: var(--ink); }

/* ---------------------------------------------------------------- pannelli aree (detail) */
.detail-head { margin: .3rem 0 1.4rem; }
.detail-head .back {
    font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); text-decoration: none;
}
.detail-head .back:hover { color: var(--signal-deep); }
.detail-title { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.detail-title h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0; }
.detail-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; align-items: center; }

.panel {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; height: 100%;
}
.panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft);
    border-top: 3px solid var(--accent, var(--line));
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--line)) 6%, var(--panel)), var(--panel));
}
.panel__head .label { color: color-mix(in srgb, var(--accent, var(--ink-2)) 70%, var(--ink-2)); }
.panel__body { padding: .9rem; }
.panel--struttura { --accent: var(--ink); }
.panel--storie    { --accent: var(--signal); }
.panel--diario    { --accent: var(--amber); }
.count-pill {
    font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600;
    color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line);
    padding: .1rem .5rem; border-radius: 999px;
}

/* moduli (struttura) */
.mod-row { padding: .6rem .1rem; border-bottom: 1px dashed var(--line-soft); }
.mod-row:last-child { border-bottom: 0; }
.mod-row__top { display: flex; align-items: center; gap: .5rem; }
.mod-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
            font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .98rem; }
.mod-tag { font-family: "IBM Plex Mono", monospace; font-size: .58rem; letter-spacing: .1em;
           text-transform: uppercase; color: var(--signal-deep); border: 1px solid color-mix(in srgb, var(--signal) 40%, var(--line));
           padding: .05rem .35rem; border-radius: 4px; background: #e7f4ef; }
.mod-desc { color: var(--ink-2); font-size: .82rem; margin-top: .2rem; }
.mod-count { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--ink-3); }

/* gruppo storie */
.sgroup { border: 1px solid var(--line-soft); border-radius: var(--radius-s); margin-bottom: .8rem; overflow: hidden; }
.sgroup:last-child { margin-bottom: 0; }
.sgroup__head { display: flex; align-items: center; justify-content: space-between;
                padding: .5rem .7rem; background: var(--panel-2); }
.sgroup__name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .9rem; }

/* riga user story */
.story { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem;
         border-top: 1px solid var(--line-soft); }
.story:first-child { border-top: 0; }
.story__title { flex: 1; font-size: .9rem; }
.story.is-done .story__title { text-decoration: line-through; color: var(--ink-3); }
.story__due { font-family: "IBM Plex Mono", monospace; font-size: .68rem; color: var(--ink-3); }
.story__toggle {
    font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .05em;
    text-transform: uppercase; cursor: pointer; white-space: nowrap;
    padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink-2); transition: all .15s;
}
.story__toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.story.is-done .story__toggle { background: var(--signal); border-color: var(--signal); color: #fff; }
.empty { color: var(--ink-3); font-size: .84rem; padding: .5rem .2rem; }

/* ---------------------------------------------------------------- Rapportini */
.report { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.report__head { display: flex; align-items: flex-end; justify-content: space-between;
                gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.report__title { margin: .15rem 0 0; }
.report__tools { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.report__search { width: min(340px, 60vw); font-size: .9rem; }
.report__new { font-weight: 600; padding: .62rem 1.15rem; font-size: .98rem; white-space: nowrap;
               box-shadow: 0 3px 10px color-mix(in srgb, var(--signal) 30%, transparent); }
.report__new-plus { font-weight: 700; margin-right: .1rem; }

/* paginazione */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.1rem; }
.pager__btn { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .05em;
              text-transform: uppercase; cursor: pointer; padding: .4rem .8rem; border-radius: 999px;
              border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); transition: all .15s; }
.pager__btn:hover { border-color: var(--ink-3); color: var(--ink); }
.pager__btn.is-off { opacity: .4; pointer-events: none; }
.pager__info { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--ink-3); }

.report__list { display: flex; flex-direction: column; gap: .8rem; }

.rcard { display: grid; grid-template-columns: minmax(190px, 230px) 1fr;
         border: 1px solid var(--line); border-radius: var(--radius);
         background: var(--panel); overflow: hidden; }
.rcard__side { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem;
               background: var(--panel-2); border-right: 1px solid var(--line-soft);
               border-left: 3px solid var(--amber); }
.rcard__date { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .95rem;
               text-transform: capitalize; }
.rcard__author { font-size: .8rem; color: var(--ink-2); }
.rcard__total { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--ink-3); margin-top: .2rem; }
.rcard__total b { color: var(--ink); font-size: .86rem; }
.rcard__actions { display: inline-flex; gap: .35rem; margin-top: .5rem; }
.rcard__actions form { display: inline; }

.rcard__lines { list-style: none; margin: 0; padding: .45rem .95rem; }
.rline { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
         padding: .38rem 0; border-bottom: 1px dashed var(--line-soft); }
.rline:last-child { border-bottom: 0; }
.rline__voce { font-size: .88rem; position: relative; padding-left: .85rem; }
.rline__voce::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem;
                       border-radius: 2px; background: var(--ink-3); }
.rline--progetto .rline__voce::before { background: var(--ink); }
.rline--modulo   .rline__voce::before { background: var(--signal); }
.rline--story    .rline__voce::before { background: var(--amber); }
.rline__frac { font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--ink-2);
               background: var(--panel); border: 1px solid var(--line-soft); border-radius: 999px;
               padding: .08rem .55rem; flex: 0 0 auto; }
.rline--empty { color: var(--ink-3); font-size: .84rem; }

/* form rapportino (righe dinamiche) */
.rform__lines-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.rform__hint { font-size: .78rem; color: var(--ink-3); }
.rform__rows { display: flex; flex-direction: column; gap: .5rem; }
.rrow { display: flex; align-items: center; gap: .5rem; }
.rrow__voce { flex: 1 1 auto; min-width: 0; }
.rrow__frac { flex: 0 0 6rem; text-align: center; }
.rrow__del { flex: 0 0 auto; }
.rform__foot { display: flex; align-items: center; gap: 1.3rem; margin-top: 1.6rem; }

/* ---------------------------------------------------------------- input inline (htmx) */
.inline-add { display: flex; gap: .4rem; margin-top: .7rem; }
.inline-add .form-control { font-size: .85rem; }

/* azioni di riga (modifica/elimina) */
.mod-row__right, .story__actions {
    display: inline-flex; align-items: center; gap: .4rem;
    flex: 0 0 auto; flex-wrap: nowrap;
}
/* stacco tra conteggio e gruppo icone */
.mod-row__right .mod-count { margin-right: .15rem; }
.icon-btn { flex: 0 0 auto; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.55rem; height: 1.55rem; padding: 0; line-height: 1; font-size: .78rem;
    cursor: pointer; border: 1px solid var(--line); border-radius: 6px;
    background: var(--panel); color: var(--ink-3); transition: all .15s;
}
.icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.icon-btn--danger:hover { border-color: var(--alert); color: var(--alert); background: #fbe9e7; }
.row-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mod-edit, .story-edit { width: 100%; }
.story--edit { display: block; }
.story--edit .form-control { font-size: .85rem; }

/* zona pericolosa (eliminazione progetto) */
.danger-zone {
    border-color: color-mix(in srgb, var(--alert) 35%, var(--line));
    border-top: 3px solid var(--alert);
}

/* ---------------------------------------------------------------- Bootstrap component overrides */
.btn { --bs-btn-border-radius: var(--radius-s); font-weight: 500; letter-spacing: -.005em; }
.btn-primary {
    --bs-btn-bg: var(--signal); --bs-btn-border-color: var(--signal);
    --bs-btn-hover-bg: var(--signal-deep); --bs-btn-hover-border-color: var(--signal-deep);
    --bs-btn-active-bg: var(--signal-deep); --bs-btn-active-border-color: var(--signal-deep);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--signal); --bs-btn-disabled-border-color: var(--signal);
}
.btn-outline-primary {
    --bs-btn-color: var(--signal-deep); --bs-btn-border-color: color-mix(in srgb, var(--signal) 55%, var(--line));
    --bs-btn-hover-bg: var(--signal); --bs-btn-hover-border-color: var(--signal);
    --bs-btn-active-bg: var(--signal-deep); --bs-btn-active-border-color: var(--signal-deep);
}
.btn-dark {
    --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000;
}
.btn-outline-secondary {
    --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff;
}

.form-control, .form-select {
    border-color: var(--line); border-radius: var(--radius-s); background: var(--panel);
    color: var(--ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--signal); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--signal) 22%, transparent);
}
.form-label { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .06em;
              text-transform: uppercase; color: var(--ink-2); font-weight: 600; }

.card { --bs-card-bg: var(--panel); --bs-card-border-color: var(--line);
        --bs-card-border-radius: var(--radius); }

.alert { border-radius: var(--radius-s); border-color: var(--line); }

main { min-height: 72vh; }

/* ---------------------------------------------------------------- motion / a11y */
.rise { animation: rise .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

a:focus-visible, button:focus-visible, .story__toggle:focus-visible, .filter:focus-visible {
    outline: 2px solid var(--signal); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- logout */
.logout-form { margin: 0; }

/* ---------------------------------------------------------------- accesso / scelta provider */
.signin {
    min-height: 60vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
.signin__card {
    width: 100%; max-width: 22rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2.2rem 1.8rem 2rem;
    text-align: center;
    box-shadow: 0 1px 0 var(--line-soft), 0 18px 40px -28px rgba(20, 23, 28, .5);
}
.signin__mark { display: block; margin: 0 auto .9rem; filter: drop-shadow(0 0 8px rgba(15, 164, 124, .3)); }
.signin__name {
    font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.5rem;
    margin: 0; color: var(--ink);
}
.signin__tag {
    font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-3); margin: .2rem 0 0;
}
.signin__hint { color: var(--ink-2); font-size: .9rem; margin: 1.4rem 0 1rem; }
.signin__providers { display: flex; flex-direction: column; gap: .7rem; }
.provider {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .7rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-weight: 500; font-size: .92rem;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .05s;
}
.provider:hover {
    border-color: var(--signal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 14%, transparent);
    color: var(--ink);
}
.provider:active { transform: translateY(1px); }
.provider__ico { flex: none; }