/* ==========================================================================
   Bravo SCE portal
   Same palette and type as the corporate site, tuned for a working screen
   rather than a landing page: denser, quieter, and readable for a whole day.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --forest-900:#08211A;
  --forest-800:#0C2C21;
  --forest-700:#123A2B;
  --forest-600:#1A5340;
  --forest-500:#2A6E56;

  --gold-600:#A8842F;
  --gold-500:#C8A253;
  --gold-400:#DCC087;
  --gold-100:#F3E9CF;

  --cream:#F7F3EA;
  --cream-dark:#EFE8DA;
  --paper:#FFFFFF;

  --ink:#15201B;
  --ink-soft:#3C4A43;
  --muted:#697770;
  --muted-on-dark:#A9BDB2;

  --line:rgba(12,44,33,.14);
  --line-soft:rgba(12,44,33,.08);
  --line-gold:rgba(200,162,83,.38);

  --good:#1A5340;
  --warn:#96631B;
  --stop:#8C3320;

  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --shell:1680px;
  --gutter:22px;
  --r-sm:2px;
  --r-md:4px;
  --shadow-sm:0 1px 2px rgba(8,33,26,.05),0 8px 24px -16px rgba(8,33,26,.25);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:15.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--forest-600);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.14;
  letter-spacing:-.012em;color:var(--forest-800);margin:0 0 .45em}
h1{font-size:clamp(2rem,3.6vw,2.7rem)}
h2{font-size:clamp(1.5rem,2.4vw,1.95rem)}
h3{font-size:1.28rem}
h4{font-size:1.06rem}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
code{font-family:var(--font-mono);font-size:.88em;background:var(--cream-dark);
  padding:1px 5px;border-radius:var(--r-sm)}

/* ---------- 3. Shell ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.shell--narrow{max-width:920px}

.topbar{background:var(--forest-900);color:var(--cream);
  border-bottom:1px solid rgba(200,162,83,.22)}
.topbar .shell{display:flex;align-items:center;gap:20px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--font-display);
  font-size:1.28rem;color:var(--cream);letter-spacing:.01em}
.brand:hover{text-decoration:none}
.brand b{font-weight:600;color:var(--gold-400)}
.brand span{font-family:var(--font-body);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-on-dark)}
.topbar nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.topbar nav a{color:var(--muted-on-dark);padding:7px 11px;border-radius:var(--r-sm);
  font-size:.86rem;letter-spacing:.01em}
.topbar nav a:hover{color:var(--cream);background:rgba(247,243,234,.07);text-decoration:none}
.topbar nav a[aria-current]{color:var(--forest-900);background:var(--gold-400);font-weight:600}
.whoami{font-size:.78rem;color:var(--muted-on-dark);display:flex;align-items:center;gap:10px}
.whoami a{color:var(--gold-400)}

main{padding:30px 0 70px}
.page-head{margin-bottom:26px}
.page-head .eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-600);font-weight:600;margin-bottom:8px}
.page-head p.lede{color:var(--ink-soft);max-width:70ch;font-size:1.02rem;margin-top:-.1em}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}

/* ---------- 4. Layout helpers ---------- */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grid--stats{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row--between{justify-content:space-between}
.mt{margin-top:26px}
.mt-sm{margin-top:14px}

/* ---------- 5. Cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px}
.card--flush{padding:0;overflow:hidden}
.card--tint{background:var(--cream-dark);border-color:var(--line-soft)}
.card--dark{background:var(--forest-800);color:var(--cream);border-color:transparent}
.card--dark h2,.card--dark h3,.card--dark h4{color:var(--gold-400)}
.card--dark a{color:var(--gold-400)}
.card h3{margin-bottom:.35em}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line);background:var(--cream-dark)}
.card-head h3{margin:0}
.card-body{padding:18px 20px}
.card-foot{padding:12px 20px;border-top:1px solid var(--line);background:var(--cream-dark);
  font-size:.83rem;color:var(--muted)}

/* ---------- 6. Type utilities ---------- */
.meta{font-size:.79rem;color:var(--muted)}
.meta strong{color:var(--ink-soft);font-weight:600}
.small{font-size:.86rem}
.dim{color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:.84em}
.rule{border:0;border-top:1px solid var(--line);margin:22px 0}
.lead-in{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-600);font-weight:600}

/* ---------- 7. Tags and states ---------- */
.tag{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;padding:3px 8px;border-radius:2px;border:1px solid var(--line);
  background:var(--cream-dark);color:var(--ink-soft);white-space:nowrap}
.tag--gold{background:var(--gold-100);border-color:var(--line-gold);color:var(--gold-600)}
.tag--good{background:rgba(26,83,64,.1);border-color:rgba(26,83,64,.3);color:var(--good)}
.tag--warn{background:rgba(150,99,27,.1);border-color:rgba(150,99,27,.3);color:var(--warn)}
.tag--stop{background:rgba(140,51,32,.1);border-color:rgba(140,51,32,.3);color:var(--stop)}
.tag--live{background:var(--forest-700);border-color:var(--forest-700);color:var(--gold-400)}
.tag--idle{color:var(--muted)}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--muted)}
.dot--good{background:var(--good)}
.dot--warn{background:var(--warn)}
.dot--stop{background:var(--stop)}

/* ---------- 8. Tables ---------- */
.data-table{font-size:.88rem;background:var(--paper)}
.data-table th{text-align:left;font-weight:600;font-size:.71rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--cream-dark);white-space:nowrap}
.data-table td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--cream)}
.data-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table .t-title{font-weight:500;color:var(--ink)}

/* ---------- 9. Lists ---------- */
.tick-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.tick-list li{position:relative;padding-left:22px;color:var(--ink-soft)}
.tick-list li::before{
  content:""; position:absolute; left:3px; top:.58em;
  width:5px; height:5px; border-radius:50%; background:var(--gold-500);
}
.numbered{list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:16px}
.numbered li{counter-increment:n;position:relative;padding-left:42px}
.numbered li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:var(--font-display);font-size:1.15rem;color:var(--gold-600)}
.plain-list{list-style:none;display:flex;flex-direction:column;gap:6px}

/* ---------- 10. Steps ---------- */
.steps{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--paper)}
.step{flex:1 1 140px;padding:12px 14px;border-right:1px solid var(--line-soft);min-width:0}
.step:last-child{border-right:0}
.step .n{font-family:var(--font-display);font-size:1.05rem;color:var(--muted)}
.step .t{font-size:.82rem;font-weight:500;color:var(--ink-soft);margin-top:2px}
.step[data-state="done"]{background:rgba(26,83,64,.07)}
.step[data-state="done"] .n,.step[data-state="done"] .t{color:var(--good)}
.step[data-state="active"]{background:var(--gold-100)}
.step[data-state="active"] .n,.step[data-state="active"] .t{color:var(--gold-600);font-weight:600}
.step[data-state="blocked"]{background:rgba(140,51,32,.07)}
.step[data-state="blocked"] .n,.step[data-state="blocked"] .t{color:var(--stop)}

/* ---------- 11. Forms ---------- */
label{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=file],
select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);font-size:.93rem}
textarea{min-height:110px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--gold-500);outline:none;
  box-shadow:0 0 0 3px rgba(200,162,83,.18)}
.field{margin-bottom:14px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:var(--r-sm);
  background:var(--forest-700);color:var(--cream);font-size:.86rem;font-weight:500;
  border:1px solid var(--forest-700);cursor:pointer;letter-spacing:.01em}
.btn:hover{background:var(--forest-600);border-color:var(--forest-600);text-decoration:none;color:var(--cream)}
.btn--gold{background:var(--gold-500);border-color:var(--gold-500);color:var(--forest-900)}
.btn--gold:hover{background:var(--gold-400);border-color:var(--gold-400);color:var(--forest-900)}
.btn--ghost{background:transparent;color:var(--forest-700);border-color:var(--line)}
.btn--ghost:hover{background:var(--cream-dark);color:var(--forest-700)}
.btn--sm{padding:5px 11px;font-size:.78rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- 12. Notices ---------- */
.notice{border-left:3px solid var(--gold-500);background:var(--gold-100);
  padding:13px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.9rem;color:var(--ink-soft)}
.notice--stop{border-left-color:var(--stop);background:rgba(140,51,32,.08)}
.notice--good{border-left-color:var(--good);background:rgba(26,83,64,.08)}
.notice strong{color:var(--ink)}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:.9rem;
  border:1px dashed var(--line);border-radius:var(--r-md);background:var(--paper)}

/* ---------- 13. Stats ---------- */
.stat{display:flex;flex-direction:column;gap:2px}
.stat .figure{font-family:var(--font-display);font-size:2.1rem;line-height:1;color:var(--forest-700)}
.stat .label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card--dark .stat .figure{color:var(--gold-400)}
.card--dark .stat .label{color:var(--muted-on-dark)}

/* ---------- 14. Notes ---------- */
.note-item{border-bottom:1px solid var(--line-soft);padding:13px 0}
.note-item:last-child{border-bottom:0;padding-bottom:0}
.note-item .who{font-size:.76rem;color:var(--muted);display:flex;gap:9px;align-items:center;
  margin-bottom:4px;flex-wrap:wrap}
.note-item .body{white-space:pre-wrap;color:var(--ink-soft);font-size:.92rem}

/* ---------- 15. Element accents ---------- */
.el-energy{--accent:var(--gold-500)}
.el-foodwaste{--accent:var(--forest-500)}
.el-rainwater{--accent:var(--forest-600)}
.accent-bar{height:3px;background:var(--accent,var(--gold-500));margin:-20px -22px 16px}
.card--flush .accent-bar{margin:0}

/* ---------- 16. Document pack ---------- */
.doc-row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--line-soft)}
.doc-row:last-child{border-bottom:0}
.doc-row .doc-main{flex:1;min-width:0}
.doc-row .doc-title{font-weight:500}
.doc-row .doc-meta{font-size:.77rem;color:var(--muted)}
.doc-row.is-superseded .doc-title{color:var(--muted);text-decoration:line-through}

/* ---------- 17. Requirement pack ---------- */
.pack{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.pack-head{background:var(--forest-800);color:var(--cream);padding:26px 30px}
.pack-head .eyebrow{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-400);font-weight:600;margin-bottom:9px}
.pack-head h1{color:var(--cream);margin:0 0 .22em;font-size:clamp(1.7rem,3vw,2.3rem)}
.pack-head .sub{color:var(--muted-on-dark);font-size:.96rem;max-width:72ch}
.pack-head .issued{margin-top:16px;padding-top:14px;border-top:1px solid rgba(200,162,83,.25);
  font-size:.78rem;color:var(--muted-on-dark);display:flex;gap:26px;flex-wrap:wrap}
.pack-body{padding:28px 30px}
.pack-body section{margin-bottom:30px}
.pack-body section:last-child{margin-bottom:0}
.pack-body h2{font-size:1.4rem;padding-bottom:7px;border-bottom:1px solid var(--line-gold);
  margin-bottom:14px}
.req-table td.id{font-family:var(--font-mono);font-size:.8rem;color:var(--gold-600);
  font-weight:600;white-space:nowrap}
.req-table td.req{font-weight:500;color:var(--ink);min-width:200px}
.req-table td.src{font-size:.8rem;color:var(--muted);white-space:normal;min-width:130px}
.pack-foot{padding:18px 30px;background:var(--cream-dark);border-top:1px solid var(--line);
  font-size:.79rem;color:var(--muted)}

/* ---------- 18. Source freshness ---------- */
.freshness{display:inline-flex;align-items:center;gap:7px;font-size:.77rem;color:var(--muted)}
.source-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.source-list li{padding-left:15px;border-left:2px solid var(--line-gold)}
.source-list .s-title{font-weight:500;color:var(--ink)}
.source-list .s-meta{font-size:.77rem;color:var(--muted)}

/* ---------- 20. Print ---------- */
@media print{
  body{background:#fff;font-size:10.6pt}
  .topbar,.no-print,main>.shell>.crumbs,.pack-actions{display:none !important}
  main{padding:0}
  .shell{max-width:none;padding:0}
  .pack{border:0}
  .pack-head{background:#fff;color:#000;border-bottom:2px solid var(--gold-500);padding:0 0 14pt}
  .pack-head h1{color:#000}
  .pack-head .sub,.pack-head .issued{color:#333}
  .pack-body{padding:14pt 0}
  .pack-foot{background:#fff;padding:10pt 0;border-top:1px solid #999}
  .data-table th{background:#f2f2f2;color:#000}
  a{color:#000;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  section{break-inside:avoid}
  tr{break-inside:avoid}
}

/* ==========================================================================
   21. Refresh
   Depth and translucency, applied where it helps and kept away from the data.
   Chrome, hero bands and the sign in screen get the glass. Tables and cards
   that carry numbers stay opaque, because a working tool has to stay readable
   for eight hours, not photograph well for five seconds.
   ========================================================================== */

:root{
  --glass:rgba(255,255,255,.72);
  --glass-dark:rgba(8,33,26,.72);
  --lift:0 1px 1px rgba(8,33,26,.04),0 6px 16px -10px rgba(8,33,26,.28);
  --lift-hi:0 2px 4px rgba(8,33,26,.06),0 22px 44px -22px rgba(8,33,26,.42);
  --ring:0 0 0 3px rgba(200,162,83,.22);
}

/* ---- page ground: a warm wash rather than a flat fill ---- */
body{
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(42,110,86,.11), transparent 62%),
    radial-gradient(900px 520px at 98% 0%, rgba(200,162,83,.13), transparent 58%),
    var(--cream);
  background-attachment:fixed;
}

/* ---- top bar: floats over the content ---- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(8,33,26,.94), rgba(8,33,26,.84));
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(200,162,83,.2);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -24px rgba(0,0,0,.9);
}
.topbar nav a{transition:background .18s var(--ease), color .18s var(--ease)}
.topbar nav a[aria-current]{box-shadow:0 2px 12px -4px rgba(200,162,83,.55)}

/* ---- cards: a real edge, and a lift when they are a link ---- */
.card{
  box-shadow:var(--lift);
  border-color:rgba(12,44,33,.1);
  transition:box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.card--flush:has(.card-head h3 a):hover,
.card:has(> .accent-bar):hover{
  box-shadow:var(--lift-hi);
  border-color:var(--line-gold);
  transform:translateY(-1px);
}
.card-head{
  background:linear-gradient(180deg, rgba(247,243,234,.9), rgba(239,232,218,.75));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.card--tint{
  background:linear-gradient(160deg, rgba(243,233,207,.5), rgba(239,232,218,.75));
  border-color:rgba(200,162,83,.24);
}
.card--dark{
  background:
    radial-gradient(520px 200px at 100% 0%, rgba(200,162,83,.2), transparent 62%),
    linear-gradient(155deg, var(--forest-700), var(--forest-900));
  box-shadow:var(--lift-hi);
}

/* ---- page heading ----
   No rule, no leading mark. The eyebrow carries its own weight in colour and
   letter spacing, which is enough, and nothing on the page looks like a stray
   punctuation mark. */
.page-head{padding-bottom:4px}

/* ---- stats ---- */
.stat .figure{
  background:linear-gradient(175deg, var(--forest-600), var(--forest-800));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.card--dark .stat .figure{
  background:linear-gradient(175deg, var(--gold-400), var(--gold-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- controls ---- */
.btn{transition:background .18s var(--ease), border-color .18s var(--ease),
  box-shadow .18s var(--ease), transform .12s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--gold{box-shadow:0 8px 20px -12px rgba(168,132,47,.9)}
.btn--gold:hover{box-shadow:0 10px 26px -12px rgba(168,132,47,1)}
.btn--danger{background:transparent; color:var(--stop); border-color:rgba(140,51,32,.35)}
.btn--danger:hover{background:rgba(140,51,32,.08); color:var(--stop); border-color:var(--stop)}

input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  background:rgba(255,255,255,.9);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
input:focus,select:focus,textarea:focus{box-shadow:var(--ring)}

.data-table tbody tr{transition:background .14s var(--ease)}

/* ==========================================================================
   22. Sign in
   ========================================================================== */

.signin{
  position:relative; min-height:100vh; display:grid; place-items:center;
  padding:28px 20px; overflow:hidden; background:var(--forest-900);
}
.signin-bg{position:absolute; inset:0; pointer-events:none}
.signin-bg .orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55}
.orb--gold{
  width:56vmax; height:56vmax; top:-24vmax; right:-18vmax;
  background:radial-gradient(circle, rgba(200,162,83,.55), rgba(200,162,83,0) 68%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.orb--moss{
  width:62vmax; height:62vmax; bottom:-30vmax; left:-22vmax;
  background:radial-gradient(circle, rgba(42,110,86,.68), rgba(42,110,86,0) 68%);
  animation:drift-b 32s ease-in-out infinite alternate;
}
.orb--deep{
  width:40vmax; height:40vmax; top:38%; left:52%;
  background:radial-gradient(circle, rgba(26,83,64,.5), rgba(26,83,64,0) 70%);
  animation:drift-a 38s ease-in-out infinite alternate-reverse;
}
.signin-bg .grain{
  position:absolute; inset:-100%; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-5%,6%,0) scale(1.1)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(7%,-5%,0) scale(1.08)}}

.signin-card{
  position:relative; z-index:1; width:100%; max-width:420px;
  padding:38px 36px 30px;
  border-radius:8px;
  background:linear-gradient(165deg, rgba(247,243,234,.13), rgba(247,243,234,.06));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(200,162,83,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 40px 90px -40px rgba(0,0,0,.85),
    0 0 0 1px rgba(8,33,26,.35);
  color:var(--cream);
  animation:card-in .55s var(--ease) both;
}
@keyframes card-in{from{opacity:0; transform:translateY(12px) scale(.985)} to{opacity:1}}

.signin-mark{display:flex; flex-direction:column; gap:5px; margin-bottom:22px}
.signin-word{font-family:var(--font-display); font-size:1.85rem; line-height:1; color:var(--cream)}
.signin-word b{font-weight:600; color:var(--gold-400)}
.signin-sub{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-on-dark);
}
.signin-lede{
  font-family:var(--font-display); font-size:1.08rem; font-style:italic;
  color:var(--gold-400); margin:0 0 22px;
  padding-bottom:18px; border-bottom:1px solid rgba(200,162,83,.22);
}

.signin-card label{color:var(--muted-on-dark); font-size:.68rem; letter-spacing:.14em}
.signin-card input{
  background:rgba(8,33,26,.42);
  border:1px solid rgba(200,162,83,.24);
  color:var(--cream);
  padding:11px 13px;
}
.signin-card input::placeholder{color:rgba(169,189,178,.6)}
.signin-card input:focus{
  border-color:var(--gold-400); background:rgba(8,33,26,.58);
  box-shadow:0 0 0 3px rgba(200,162,83,.2);
}
.signin-card input:-webkit-autofill{
  -webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 40px #123a2b inset;
  caret-color:var(--cream);
}

.signin-error{
  border-left:2px solid var(--gold-500);
  background:rgba(140,51,32,.24);
  color:#F6DED7;
  padding:11px 14px; margin-bottom:18px; font-size:.88rem; border-radius:0 2px 2px 0;
}

.signin-go{
  width:100%; justify-content:center; margin-top:6px; padding:12px 18px;
  letter-spacing:.02em; font-weight:600;
}
.signin-go svg{transition:transform .2s var(--ease)}
.signin-go:hover svg{transform:translateX(3px)}

.signin-foot{
  margin-top:22px; padding-top:16px;
  border-top:1px solid rgba(247,243,234,.12);
  font-size:.77rem; line-height:1.6; color:var(--muted-on-dark);
}
.signin-reg{
  position:absolute; bottom:20px; left:0; right:0; text-align:center; z-index:1;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(169,189,178,.5);
}

/* ==========================================================================
   23. Accounts
   ========================================================================== */

.account-list{display:flex; flex-direction:column; gap:9px}
.account{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--lift); overflow:hidden;
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.account[open]{box-shadow:var(--lift-hi); border-color:var(--line-gold)}
.account[data-off]{opacity:.62}
.account summary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 18px; cursor:pointer; list-style:none;
  background:linear-gradient(180deg, rgba(247,243,234,.6), rgba(255,255,255,0));
}
.account summary::-webkit-details-marker{display:none}
.account summary:hover{background:var(--cream-dark)}
.account[open] summary{border-bottom:1px solid var(--line-soft)}
.acc-user{
  font-family:var(--font-mono); font-size:.92rem; font-weight:600; color:var(--forest-800);
}
.acc-name{font-size:.88rem; color:var(--ink-soft)}
.acc-meta{margin-left:auto; font-size:.77rem; color:var(--muted)}
.account-body{padding:18px}
.account-actions{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
}

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

/* ==========================================================================
   24. Sign in, second pass
   A photograph behind glass. The picture carries the mood, a deep green scrim
   keeps it corporate rather than scenic, and the card floats clear of it so
   the two fields are never fighting the image for attention.
   ========================================================================== */

.signin{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  padding:32px 22px;
  overflow:hidden;
  background:var(--forest-900);
}

/* ---- the photograph, and everything that tames it ---- */
.signin-bg{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.signin-bg::before{
  content:"";
  position:absolute; inset:-2%;
  background-image:url("img/landscape.jpg");
  background-size:cover;
  background-position:center 38%;
  filter:saturate(88%) contrast(103%) brightness(96%);
  transform:scale(1.04);
  animation:bg-breathe 46s ease-in-out infinite alternate;
}
/* Scrim: heavy at the edges, lighter where the card sits, so the photograph is
   still legible as a photograph and the card still has contrast to sit on. */
.signin-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(115% 85% at 50% 44%, rgba(8,33,26,.06) 0%, rgba(8,33,26,.4) 56%, rgba(8,33,26,.78) 100%),
    linear-gradient(180deg, rgba(8,33,26,.72) 0%, rgba(8,33,26,.1) 26%, rgba(8,33,26,.2) 60%, rgba(8,33,26,.8) 100%),
    linear-gradient(112deg, rgba(12,44,33,.5) 0%, rgba(12,44,33,0) 52%);
}
@keyframes bg-breathe{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.11) translate3d(0,-1.2%,0)}
}
@media (max-width:820px){
  .signin-bg::before{background-image:url("img/landscape-sm.jpg")}
}

/* A single warm bloom, so the gold in the brand appears in the light itself. */
.signin-bg .orb{position:absolute; border-radius:50%; filter:blur(90px)}
.orb--gold{
  width:60vmax; height:60vmax; top:-26vmax; right:-20vmax; opacity:.42;
  background:radial-gradient(circle, rgba(200,162,83,.7), rgba(200,162,83,0) 66%);
  animation:drift-a 34s ease-in-out infinite alternate;
}
.orb--moss, .orb--deep{display:none}

.signin-bg .grain{
  position:absolute; inset:-100%; opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- the card ---- */
.signin-card{
  position:relative; z-index:1;
  width:100%; max-width:430px;
  padding:40px 38px 32px;
  border-radius:3px;
  background:linear-gradient(168deg, rgba(9,34,26,.74), rgba(7,26,20,.66));
  backdrop-filter:blur(30px) saturate(130%);
  -webkit-backdrop-filter:blur(30px) saturate(130%);
  border:1px solid rgba(200,162,83,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 50px 110px -46px rgba(0,0,0,.9);
  color:var(--cream);
  animation:card-in .6s var(--ease) both;
}
/* A gold rule across the top edge, the one flourish the card is allowed. */
.signin-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, rgba(200,162,83,0), var(--gold-500) 22%, var(--gold-400) 50%, var(--gold-500) 78%, rgba(200,162,83,0));
}

.signin-mark{margin-bottom:26px}
.signin-word{font-size:2rem; letter-spacing:.005em}
.signin-sub{font-size:.62rem; letter-spacing:.24em; color:rgba(220,192,135,.72)}
.signin-lede{
  font-size:1.02rem;
  color:rgba(247,243,234,.82);
  border-bottom-color:rgba(200,162,83,.18);
  margin-bottom:24px; padding-bottom:20px;
}

.signin-card label{color:rgba(220,192,135,.78)}
.signin-card input{
  background:rgba(4,20,15,.52);
  border-color:rgba(247,243,234,.16);
  border-radius:2px;
}
.signin-card input:hover{border-color:rgba(200,162,83,.34)}
.signin-card input:focus{
  border-color:var(--gold-400);
  background:rgba(4,20,15,.72);
  box-shadow:0 0 0 3px rgba(200,162,83,.18);
}
.signin-card input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #0b2b20 inset}

.signin-go{border-radius:2px}
.signin-foot{border-top-color:rgba(247,243,234,.1); color:rgba(169,189,178,.82)}
.signin-reg{color:rgba(169,189,178,.42)}

@media (max-width:520px){
  .signin-card{padding:32px 24px 26px}
  .signin-word{font-size:1.7rem}
}

/* ==========================================================================
   25. Top bar, second pass
   One row: brand, tabs, person. The tabs scroll sideways on a narrow screen
   rather than wrapping onto a second line and pushing the page down.
   ========================================================================== */

.topbar .shell.topbar-inner{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:26px;
  min-height:56px;
  padding:0 var(--gutter);
}

/* ---- brand ---- */
.brand{
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  flex:none; padding:8px 0; line-height:1.15;
}
.brand-word{font-family:var(--font-display); font-size:1.22rem; color:var(--cream); letter-spacing:.01em}
.brand-word b{font-weight:600; color:var(--gold-400)}
.brand-sub{
  font-family:var(--font-body); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(169,189,178,.7);
}

/* ---- tabs ---- */
.topbar .tabs{
  display:flex; align-items:stretch; gap:0; margin:0 auto 0 0;
  flex:1 1 auto; min-width:0;
  flex-wrap:nowrap;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.topbar .tabs::-webkit-scrollbar{display:none}
.topbar .tabs a{
  position:relative;
  display:flex; align-items:center;
  padding:0 14px; border-radius:0;
  font-size:.83rem; letter-spacing:.01em; white-space:nowrap;
  color:rgba(169,189,178,.92); background:none;
}
.topbar .tabs a:hover{color:var(--cream); background:rgba(247,243,234,.06); text-decoration:none}
.topbar .tabs a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px;
  background:var(--gold-500); transform:scaleX(0); transform-origin:center;
  transition:transform .2s var(--ease);
}
.topbar .tabs a:hover::after{transform:scaleX(.5)}
.topbar .tabs a[aria-current]{
  color:var(--cream); background:rgba(247,243,234,.07); font-weight:600; box-shadow:none;
}
.topbar .tabs a[aria-current]::after{transform:scaleX(1)}

/* ---- person ---- */
.whoami{
  display:flex; align-items:center; gap:14px; flex:none; flex-wrap:nowrap;
  padding-left:20px; border-left:1px solid rgba(247,243,234,.1);
}
.who-name{font-size:.8rem; color:rgba(169,189,178,.92); white-space:nowrap}
.who-out{
  font-size:.76rem; color:var(--gold-400); white-space:nowrap;
  padding:5px 11px; border:1px solid rgba(200,162,83,.32); border-radius:2px;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.who-out:hover{background:rgba(200,162,83,.14); border-color:var(--gold-400); text-decoration:none}

@media (max-width:860px){
  .brand-sub{display:none}
  .topbar-inner{gap:14px}
  .whoami{padding-left:12px; gap:9px}
  .who-name{display:none}
}


/* ==========================================================================
   27. Filter bar
   The controls sit where the reader is already looking, and what is currently
   applied is shown as something you can click to take off again.
   ========================================================================== */

.filter-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px;
  align-items:end;
}
.filter-bar .field{margin-bottom:0}
.filter-go{display:flex; gap:9px; align-items:center; flex-wrap:wrap}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px; border-radius:2px;
  background:var(--gold-100); border:1px solid var(--line-gold);
  color:var(--gold-600); font-size:.77rem; font-weight:600;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.chip:hover{background:var(--gold-400); border-color:var(--gold-500);
  color:var(--forest-900); text-decoration:none}
.chip b{font-weight:400; opacity:.7; font-size:.95rem; line-height:1}

/* ==========================================================================
   28. Document pack
   ========================================================================== */

.doc-group{margin-bottom:22px}
.doc-group:last-child{margin-bottom:0}
.doc-group-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:7px; margin-bottom:4px;
  border-bottom:1px solid var(--line-gold);
}

.doc-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 20px;
  align-items:start;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.doc-row:last-child{border-bottom:0}
.doc-main{grid-column:1; min-width:0}
.doc-title{
  font-weight:500; font-size:.97rem; line-height:1.4;
  overflow-wrap:anywhere;
}
.doc-meta{
  font-size:.77rem; color:var(--muted); margin-top:4px; line-height:1.9;
}
.doc-row.is-superseded .doc-title{color:var(--muted); text-decoration:line-through}

/* Controls sit in the second column while there is room, and drop under the
   document when there is not. They never squeeze the name. */
.doc-actions{
  grid-column:2; grid-row:1;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  justify-content:flex-end; max-width:min(560px, 52vw);
}
.doc-actions form{display:inline-flex; margin:0}
.doc-move select{width:auto; padding:5px 9px; font-size:.78rem; max-width:180px}

@media (max-width:1100px){
  .doc-row{grid-template-columns:minmax(0,1fr)}
  .doc-actions{grid-column:1; grid-row:auto; justify-content:flex-start;
    max-width:none; margin-top:8px}
}

.upload{font-size:.9rem}
.upload .field{margin-bottom:10px}
.upload input[type=file]{
  padding:8px; font-size:.82rem; background:var(--paper);
  border:1px dashed var(--line-gold); border-radius:var(--r-sm); cursor:pointer;
}
.upload input[type=file]:hover{background:var(--gold-100)}

.check-row{display:flex; gap:16px; flex-wrap:wrap}
.check{
  display:inline-flex; align-items:center; gap:7px;
  text-transform:none; letter-spacing:0; font-weight:400; font-size:.9rem;
  color:var(--ink-soft); margin:0;
}
.check input{width:auto}

/* ==========================================================================
   30. Repeating rows, for attendance and action items
   ========================================================================== */

.repeat{display:flex; flex-direction:column; gap:8px}
.repeat-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.repeat-row--4{grid-template-columns:3fr 1.2fr 1fr 1fr}
@media (max-width:760px){
  .repeat-row, .repeat-row--4{grid-template-columns:1fr}
}
textarea.mono-ish{font-family:var(--font-mono); font-size:.85rem; line-height:1.65}

/* ==========================================================================
   31. Minutes of meeting
   Laid out as the issued Bravo Skills Consultancy document, so printing it
   produces the same thing on paper rather than an approximation.
   ========================================================================== */

.mom{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:44px 48px; color:var(--ink); box-shadow:var(--lift);
  font-size:.92rem; line-height:1.62;
}
.mom-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  padding-bottom:16px; margin-bottom:26px; border-bottom:2px solid var(--gold-500);
  flex-wrap:wrap;
}
.mom-name{
  font-family:var(--font-display); font-size:1.32rem; font-weight:600;
  letter-spacing:.03em; color:var(--forest-800);
}
.mom-reg{font-size:.78rem; color:var(--muted)}
.mom-contact{font-size:.74rem; color:var(--muted); text-align:right; line-height:1.6}

.mom-title{
  font-family:var(--font-display); font-size:1.5rem; letter-spacing:.09em;
  text-align:center; margin:0 0 4px; color:var(--forest-800);
}
.mom-sub{text-align:center; font-size:.85rem; color:var(--muted); margin:0 0 26px}

.mom-table{width:100%; border-collapse:collapse; margin:0 0 22px; font-size:.86rem}
.mom-table th, .mom-table td{
  border:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top;
}
.mom-table thead th{
  background:var(--cream-dark); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:600;
}
.mom-details th{
  width:160px; background:var(--cream-dark); font-weight:600;
  font-size:.82rem; color:var(--ink-soft);
}

.mom-h2{
  font-family:var(--font-body); font-size:.82rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--forest-700);
  margin:26px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.mom-section p{margin:0 0 10px; text-align:justify}
.mom-bullets{list-style:none; margin:8px 0 12px; padding:0}
.mom-bullets li{position:relative; padding-left:20px; margin-bottom:6px}
.mom-bullets li::before{
  content:""; position:absolute; left:3px; top:.62em; width:7px; height:7px;
  border:1px solid var(--forest-600);
}
.mom-confirm{font-size:.84rem; text-align:justify; color:var(--ink-soft)}
.mom-sign{margin-top:28px}
.mom-sign-label{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-600); font-weight:600; margin-bottom:8px;
}
.mom-foot{
  margin-top:32px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.68rem; color:var(--muted); text-align:center; line-height:1.7;
}

@media (max-width:640px){
  .mom{padding:26px 20px}
  .mom-contact{text-align:left}
}

@media print{
  .mom{border:0; box-shadow:none; padding:0; font-size:10.5pt}
  .mom-head{border-bottom:2px solid #000}
  .mom-section, .mom-table tr{break-inside:avoid}
  .mom-foot{position:fixed; bottom:0; left:0; right:0}
}

/* ==========================================================================
   32. Milestones, second pass
   A list you can read, with the form kept behind a toggle. The earlier version
   showed every control on every row, which turned ten milestones into a wall.
   ========================================================================== */

.ms-bar{height:3px; background:var(--cream-dark)}
.ms-bar span{display:block; height:100%; background:var(--gold-500); transition:width .4s var(--ease)}

.ms-group{margin-bottom:26px}
.ms-group:last-child{margin-bottom:0}
.ms-group-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-bottom:7px; margin-bottom:10px; border-bottom:1px solid var(--line-gold);
}
.ms-group-head a{color:var(--gold-600)}

.ms-list{position:relative; padding-left:24px}
.ms-list::before{
  content:""; position:absolute; left:5px; top:14px; bottom:14px; width:2px;
  background:var(--line);
}
.ms{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px;
  align-items:start;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.ms:last-child{border-bottom:0}
.ms-dot{
  position:absolute; left:-24px; top:16px;
  width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:2px solid var(--muted);
}
.ms[data-state="active"] .ms-dot{
  border-color:var(--gold-500); background:var(--gold-400);
  box-shadow:0 0 0 4px rgba(200,162,83,.18);
}
.ms[data-state="done"] .ms-dot{border-color:var(--good); background:var(--good)}
.ms[data-state="blocked"] .ms-dot{border-color:var(--stop); background:var(--stop)}

.ms-read{grid-column:1; min-width:0}
.ms-line{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.ms-name{font-weight:500; font-size:.97rem; color:var(--ink); overflow-wrap:anywhere}
.ms[data-state="done"] .ms-name{color:var(--muted)}
.ms-due{font-size:.78rem; color:var(--muted); white-space:nowrap}
.ms-due.is-late{color:var(--stop); font-weight:600}
.ms-detail-read{font-size:.85rem; color:var(--ink-soft); margin-top:3px}

.ms-edit{grid-column:2; grid-row:1}
.ms-edit summary{list-style:none; cursor:pointer; white-space:nowrap}
.ms-edit summary::-webkit-details-marker{display:none}
.ms-edit[open] summary{background:var(--cream-dark); border-color:var(--gold-500)}
.ms-edit-body{
  grid-column:1 / -1;
  margin-top:12px; padding:16px;
  background:var(--cream); border:1px solid var(--line-gold); border-radius:var(--r-sm);
}
.ms-edit[open]{grid-column:1 / -1; grid-row:auto}
.ms-edit[open] summary{display:inline-flex; margin-bottom:0}
.ms-edit-body .field{margin-bottom:11px}

.ms-add-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,2fr) 150px 145px auto;
  gap:9px; align-items:center;
}
.ms-add-grid input, .ms-add-grid select{padding:8px 10px; font-size:.88rem}

@media (max-width:1000px){
  .ms{grid-template-columns:minmax(0,1fr)}
  .ms-edit{grid-column:1; grid-row:auto; justify-self:start; margin-top:6px}
  .ms-add-grid{grid-template-columns:1fr 1fr; }
  .ms-add-grid button{grid-column:1 / -1; justify-self:start}
}
@media (max-width:620px){
  .ms-add-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   33. Phone
   The portal is a working tool on a desk, but it gets opened on a phone on a
   site visit, so nothing may overflow sideways.
   ========================================================================== */

@media (max-width:760px){
  body{font-size:15px}
  :root{--gutter:16px}

  main{padding:20px 0 48px}
  .split{gap:18px}
  .grid{gap:14px}
  .grid--2, .grid--3{grid-template-columns:1fr}
  .grid--stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

  .card{padding:16px}
  .card-body, .card-head, .card-foot{padding-left:16px; padding-right:16px}

  h1{font-size:1.85rem}
  h2{font-size:1.4rem}
  .page-head p.lede{font-size:.96rem}

  /* Wide tables scroll inside their card instead of stretching the page. */
  .card--flush{overflow-x:auto}
  .data-table{min-width:520px}
  .mom-table{min-width:0}

  .field-row{grid-template-columns:1fr}
  .filter-bar{grid-template-columns:1fr}

  .doc-actions .btn, .doc-actions select{font-size:.8rem}
  .steps{flex-direction:column}
  .step{border-right:0; border-bottom:1px solid var(--line-soft)}
  .step:last-child{border-bottom:0}
}

/* Nothing, anywhere, may push the page sideways. */
html, body{max-width:100%; overflow-x:hidden}
img, table, pre{max-width:100%}

/* ==========================================================================
   34. Row menu
   The two things you do often stay on the row. The rest live behind one
   button, so a list of documents reads as a list of documents.
   ========================================================================== */

.menu{position:relative}
.menu > summary{list-style:none; cursor:pointer; white-space:nowrap}
.menu > summary::-webkit-details-marker{display:none}
.menu[open] > summary{background:var(--cream-dark); border-color:var(--gold-500)}
.menu-body{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  min-width:232px; padding:6px;
  background:var(--paper); border:1px solid var(--line-gold);
  border-radius:var(--r-md); box-shadow:var(--lift-hi);
}
.menu-body form{display:block; margin:0}
.menu-body button{
  display:block; width:100%; text-align:left;
  padding:8px 11px; border-radius:var(--r-sm);
  font-size:.86rem; color:var(--ink-soft); background:none; border:0; cursor:pointer;
}
.menu-body button:hover{background:var(--cream-dark); color:var(--ink)}
.menu-body button.is-danger{color:var(--stop)}
.menu-body button.is-danger:hover{background:rgba(140,51,32,.08)}
.menu-select{padding:8px 11px; border-top:1px solid var(--line-soft); margin-top:4px}
.menu-select label{
  display:flex; align-items:center; gap:8px; margin:0;
  text-transform:none; letter-spacing:0; font-weight:400;
  font-size:.86rem; color:var(--ink-soft);
}
.menu-select select{flex:1; padding:5px 8px; font-size:.82rem}

@media (max-width:1100px){
  .menu-body{right:auto; left:0}
}