/* ==========================================================================
   ODDES TOOLS: the platform shell around every tool on oddes.leadflix.io.
   The ads report's "Night and Day" world (report/styles.css) carried over to
   the start page, the sales calculator and the users page: warm paper by
   day, the charcoal console by night, one blue on values, grain and a slow
   light. Every colour lives in the two theme blocks below; components use
   tokens only. Page-specific rules live next to each page.
   ========================================================================== */

:root{
  --display:"Baskervville",Georgia,"Times New Roman",serif;
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-micro:.75rem;
  --fs-small:.875rem;
  --fs-body:1rem;
  --fs-lede:1.0625rem;
  --fs-h3:1.375rem;
  --fs-h2:1.75rem;
  --fs-h1:clamp(2.25rem,1.6rem + 2.4vw,3.25rem);
  --fs-fig:clamp(2.5rem,2rem + 1.8vw,3.5rem);
  --track-caps:.12em;
  --track-micro:.06em;
  --track-num:-.03em;
  --track-display:-.015em;
  --lh-body:1.6;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.75rem; --s7:2.5rem; --s8:3.5rem; --s9:5rem;

  --r-panel:1.25rem;
  --r-field:.75rem;
  --r-soft:.5rem;
  --r-pill:999px;
  --wrap:1360px;
  --gutter:clamp(1rem,3vw,2.5rem);
  --measure:62ch;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur:.22s;

  /* the palette: the brand's own colours, shared by both worlds. The two
     theme blocks below map them onto roles; components read the roles. */
  --paper:#f7f5f2;
  --paper-2:#f1eee9;
  --white:#ffffff;
  --sand:#e2ded6;
  --ink:#16181b;
  --ink-2:#4e545c;
  --ink-3:#5f666d;
  --charcoal:#121212;
  --charcoal-2:#1b1b1b;
  --bone:#e2dfde;
  --bone-2:#bdb9b5;
  --bone-3:#ababab;
  --navy:#24567f;
  --blue:#2f6fa8;
  --sky:#85b2db;
  --pale:#b6d8f4;
  --mist:#eaf1f8;
}

/* ---------------- DAY: warm paper, white cells, navy type, one blue ---------------- */
html[data-theme="day"]{
  --band:var(--paper);
  --band-edge:var(--sand);
  --band-ink:var(--ink);
  --band-dim:var(--ink-3);
  --band-rule:var(--sand);
  --band-lift:var(--white);
  --band-blue:var(--blue);
  --band-hi:var(--ink);
  --band-hover:var(--mist);
  --band-on-bg:var(--blue);
  --band-on-fg:var(--white);

  --ground:var(--paper);
  --panel:var(--white);
  --panel-2:#faf8f5;
  --panel-edge:var(--sand);
  --hair:var(--sand);
  --hair-soft:#ece8e1;

  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--ink-3);

  --signal:var(--blue);
  --signal-deep:var(--navy);
  --blue-light:var(--sky);
  --wash:var(--mist);
  --key-ink:var(--navy);
  --key-glow:none;

  --panel-shadow:0 1px 2px rgba(36,86,127,.05),0 8px 20px -10px rgba(36,86,127,.12),0 28px 56px -28px rgba(36,86,127,.18);
  --panel-shadow-key:0 1px 2px rgba(36,86,127,.06),0 10px 24px -10px rgba(47,111,168,.22),0 30px 60px -26px rgba(47,111,168,.36);
  --panel-shadow-hi:0 1px 2px rgba(36,86,127,.06),0 12px 26px -10px rgba(47,111,168,.20),0 32px 64px -28px rgba(47,111,168,.28);
  --panel-hover-y:-2px;
  --sunk-bg:var(--paper-2);
  --sunk-shadow:inset 0 1px 3px rgba(36,86,127,.08),0 1px 0 rgba(255,255,255,.7);

  --fld-bg:var(--white);
  --fld-edge:#d9d4cb;
  --fld-hover-edge:var(--sky);
  --fld-ring:0 0 0 3px rgba(47,111,168,.35);
  --fld-placeholder:#6b7178;

  --btn-bg:linear-gradient(90deg,var(--navy) 0%,var(--blue) 100%);
  --btn-ink:var(--white);
  --btn-shadow:0 8px 18px -8px rgba(47,111,168,.6);
  --btn-hover-shadow:0 12px 26px -10px rgba(47,111,168,.7);
  --ghost-ink:var(--navy);
  --ghost-edge:#c9d9e8;
  --ghost-hover-bg:var(--mist);

  --ok:#1f6b45;
  --ok-bg:#e3f1e8;
  --ok-edge:#b9dcc6;
  --warn:#7d5509;
  --warn-bg:#f7ebd5;
  --warn-edge:#e3cfa4;
  --bad:#a03418;
  --bad-bg:#f7e2da;
  --bad-edge:#e5c0b1;
  --bad-on:var(--white);

  --menu-shadow:0 18px 40px -16px rgba(22,24,27,.28),0 2px 6px rgba(22,24,27,.06);
  --veil:rgba(22,24,27,.38);

  --pick-bg:var(--paper-2);
  --pick-ink:var(--ink-2);
  --pick-on-bg:var(--white);
  --pick-on-ink:var(--navy);
  --pick-on-shadow:0 1px 2px rgba(36,86,127,.10),0 4px 12px -4px rgba(36,86,127,.22);
  --pick-hover-bg:#e8e4dd;
  --photo-bg:#efece7;

  --body-bg:var(--paper);
  --body-layers:radial-gradient(48rem 26rem at 4% -8rem,rgba(255,255,255,.95),rgba(255,255,255,0) 72%);
  --field-a:radial-gradient(closest-side,rgba(133,178,219,.22),rgba(133,178,219,.07) 54%,rgba(133,178,219,0) 76%);
  --field-b:none;
  --glow-panel:radial-gradient(closest-side,rgba(133,178,219,.16),rgba(133,178,219,0) 74%);
  --field-blend:multiply;
  --grain-op:.17;
  --grain-blend:multiply;
}

/* ---------------- NIGHT: the console ---------------- */
html[data-theme="night"]{
  --band:var(--charcoal);
  --band-edge:transparent;
  --band-ink:var(--bone);
  --band-dim:#b9b7b5;
  --band-rule:#3a3a3a;
  --band-lift:#1e1e1e;
  --band-blue:var(--sky);
  --band-hi:var(--white);
  --band-hover:#2b2b2b;
  --band-on-bg:var(--sky);
  --band-on-fg:var(--charcoal);

  --ground:var(--charcoal);
  --panel:var(--charcoal-2);
  --panel-2:#202020;
  --panel-edge:rgba(226,223,222,.16);
  --hair:rgba(226,223,222,.16);
  --hair-soft:rgba(226,223,222,.11);

  --text:var(--bone);
  --text-2:var(--bone-2);
  --text-3:var(--bone-3);

  --signal:var(--sky);
  --signal-deep:#4a86bd;
  --blue-light:var(--sky);
  --wash:rgba(133,178,219,.10);
  --key-ink:var(--pale);
  --key-glow:0 0 32px rgba(182,216,244,.48);

  --panel-shadow:inset 0 1px 0 rgba(226,223,222,.06),0 32px 80px -48px rgba(0,0,0,.9),0 40px 90px -60px rgba(36,86,127,.55);
  --panel-shadow-key:inset 0 1px 0 rgba(226,223,222,.08),0 32px 80px -48px rgba(0,0,0,.9),0 40px 90px -56px rgba(36,86,127,.75);
  --panel-shadow-hi:inset 0 1px 0 rgba(226,223,222,.09),0 32px 80px -48px rgba(0,0,0,.95),0 40px 90px -60px rgba(36,86,127,.7);
  --panel-hover-y:0px;
  --sunk-bg:#0f0f0f;
  --sunk-shadow:inset 0 1px 3px rgba(0,0,0,.7);

  --fld-bg:#141414;
  --fld-edge:rgba(226,223,222,.24);
  --fld-hover-edge:rgba(133,178,219,.6);
  --fld-ring:0 0 0 3px rgba(133,178,219,.42);
  --fld-placeholder:#8c8a88;

  --btn-bg:linear-gradient(90deg,var(--sky) 0%,var(--sky) 100%);
  --btn-ink:var(--charcoal);
  --btn-shadow:0 8px 18px -6px rgba(133,178,219,.45);
  --btn-hover-shadow:0 0 28px rgba(133,178,219,.45);
  --ghost-ink:var(--pale);
  --ghost-edge:rgba(133,178,219,.4);
  --ghost-hover-bg:rgba(133,178,219,.12);

  --ok:#8fd3a8;
  --ok-bg:rgba(143,211,168,.10);
  --ok-edge:rgba(143,211,168,.38);
  --warn:#f0c274;
  --warn-bg:rgba(240,194,116,.12);
  --warn-edge:rgba(240,194,116,.42);
  --bad:#e9967b;
  --bad-bg:rgba(233,150,123,.14);
  --bad-edge:rgba(233,150,123,.45);
  --bad-on:var(--charcoal);

  --menu-shadow:0 24px 60px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(226,223,222,.06);
  --veil:rgba(0,0,0,.6);

  --pick-bg:#0f0f0f;
  --pick-ink:var(--bone-2);
  --pick-on-bg:#262626;
  --pick-on-ink:var(--pale);
  --pick-on-shadow:inset 0 1px 0 rgba(226,223,222,.08),0 0 0 1px rgba(133,178,219,.35);
  --pick-hover-bg:#1c1c1c;
  --photo-bg:var(--charcoal-2);

  --body-bg:var(--charcoal);
  --body-layers:none;
  --field-a:radial-gradient(closest-side,rgba(133,178,219,.60),rgba(133,178,219,0) 72%);
  --field-b:radial-gradient(closest-side,rgba(133,178,219,.46),rgba(133,178,219,0) 70%);
  --glow-panel:radial-gradient(closest-side,rgba(133,178,219,.55),rgba(133,178,219,0) 72%);
  --field-blend:screen;
  --grain-op:.11;
  --grain-blend:screen;
}

/* the grain texture is the same in both worlds */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --drift:drift 13s ease-in-out infinite alternate;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--body-bg)}
body{
  font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);
  background-color:var(--body-bg);background-image:var(--body-layers);background-repeat:no-repeat;background-size:100% 100vh;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100svh;position:relative;display:flex;flex-direction:column;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
b,strong{font-weight:600}
[hidden]{display:none !important}
::selection{background:rgba(133,178,219,.32)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums;letter-spacing:var(--track-num)}
.nb{white-space:nowrap}
.caps{
  font-family:var(--sans);font-weight:600;font-size:var(--fs-micro);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--text-3);line-height:1.4;
}
.display{font-family:var(--display);font-weight:400;letter-spacing:var(--track-display);line-height:1.08;color:var(--text);text-wrap:balance}
.lede{font-size:var(--fs-lede);color:var(--text-2);max-width:var(--measure);line-height:1.55;text-wrap:pretty}
.hint{font-size:var(--fs-micro);color:var(--text-3);line-height:1.5;text-wrap:pretty}
/* a kicker that carries an address keeps its case */
.caps.plain{text-transform:none;letter-spacing:.02em}
/* the message under a field that cannot be read */
.ferr{margin-top:.4rem;font-size:var(--fs-micro);font-weight:500;color:var(--bad)}

/* the theme cross-fade: on the click only, then removed */
html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .4s ease,background-image .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,fill .4s ease,opacity .4s ease !important;
}
html[data-theme="night"] .t-day,html[data-theme="day"] .t-night{display:none}

/* a tool page stays hidden until the login check has passed */
html.authing body>:not(.fields):not(.grain):not(.auth-note){visibility:hidden}
.auth-note{
  position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);padding:var(--s6);text-align:center;background:var(--body-bg);color:var(--text);
}
.auth-note p{max-width:28rem;font-size:var(--fs-body);font-weight:500}
.auth-note button{
  font-weight:600;color:var(--btn-ink);background:var(--btn-bg);border-radius:var(--r-pill);padding:.7rem 1.4rem;
  box-shadow:var(--btn-shadow);
}
.auth-note button:hover{box-shadow:var(--btn-hover-shadow);filter:brightness(1.05)}
.auth-note button:active{transform:translateY(1px)}

/* ==========================================================================
   ATMOSPHERE: two light fields and the grain
   ========================================================================== */
.fields{position:sticky;top:0;z-index:0;pointer-events:none;height:100svh;min-height:100vh;margin-bottom:-100vh;overflow:hidden}
.field{position:absolute;border-radius:999px;mix-blend-mode:var(--field-blend);filter:blur(88px)}
.field.a{top:-11rem;right:-7rem;width:min(46rem,92vw);height:32rem;background:var(--field-a);animation:var(--drift)}
.field.b{left:12%;top:52%;width:min(40rem,88vw);height:28rem;background:var(--field-b);animation:var(--drift);animation-duration:17s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-22px,14px,0)}}
.grain{
  position:absolute;inset:0;height:100%;z-index:15;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);background-image:var(--grain);background-size:160px 160px;
}
.glow{position:absolute;z-index:0;pointer-events:none;border-radius:999px;background:var(--glow-panel);mix-blend-mode:var(--field-blend);filter:blur(72px)}

/* ==========================================================================
   THE BAND
   ========================================================================== */
.band{background:var(--band);color:var(--band-ink);position:relative;z-index:30;box-shadow:0 1px 0 var(--band-edge)}
.band-in{
  width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:.85rem 0;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.9rem;min-width:0}
.brand{border-radius:.5rem;transition:opacity var(--dur) var(--ease)}
a.brand:hover{opacity:.82}
a.brand:active{opacity:.7}
.brand .crest{height:30px;width:auto}
.brand .div{width:1px;height:30px;background:var(--band-rule);flex:none}
.brand .who{display:block;min-width:0}
.brand .t{display:block;font-size:1rem;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.brand .s{display:block;font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--band-dim);line-height:1.5}
.band-tools{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

.seg{display:inline-flex;border:1px solid var(--band-rule);border-radius:var(--r-pill);padding:2px;background:var(--band-lift)}
.seg button{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--track-micro);padding:.3rem .66rem;border-radius:var(--r-pill);
  color:var(--band-dim);transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--band-on-bg);color:var(--band-on-fg)}
.seg button:hover:not([aria-pressed="true"]){color:var(--band-hi);background:var(--band-hover)}
.seg button:active{transform:translateY(1px)}

.bpill{
  display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-micro);font-weight:500;color:var(--band-dim);
  border:1px solid var(--band-rule);background:transparent;padding:.38rem .8rem;border-radius:var(--r-pill);white-space:nowrap;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.bpill:hover{color:var(--band-hi);border-color:var(--band-blue);background:var(--band-lift)}
.bpill:active{transform:translateY(1px)}
.bpill svg{width:14px;height:14px;flex:none}
.bpill.on{color:var(--band-on-fg);background:var(--band-on-bg);border-color:var(--band-on-bg)}

/* the account button and its menu */
.acct{position:relative}
.acct-btn .av{
  width:1.35rem;height:1.35rem;border-radius:var(--r-pill);display:inline-grid;place-items:center;
  font-size:.6875rem;font-weight:600;color:var(--band-on-fg);background:var(--band-on-bg);margin-left:-.35rem;
}
.acct-btn .chev{transition:transform var(--dur) var(--ease)}
.acct-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acct-menu{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:15rem;z-index:40;
  background:var(--band-lift);color:var(--band-ink);border:1px solid var(--band-rule);border-radius:1rem;
  box-shadow:var(--menu-shadow);padding:.4rem;
}
.acct-menu .mh{padding:.6rem .75rem .65rem;border-bottom:1px solid var(--band-rule);margin-bottom:.3rem}
.acct-menu .mh b{display:block;font-size:var(--fs-small);font-weight:600}
.acct-menu .mh span{display:block;font-size:var(--fs-micro);color:var(--band-dim);overflow-wrap:anywhere}
.acct-menu a,.acct-menu button{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;font-size:var(--fs-small);font-weight:500;
  padding:.55rem .75rem;border-radius:.6rem;color:var(--band-ink);transition:background-color var(--dur) var(--ease);
}
.acct-menu a:hover,.acct-menu button:hover{background:var(--band-hover)}
.acct-menu a:active,.acct-menu button:active{transform:translateY(1px)}
.acct-menu svg{width:16px;height:16px;flex:none;color:var(--band-dim)}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
.panel{
  background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--r-panel);box-shadow:var(--panel-shadow);
  padding:var(--s6);position:relative;
}
.panel.sunk{background:var(--sunk-bg);border-color:transparent;box-shadow:var(--sunk-shadow)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.875rem;
  font-size:var(--fs-body);font-weight:600;color:var(--btn-ink);background:var(--btn-bg);border-radius:var(--r-pill);
  padding:.7rem 1.4rem;box-shadow:var(--btn-shadow);white-space:nowrap;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.btn:hover{box-shadow:var(--btn-hover-shadow);filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress;filter:none}
.btn.ghost{color:var(--ghost-ink);background:transparent;border:1px solid var(--ghost-edge);box-shadow:none}
.btn.ghost:hover{background:var(--ghost-hover-bg)}
.btn.bad{color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad-edge);box-shadow:none}
.btn.bad:hover{background:var(--bad);color:var(--bad-on);border-color:var(--bad);filter:none}
.btn.small{min-height:2.25rem;font-size:var(--fs-small);padding:.45rem .95rem}
.btn svg{width:18px;height:18px;flex:none}

.fl{display:block;font-size:var(--fs-small);font-weight:600;color:var(--text-2);margin-bottom:.4rem}
.fld{
  display:block;width:100%;min-height:2.875rem;font-size:var(--fs-body);color:var(--text);background:var(--fld-bg);
  border:1px solid var(--fld-edge);border-radius:var(--r-field);padding:.65rem .9rem;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.fld::placeholder{color:var(--fld-placeholder)}
.fld:hover{border-color:var(--fld-hover-edge)}
.fld:focus{outline:none;border-color:var(--signal);box-shadow:var(--fld-ring)}
.fld:focus-visible{outline:none}
select.fld{
  appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 52%,calc(100% - .8rem) 52%;background-size:.35rem .35rem;background-repeat:no-repeat;
}
.fgroup+.fgroup{margin-top:var(--s4)}

/* fieldsets, the segmented pick (zones, yes/no, roles) and a field with its unit */
fieldset{border:0;min-width:0}
legend.fl{padding:0}
.fl-note{font-weight:400;color:var(--text-3)}
.fgroup .hint{margin-top:.4rem}

.pick{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;padding:.3rem;
  background:var(--pick-bg);border-radius:.9rem;
}
.pick.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pick button{
  min-height:2.5rem;border-radius:.65rem;font-size:var(--fs-small);font-weight:600;color:var(--pick-ink);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pick button:hover:not([aria-checked="true"]){background:var(--pick-hover-bg);color:var(--text)}
.pick button:active{transform:translateY(1px)}
.pick button[aria-checked="true"]{background:var(--pick-on-bg);color:var(--pick-on-ink);box-shadow:var(--pick-on-shadow)}

.unit{position:relative;display:block}
.unit .fld{padding-right:3.4rem}
.unit>span{
  position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  font-size:var(--fs-small);color:var(--text-3);pointer-events:none;
}
.fld.bad{border-color:var(--bad);box-shadow:none}

.pw{position:relative}
.pw .fld{padding-right:4.4rem}
.pw-eye{
  position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-size:var(--fs-micro);font-weight:600;
  color:var(--ghost-ink);padding:.4rem .6rem;border-radius:.5rem;
}
.pw-eye:hover{background:var(--ghost-hover-bg)}
.pw-eye:active{transform:translateY(calc(-50% + 1px))}

.err{
  font-size:var(--fs-small);color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad-edge);
  border-radius:.75rem;padding:.6rem .8rem;line-height:1.45;
}
.notice{
  font-size:var(--fs-small);color:var(--text);background:var(--wash);border:1px solid var(--ghost-edge);
  border-radius:1rem;padding:.8rem 1rem;line-height:1.5;
}
.notice.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-edge)}

.chip{
  display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--track-micro);
  padding:.22rem .6rem;border-radius:var(--r-pill);border:1px solid var(--ghost-edge);color:var(--ghost-ink);background:var(--wash);
  white-space:nowrap;
}
.chip.quiet{color:var(--text-3);border-color:var(--hair);background:transparent}

/* the dialog: password change, confirmations */
dialog.dlg{
  margin:auto;width:min(28rem,100% - 2rem);border:1px solid var(--panel-edge);border-radius:var(--r-panel);
  background:var(--panel);color:var(--text);box-shadow:var(--panel-shadow-key);padding:var(--s6);
}
dialog.dlg::backdrop{background:var(--veil);backdrop-filter:blur(2px)}
dialog.dlg h2{font-family:var(--display);font-weight:400;font-size:var(--fs-h2);letter-spacing:var(--track-display);line-height:1.15;margin-bottom:.4rem}
dialog.dlg .lede{font-size:var(--fs-small);margin-bottom:var(--s5)}
.dlg-row{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
dialog.dlg .err{margin-top:var(--s4)}

.toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(1rem);opacity:0;z-index:60;
  background:var(--band-lift);color:var(--band-ink);border:1px solid var(--band-rule);border-radius:var(--r-pill);
  box-shadow:var(--menu-shadow);padding:.65rem 1.1rem;font-size:var(--fs-small);font-weight:500;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   PAGE FRAME AND FOOTER
   ========================================================================== */
.page{
  position:relative;z-index:1;flex:1;width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;
  padding:var(--s7) 0 var(--s8);
}
.pfoot{
  position:relative;z-index:1;width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s5) 0 var(--s6);border-top:1px solid var(--hair);font-size:var(--fs-micro);color:var(--text-3);
}
.pfoot .credit{display:flex;align-items:center;gap:.5rem}
.pfoot .wm{height:13px;width:auto;opacity:.9}

/* ==========================================================================
   THE START PAGE: login and the tool picker
   ========================================================================== */
.login{display:grid;place-items:center;min-height:calc(100svh - 12rem);padding:var(--s5) 0}
.login-card{width:min(27rem,100%);padding:var(--s7) var(--s6) var(--s6);box-shadow:var(--panel-shadow-key);overflow:hidden}
.login-card>:not(.glow){position:relative;z-index:1}
.login-card .glow{top:-3rem;left:-5rem;width:22rem;height:14rem;animation:var(--drift)}
.login-card .crest{height:34px;width:auto;margin-bottom:var(--s6)}
.login-card h1,.login-card h2{font-size:clamp(2rem,1.6rem + 1.4vw,2.625rem);margin:.15rem 0 .45rem}
.login-card .lede{font-size:var(--fs-body);margin-bottom:var(--s6)}
.login-card form .btn{width:100%;margin-top:var(--s5)}
.login-card .err{margin-top:var(--s4)}
.login-card .stay{margin-top:var(--s3);text-align:center}
.login-card .forgot{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hair-soft);font-size:var(--fs-small);color:var(--text-2);text-align:center;text-wrap:pretty}

.home-head{margin-bottom:var(--s7);max-width:48rem}
.home-head h1,.home-head h2{font-size:var(--fs-h1);margin:.35rem 0 .6rem}
.home .notice{margin-bottom:var(--s6);max-width:48rem}
.home-loading{min-height:40vh;display:grid;place-items:center;color:var(--text-3);font-size:var(--fs-small)}

.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:var(--s5)}
.tool{
  display:flex;flex-direction:column;gap:.6rem;min-height:15.5rem;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.tool>:not(.glow){position:relative;z-index:1}
.tool .glow{top:-4rem;right:-5rem;width:18rem;height:12rem;opacity:0;transition:opacity .45s var(--ease)}
a.tool:hover{transform:translateY(var(--panel-hover-y));box-shadow:var(--panel-shadow-hi);border-color:var(--ghost-edge)}
a.tool:hover .glow{opacity:1}
a.tool:active{transform:scale(.99);transition-duration:.05s}
.tool-ico{
  width:3rem;height:3rem;border-radius:.95rem;display:grid;place-items:center;color:var(--signal);background:var(--wash);
  border:1px solid var(--ghost-edge);margin-bottom:.5rem;
}
.tool-ico svg{width:24px;height:24px}
.tool-t{font-family:var(--display);font-size:1.75rem;line-height:1.1;letter-spacing:var(--track-display);color:var(--text)}
.tool-x{font-size:.9375rem;color:var(--text-2);line-height:1.55;max-width:34ch}
.tool-go{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-small);font-weight:600;color:var(--signal);padding-top:.6rem}
.tool-go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
a.tool:hover .tool-go svg{transform:translateX(4px)}
/* a role with one tool: that tool leads as a wide card, and what is coming
   for the role sits beside it, quieter (or the lead card alone) */
.tools.lead{grid-template-columns:minmax(0,2fr) minmax(0,1fr);max-width:64rem;align-items:stretch}
.tools.single{grid-template-columns:minmax(0,40rem)}
.tools.lead a.tool{min-height:0;padding:var(--s7) var(--s6)}
.tools.lead a.tool .tool-t{font-size:2.25rem}
.tools.lead a.tool .tool-x{max-width:46ch;font-size:1.0625rem}
.tools.lead a.tool .tool-go{align-self:flex-start;margin-top:var(--s4);padding:.7rem 1.4rem;border-radius:var(--r-pill);color:var(--btn-ink);background:var(--btn-bg);box-shadow:var(--btn-shadow);font-size:var(--fs-body)}
.tools.lead .tool.later{min-height:0;padding:var(--s7) var(--s6)}
@media (max-width:900px){.tools.lead{grid-template-columns:minmax(0,1fr)}}
.tool.later{background:transparent;border-style:dashed;box-shadow:none}
.tool.later .tool-ico{color:var(--text-3);background:transparent;border-color:var(--hair)}
.tool.later .tool-t{color:var(--text-2)}
.tool.later .tool-go{color:var(--text-3)}

/* ==========================================================================
   RESPONSIVE AND MOTION
   ========================================================================== */
@media (max-width:760px){
  .band-in{padding:.7rem 0}
  .brand .crest{height:26px}
  .brand .div{height:26px}
  .page{padding:var(--s6) 0 var(--s7)}
  .login{min-height:auto;padding:var(--s4) 0}
  .login-card{padding:var(--s6) var(--s5) var(--s5)}
  .home-head{margin-bottom:var(--s6)}
  .tool{min-height:0}
}
@media (max-width:640px){
  .btn.small,.bpill,.pick button{min-height:2.75rem}
  .seg button{min-height:2.75rem;padding-inline:.8rem}
  .brand{min-height:2.75rem}
  .pw-eye{min-width:2.75rem;min-height:2.75rem}
  .band-tools{gap:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .field,.glow{animation:none !important}
  *,*::before,*::after{transition-duration:.01ms !important;scroll-behavior:auto !important}
}