/* ==========================================================================
   Employee Deploy Platform — visual language

   Deliberately not the intranet's look. New Intrasite V2 is a light, sky-blue
   corporate portal; this is a dark console, because that is what it is — you
   watch builds here. Sharing a palette would have made two very different
   tools look like one, and made it easy to forget which one you were in.

   One stylesheet, no framework, no build step: the whole platform is six
   pages, and a Tailwind/PostCSS pipeline would be a second thing to deploy
   before the thing that does the deploying works.
   ========================================================================== */

:root{
  --bg:#0b1120;
  --bg-2:#0f172a;
  --surface:#131c31;
  --surface-2:#1a2440;
  --line:#243352;
  --line-soft:#1c2740;

  --ink:#e8eefc;
  --ink-2:#a3b1cc;
  --ink-3:#6b7c9e;

  --accent:#34d399;          /* live / success */
  --accent-dim:rgba(52,211,153,.14);
  --cyan:#38bdf8;            /* links, focus */
  --cyan-dim:rgba(56,189,248,.14);
  --amber:#fbbf24;           /* building / warning */
  --amber-dim:rgba(251,191,36,.14);
  --rose:#fb7185;            /* failed / danger */
  --rose-dim:rgba(251,113,133,.14);
  --violet:#a78bfa;

  --radius:12px;
  --radius-sm:8px;
  --mono:ui-monospace,'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow:0 18px 44px -22px rgba(0,0,0,.85);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.55;
}
a{color:var(--cyan);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px;}

/* ── App shell ─────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh;}

.side{
  background:var(--bg-2);
  border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;
  padding:20px 14px;
  position:sticky;top:0;height:100vh;
}
.side__brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px;}
.side__brand img{width:30px;height:30px;object-fit:contain;}
.side__brand b{font-size:14px;font-weight:800;letter-spacing:-.01em;display:block;line-height:1.2;}
.side__brand span{font-size:10.5px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-weight:700;}

.side__nav{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.side__link{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--ink-2);font-weight:600;font-size:13px;
}
.side__link:hover{background:var(--surface);color:var(--ink);text-decoration:none;}
.side__link.is-active{background:var(--cyan-dim);color:#bae6fd;}
.side__link svg{width:16px;height:16px;flex:none;}

.side__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);}
.side__me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);}
.side__me img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--surface-2);}
.side__me div{min-width:0;}
.side__me strong{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side__me span{display:block;font-size:11px;color:var(--ink-3);font-family:var(--mono);}

.main{padding:26px 30px 60px;min-width:0;}

/* ── Page header ───────────────────────────────────────────────────────── */
.page__head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.page__head h1{font-size:22px;font-weight:800;letter-spacing:-.02em;}
.page__head p{color:var(--ink-2);font-size:13px;margin-top:3px;}
.page__head .spacer{flex:1;}
.crumb{font-size:12px;color:var(--ink-3);margin-bottom:6px;}
.crumb a{color:var(--ink-3);}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.card + .card{margin-top:16px;}
.card__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.card__head h2{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.card__head .spacer{flex:1;}
.card__hint{font-size:12px;color:var(--ink-3);margin-top:-8px;margin-bottom:12px;}

.grid{display:grid;gap:14px;}
.grid--stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.grid--projects{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}

/* ── Stat tiles ────────────────────────────────────────────────────────── */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1;}
.stat span{display:block;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin-top:4px;}
.stat--live b{color:var(--accent);}
.stat--failed b{color:var(--rose);}

/* ── Project cards ─────────────────────────────────────────────────────── */
.proj{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s ease, transform .15s ease;
}
.proj:hover{border-color:#31456e;transform:translateY(-1px);}
.proj__top{display:flex;align-items:flex-start;gap:10px;}
.proj__name{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.proj__name:hover{text-decoration:none;color:#fff;}
.proj__slug{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);}
.proj__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-2);}
.proj__meta span{display:inline-flex;align-items:center;gap:5px;}
.proj__meta svg{width:13px;height:13px;opacity:.6;}
.proj__foot{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line-soft);}
.proj__foot .spacer{flex:1;}

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3.5px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.badge--live{color:var(--accent);background:var(--accent-dim);border-color:rgba(52,211,153,.28);}
.badge--building,.badge--starting,.badge--health,.badge--cloning,.badge--queued{
  color:var(--amber);background:var(--amber-dim);border-color:rgba(251,191,36,.28);
}
.badge--building::before,.badge--starting::before,.badge--health::before,
.badge--cloning::before,.badge--queued::before{animation:pulse 1.2s ease-in-out infinite;}
.badge--failed{color:var(--rose);background:var(--rose-dim);border-color:rgba(251,113,133,.28);}
.badge--stopped,.badge--superseded,.badge--created{color:var(--ink-3);background:rgba(107,124,158,.12);border-color:var(--line);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 7px;border-radius:5px;
  font-family:var(--mono);font-size:11px;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:var(--radius-sm);
  font-family:var(--sans);font-size:13px;font-weight:700;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  cursor:pointer;transition:background .15s ease,border-color .15s ease;
  text-decoration:none;
}
.btn:hover{background:#22304f;border-color:#31456e;text-decoration:none;}
.btn svg{width:15px;height:15px;}
.btn--primary{background:var(--cyan);border-color:var(--cyan);color:#06283d;}
.btn--primary:hover{background:#7dd3fc;border-color:#7dd3fc;}
.btn--go{background:var(--accent);border-color:var(--accent);color:#052e20;}
.btn--go:hover{background:#6ee7b7;border-color:#6ee7b7;}
.btn--danger{background:transparent;border-color:rgba(251,113,133,.4);color:var(--rose);}
.btn--danger:hover{background:var(--rose-dim);border-color:var(--rose);}
.btn--sm{padding:5.5px 10px;font-size:12px;}
.btn--block{width:100%;}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.field{margin-bottom:16px;}
.field__label{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.06em;
}
.input,.select,.textarea{
  width:100%;padding:10px 12px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--ink);font-family:var(--sans);font-size:13.5px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim);
}
.input::placeholder{color:var(--ink-3);}
.input--mono,.textarea{font-family:var(--mono);font-size:12.5px;}
.textarea{resize:vertical;min-height:74px;}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c9e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;padding-right:32px;}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.5;}
.check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13px;color:var(--ink-2);}
.check input{margin-top:2px;width:15px;height:15px;accent-color:var(--cyan);cursor:pointer;flex:none;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px;}

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.alert{
  display:flex;align-items:flex-start;gap:9px;
  padding:10px 13px;border-radius:var(--radius-sm);
  font-size:13px;border:1px solid transparent;line-height:1.5;
}
.alert svg{width:16px;height:16px;flex:none;margin-top:1px;}
.alert--success{background:var(--accent-dim);border-color:rgba(52,211,153,.3);color:#a7f3d0;}
.alert--danger{background:var(--rose-dim);border-color:rgba(251,113,133,.3);color:#fecdd3;}
.alert--warning{background:var(--amber-dim);border-color:rgba(251,191,36,.3);color:#fde68a;}
.alert--info{background:var(--cyan-dim);border-color:rgba(56,189,248,.3);color:#bae6fd;}

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;margin:0 -4px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{
  text-align:left;padding:8px 10px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(26,36,64,.5);}
td.mono,th.mono{font-family:var(--mono);font-size:12px;}
.num{text-align:right;font-variant-numeric:tabular-nums;}

/* ── Build log ─────────────────────────────────────────────────────────── */
.logbox{
  background:#060b17;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--mono);font-size:12px;line-height:1.65;
  padding:14px 16px;max-height:62vh;overflow:auto;
  scrollbar-width:thin;
}
.logbox::-webkit-scrollbar{width:9px;height:9px;}
.logbox::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;}
.logline{display:flex;gap:12px;white-space:pre-wrap;word-break:break-word;}
.logline__ts{color:#3d4d6e;flex:none;user-select:none;font-size:11px;padding-top:1px;}
.logline__text{flex:1;min-width:0;}
.logline--step .logline__text{color:var(--cyan);font-weight:600;}
.logline--stderr .logline__text{color:var(--rose);}
.logline--stdout .logline__text{color:#c9d5ec;}

.log-status{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:12px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13px;
}
.spinner{
  width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(56,189,248,.25);border-top-color:var(--cyan);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Copy-to-clipboard field ───────────────────────────────────────────── */
.copyrow{display:flex;gap:8px;align-items:stretch;}
.copyrow .input{flex:1;}

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty{text-align:center;padding:52px 20px;}
.empty svg{width:40px;height:40px;color:var(--ink-3);margin-bottom:14px;}
.empty h3{font-size:16px;font-weight:700;margin-bottom:6px;}
.empty p{color:var(--ink-2);font-size:13px;max-width:420px;margin:0 auto 18px;}

/* ── Details/summary ───────────────────────────────────────────────────── */
details.block{border:1px solid var(--line);border-radius:var(--radius-sm);padding:0;margin-top:12px;}
details.block > summary{
  padding:10px 14px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-2);
  list-style:none;display:flex;align-items:center;gap:8px;
}
details.block > summary::-webkit-details-marker{display:none;}
details.block > summary::before{content:"▸";color:var(--ink-3);}
details.block[open] > summary::before{content:"▾";}
details.block > div{padding:0 14px 14px;}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login{
  min-height:100vh;display:grid;place-items:center;padding:32px 20px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(56,189,248,.13), transparent 62%),
    radial-gradient(760px 480px at 92% 108%, rgba(52,211,153,.11), transparent 62%),
    var(--bg);
}
/* Faint blueprint grid, the one visual nod to the intranet's login. */
.login::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 100%);
  pointer-events:none;
}
.login__box{position:relative;z-index:1;width:100%;max-width:940px;
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow);}

.login__pitch{padding:40px 38px;border-right:1px solid var(--line);
  background:linear-gradient(160deg,rgba(56,189,248,.07),transparent 55%);
  display:flex;flex-direction:column;}
.login__eyebrow{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#7dd3fc;background:var(--cyan-dim);border:1px solid rgba(56,189,248,.25);
  padding:6px 12px;border-radius:999px;margin-bottom:22px;
}
.login__eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(52,211,153,.2);animation:pulse 2s ease-in-out infinite;}
.login__pitch h1{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:12px;}
.login__pitch h1 em{font-style:normal;color:var(--accent);}
.login__pitch > p{color:var(--ink-2);font-size:13.5px;line-height:1.65;margin-bottom:26px;}

/* The pipeline diagram: what actually happens when you paste a repo URL. */
.pipe{display:flex;flex-direction:column;gap:0;margin-top:auto;}
.pipe__step{display:flex;align-items:flex-start;gap:12px;padding:8px 0;}
.pipe__dot{
  width:26px;height:26px;border-radius:8px;flex:none;
  display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--cyan);
  position:relative;
}
.pipe__step:not(:last-child) .pipe__dot::after{
  content:"";position:absolute;top:27px;left:50%;width:1px;height:19px;
  background:linear-gradient(var(--line),transparent);
}
.pipe__step b{display:block;font-size:12.5px;font-weight:700;}
.pipe__step span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.45;}

.login__form{padding:40px 38px;display:flex;flex-direction:column;justify-content:center;}
.login__logo{height:34px;object-fit:contain;object-position:left;margin-bottom:24px;align-self:flex-start;}
.login__form h2{font-size:19px;font-weight:800;letter-spacing:-.02em;}
.login__form > p{color:var(--ink-2);font-size:13px;margin:4px 0 22px;}
.login__foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--ink-3);line-height:1.6;}
.login__foot a{color:var(--ink-2);}

.field__wrap{position:relative;display:flex;align-items:center;}
.field__wrap .input{padding-left:38px;}
.field__icon{position:absolute;left:13px;color:var(--ink-3);display:flex;pointer-events:none;}
.field__icon svg{width:16px;height:16px;}
.toggle-pw{position:absolute;right:8px;background:none;border:none;color:var(--ink-3);
  cursor:pointer;padding:6px;display:flex;border-radius:6px;}
.toggle-pw:hover{color:var(--ink-2);background:var(--surface-2);}
.caps{display:none;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:var(--amber);}
.caps.is-on{display:flex;}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .login__box{grid-template-columns:1fr;max-width:460px;}
  .login__pitch{display:none;}
  .login__form{padding:32px 26px;}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr;}
  .side{
    position:static;height:auto;flex-direction:row;align-items:center;
    padding:10px 14px;gap:12px;overflow-x:auto;
    border-right:none;border-bottom:1px solid var(--line-soft);
  }
  .side__brand{padding:0;}
  .side__brand span{display:none;}
  .side__nav{flex-direction:row;margin:0;gap:4px;}
  .side__link span{display:none;}
  .side__link{padding:9px;}
  .side__foot{margin:0 0 0 auto;padding:0;border:none;}
  .side__me div{display:none;}
  .main{padding:18px 16px 48px;}
  .page__head h1{font-size:19px;}
}

/* ── New-project chooser ────────────────────────────────────────────────────
   Two genuinely different products behind one button, so the choice is given
   real estate rather than being a line in a dropdown. Used both in the modal
   and on /projects/new as a page.
   ───────────────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;}
/* MUST come with the rule above. `display:grid` on a class beats the browser's
   built-in [hidden]{display:none}, so without this the modal is painted on
   every page for ever: clicking a card does navigate, but the identical
   overlay is still on top of the new page, so it reads as "nothing happened,
   and it keeps happening". Toggling .hidden in JS then does nothing visible. */
.modal[hidden]{display:none;}
.modal__backdrop{position:absolute;inset:0;background:rgba(4,8,17,.72);backdrop-filter:blur(2px);}
.modal__panel{
  position:relative;z-index:1;width:100%;max-width:780px;max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);
  animation:modal-in .16s ease-out;
}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.99);}to{opacity:1;transform:none;}}
.modal__head{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 4px;}
.modal__head h2{font-size:18px;font-weight:800;letter-spacing:-.02em;}
.modal__head p{font-size:13px;color:var(--ink-2);margin-top:3px;}
.modal__close{
  margin-left:auto;background:none;border:none;color:var(--ink-3);
  font-size:26px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px;
}
.modal__close:hover{color:var(--ink);background:var(--surface-2);}
.modal__body{padding:14px 24px 24px;}

.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
.choice{
  display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.choice:hover{border-color:var(--cyan);background:var(--surface-2);transform:translateY(-2px);text-decoration:none;}
.choice:focus-visible{border-color:var(--cyan);}
.choice__icon{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
}
.choice__icon svg{width:21px;height:21px;}
.choice__icon--code{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(56,189,248,.28);}
.choice__icon--service{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(52,211,153,.28);}
.choice h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px;}
.choice > p{font-size:13px;color:var(--ink-2);line-height:1.6;margin-bottom:13px;}
.choice__list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px;}
.choice__list li{
  font-size:12px;color:var(--ink-3);padding-left:18px;position:relative;line-height:1.5;
}
.choice__list li::before{
  content:"";position:absolute;left:5px;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--ink-3);
}
.choice__go{
  margin-top:auto;font-size:12.5px;font-weight:700;color:var(--cyan);
}
.choice:hover .choice__go{color:#7dd3fc;}

@media (max-width:860px){
  .modal{padding:12px;}
  .modal__panel{max-height:92vh;}
  .modal__head{padding:18px 18px 4px;}
  .modal__body{padding:12px 18px 18px;}
  .choice-grid{grid-template-columns:1fr;}
}