/* ---------------------------------------------------------------------------
   The A2Y Portal stylesheet: the sign-in screen and the application chooser.

   Moved here from the Financial Dashboard's stylesheet when the Portal became
   a program of its own. The sign-in screen is reproduced exactly as it was
   approved; it carries its own tokens so nothing else can reach into it.
   --------------------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — taken from the approved design.
   ═══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* The design's own palette, sampled from it rather than approximated. */
  --navy:#001e3f; --navy-deep:#001a36; --navy-active:#113c69;
  --ink:#00164c; --muted:#456493;
  --blue:#0879fa; --blue-strong:#1260be; --pale-blue:#eaf4ff;
  --gold:#f9bc29; --gold-light:#ffcf62; --gold-deep:#b57f07;
  --good:#00a754; --bad:#e53942;
  --surface:#fff; --bg:#f2f8ff; --line:#e3eefb;
  --shadow:0 3px 18px rgba(18,72,133,.045);
  --shadow-md:0 9px 25px rgba(22,60,114,.09);
  --shadow-lg:0 25px 80px rgba(0,27,59,.27);
  --radius:11px; --radius-sm:7px; --radius-lg:16px;
  --sidebar:232px;

  /* Report table tints. Four steps up from the page, light enough to stay
     modern and far enough apart to be scanned: the column heads, a section
     band, a subtotal, and the two figures that matter most. Every one keeps
     navy text — the darkest, --tint-strong, is 8.6:1 against --ink. */
  --tint-head:#e7f1fd;      /* column header row */
  --tint-head-line:#c8dcf3; /* and the rule under it */
  --tint-section:#dfeafa;   /* Revenue, Cost of Goods Sold, Operating Expenses */
  --tint-total:#eef5fd;     /* Total Income, Total Expense */
  --tint-strong:#cfe1f8;    /* Gross Profit, Net Income */
  --tint-gold:#f6c84a;      /* the gold edge that marks those two */

  /* Names the application already used, pointed at the new palette so no
     rule had to be hunted down and renamed. */
  --tx:var(--ink); --tx2:#193974; --tx3:var(--muted); --tx4:#6280a4;
  --s2:#f7fbff; --s3:var(--pale-blue);
  --br:var(--line); --br2:#d7e5fb;
  --green:var(--good); --gbg:#e0f8ed; --gbdr:#b6ecd2;
  --red:var(--bad); --rbg:#fff2f3; --rbdr:#ffd4d9;
  --orange:#b0710a; --obg:#fff8e9;
  --b50:#eef6ff; --b100:#c8dffc; --b200:#a6cbf7;
  --b500:var(--blue); --b600:var(--blue-strong); --b700:#0f4f9c; --b800:var(--navy);
  --g300:var(--gold-light); --g400:var(--gold); --g500:#e0a90f; --g600:var(--gold-deep);

  /* Typefaces. The statement keeps its serif; everything else is the
     design's IBM Plex Sans. */
  --sans:'IBM Plex Sans','DM Sans',system-ui,Arial,sans-serif;
  --mono:'IBM Plex Sans','DM Mono',ui-monospace,monospace;
  /* Print only. On screen the statement is set in the same sans as the
     rest of the dashboard, which is what the approved design does. */
  --acct:'Libre Baskerville',Georgia,serif;
  --num:'Libre Baskerville',Georgia,serif;
}

html{scroll-behavior:smooth}
html,body{font-family:var(--sans);background:var(--bg);color:var(--ink);min-height:100vh;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,select{cursor:pointer}
button{border:0;color:inherit;font-family:var(--sans);transition:background .16s,box-shadow .16s,transform .16s}
button:disabled{cursor:not-allowed;opacity:.48}
button:active:not(:disabled){transform:translateY(1px)}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4,p{margin:0}
[hidden]{display:none!important}

/* One focus ring for the whole application, gold so it reads on navy and on
   white alike. */
:focus-visible{outline:3px solid #d59a06;outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.ic{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
.ic-sm{width:15px;height:15px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─────────── LOGIN ───────────────────────────────────────────────────────
   A two-column sign-in: the A2Y brand on the left, the card on the right,
   over a bright room drawn entirely in CSS and one inline SVG. No photo, so
   nothing has to be admitted by the content policy, nothing extra downloads
   on a phone, and the type stays crisp at any density.

   The branding is A2Y and only A2Y. One account is meant to reach more than
   one application later, so this screen must not read as the door to any
   single one of them.
─────────────────────────────────────────────────────────────────────────── */
#login-screen{
  /* Sampled from front.png rather than guessed. The ground is a very light,
     almost flat blue-white; the gold is brighter than the dashboard's, and
     the secondary text is a good deal darker than a mid grey.

     Where that gold would be read as text it is darkened just far enough to
     pass and no further, so the mark still reads as the same gold. */
  --lg-navy:#071934;          /* headline, wordmark A, benefit titles */
  --lg-muted:#3a5578;         /* subtitle, benefit copy, sign-off line */
  --lg-gold:#dfa00b;          /* the brand gold, on graphic surfaces */
  --lg-gold-lg:#b57f07;       /* the same gold as large text  (3.5:1) */
  --lg-gold-sm:#9c6c06;       /* and as small text            (4.6:1) */
  --lg-field:#f4f9fe;         /* input fill */
  --lg-field-edge:#e4ecf7;    /* input edge, barely there in the design */

  position:fixed; inset:0; z-index:999; overflow:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:40px; padding:40px clamp(24px,5vw,88px);
  background:linear-gradient(160deg,#f8fbfd 0%,#f4f8fc 42%,#eef4fa 100%);
  color:var(--lg-navy);
}

/* ── The room ───────────────────────────────────────────────────────────── */
.lg-scene{position:absolute; inset:0; overflow:hidden; pointer-events:none}

/* Light falling through a window, and its reflection on the floor. */
.lg-shaft{
  position:absolute; top:-25%; height:150%;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.34));
  transform:skewX(-13deg); filter:blur(2px);
}
.lg-shaft-1{left:40%; width:7%; opacity:.95}
.lg-shaft-2{left:52%; width:13%; opacity:.8}
.lg-shaft-3{left:70%; width:5%; opacity:.7}
.lg-shaft-4{left:80%; width:11%; opacity:.55}
/* A wash of daylight from the window side. */
.lg-glow{
  position:absolute; top:-28%; right:-14%; width:74%; height:132%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));
}
/* The plant in the corner, kept faint so it never competes with the card. */
.lg-plant{
  position:absolute; right:-2%; bottom:-6%; width:min(21vw,290px); height:auto;
  color:#6f9c7e; opacity:.38;
}
.lg-plant .lg-leaves{opacity:.75}
.lg-plant .lg-leaf-blades{opacity:.9}
.lg-plant .lg-pot{fill:#d7dfec; opacity:.7}
/* Below the two-column breakpoint the plant would sit behind the card, so it
   steps aside rather than tinting the form. */
@media (max-width:1023px){ .lg-plant{width:min(34vw,220px); right:-4%; opacity:.34} }

/* ── LEFT: the brand ────────────────────────────────────────────────────── */
.lg-brand{position:relative; display:flex; justify-content:flex-end; min-width:0}
.lg-brand-inner{position:relative; width:100%; max-width:480px}

/* The oversized mark behind the sign-off, as in the design. */
.lg-watermark{
  position:absolute; left:-.06em; bottom:-2.2rem; z-index:0;
  font-family:var(--sans); font-weight:800; font-size:clamp(90px,11vw,168px);
  letter-spacing:-.04em; line-height:.8; color:rgba(7,25,52,.055);
  user-select:none; white-space:nowrap;
}
.lg-brand-inner > *{position:relative; z-index:1}

.lg-wordmark{
  font-family:var(--sans); font-weight:800; letter-spacing:-.045em;
  font-size:clamp(64px,7.6vw,124px); line-height:.92; margin:0;
}
.lg-wm-a{color:var(--lg-navy)}
.lg-wm-2y{color:var(--lg-gold)}
.lg-rule{
  display:block; width:104px; height:5px; border-radius:3px;
  background:var(--lg-gold); margin:18px 0 26px;
}

.lg-headline{
  font-family:var(--sans); font-weight:800; color:var(--lg-navy);
  font-size:clamp(30px,3.5vw,50px); line-height:1.1; letter-spacing:-.025em;
  margin:0 0 18px; text-wrap:balance;
}
.lg-sub{
  font-family:var(--sans); font-weight:400; color:var(--lg-muted);
  font-size:clamp(17px,1.6vw,25px); line-height:1.4; margin:0 0 34px;
}

.lg-benefits{list-style:none; margin:0 0 44px; padding:0; display:flex; flex-direction:column; gap:26px}
.lg-benefits li{display:flex; align-items:flex-start; gap:20px}
.lg-bicon{width:33px; height:33px; flex-shrink:0; color:var(--lg-navy); margin-top:1px}
.lg-benefits strong{
  display:block; font-size:1.16rem; font-weight:700; color:var(--lg-navy); line-height:1.3;
  margin-bottom:2px;
}
.lg-benefits span{display:block; font-size:1.08rem; color:var(--lg-muted); line-height:1.45}

.lg-signoff{display:flex; flex-direction:column; gap:3px}
.lg-signoff-name{font-size:1.4rem; font-weight:800; color:var(--lg-gold-lg); letter-spacing:-.01em}
.lg-signoff-line{font-size:1.08rem; color:var(--lg-muted)}

/* ── RIGHT: the card ────────────────────────────────────────────────────── */
.lg-panel{position:relative; display:flex; justify-content:flex-start; min-width:0}
.login-card{
  background:#fff; width:100%; max-width:512px; position:relative;
  border-radius:22px; padding:44px clamp(26px,3vw,46px) 30px;
  box-shadow:0 34px 70px -22px rgba(13,33,69,.28), 0 4px 16px rgba(13,33,69,.06);
  animation:slideUp .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes slideUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)}}

.lg-welcome{
  font-family:var(--sans); font-size:clamp(28px,2.5vw,36px); font-weight:800;
  color:var(--lg-navy); text-align:center; letter-spacing:-.025em; margin:0 0 8px;
}
.lg-welcome-sub{
  font-size:1.06rem; color:var(--lg-muted); text-align:center; margin:0 0 30px;
}

.lc-body{padding:0}
/* The design shows placeholders rather than labels, but a field a screen
   reader cannot name is a field nobody can name. The labels are here and
   readable; they are simply visually compact. */
.lc-body label{
  display:block; font-size:.8rem; font-weight:700; color:var(--lg-muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
  font-family:var(--sans);
}
.lc-field{margin-bottom:18px}
.lc-field:last-of-type{margin-bottom:24px}

.lc-input-wrap{position:relative; display:block}
.lc-field-icon{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:21px; height:21px; color:var(--lg-navy); opacity:.78; pointer-events:none;
}
.lc-input{
  width:100%; padding:17px 18px 17px 52px; border:1.5px solid var(--lg-field-edge);
  border-radius:12px; background:var(--lg-field); color:var(--lg-navy);
  font-family:var(--sans); font-size:1.02rem; letter-spacing:0; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.lc-input.has-toggle{padding-right:56px}
.lc-input::placeholder{color:#6b7480}
.lc-input:hover{background:#eaf2fb}
.lc-input:focus{background:#fff; border-color:var(--lg-gold); box-shadow:0 0 0 3px rgba(223,160,11,.2)}

.eye-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--lg-muted); padding:0;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:9px; transition:color .15s, background .15s;
}
.eye-btn .ic{width:21px; height:21px}
.eye-btn:hover{color:var(--lg-navy); background:rgba(7,25,52,.05)}
.eye-btn[aria-pressed="true"]{color:var(--lg-gold-sm)}

.btn-enter{
  width:100%; padding:18px; border:none; border-radius:12px;
  background:linear-gradient(90deg,#db9a08 0%,#fcc539 100%);
  color:#0a1020; font-family:var(--sans); font-size:1rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 12px 24px -10px rgba(219,154,8,.6);
  transition:filter .15s, transform .1s, box-shadow .15s;
}
.btn-enter:hover:not(:disabled){filter:brightness(1.05); box-shadow:0 16px 28px -10px rgba(219,154,8,.68)}
.btn-enter:active:not(:disabled){transform:translateY(1px)}

.login-err{
  display:none; margin-top:16px; padding:12px 14px; background:var(--rbg);
  border:1px solid #f2b8b8; border-left:3px solid #b91c1c; border-radius:10px;
  font-size:.9rem; color:#991b1b; align-items:center; gap:9px;
  font-family:var(--sans); line-height:1.45;
}
.login-err.show{display:flex; animation:shake .25s ease}
@keyframes shake{0%,100%{transform:translateX(0)} 33%{transform:translateX(-6px)} 66%{transform:translateX(6px)}}
.login-err .ic{width:16px; height:16px; flex-shrink:0}

.lc-help{
  margin:18px 0 0; font-size:.94rem; color:var(--lg-muted);
  font-family:var(--sans); text-align:center; line-height:1.5;
}

.lc-footer{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:28px; padding-top:20px; border-top:1px solid #e8eef7;
}
.lc-footer span{font-size:.92rem; color:#4a6f9c; font-family:var(--sans); letter-spacing:0}
.lc-footer-right{text-align:right}
.lc-footer .gold{color:var(--lg-gold-sm); font-weight:700}


/* The sign-in screen keeps the typeface it was approved with; the dashboard's
   IBM Plex Sans stops at its edge. */
#login-screen{--sans:'DM Sans','IBM Plex Sans',system-ui,sans-serif}

/* Sign-in on a phone: one column, a compact brand line and the card under
   it. The full brand panel stacked above the card pushed the email field to
   the bottom of a phone screen and Sign In below it, so a person had to
   scroll before they could do the one thing this screen is for. On a phone
   the brand keeps its wordmark and headline; the strapline, the benefits and
   the sign-off are the desktop's left-hand column and stay there. */
@media (max-width: 768px){
  #login-screen{
    grid-template-columns:1fr; align-items:start; gap:18px;
    padding:calc(20px + env(safe-area-inset-top,0px)) 18px calc(36px + env(safe-area-inset-bottom,0px));
  }
  .lg-brand, .lg-panel { justify-content:center }
  .lg-brand-inner, .login-card { max-width:520px; margin:0 auto }
  .login-card { padding:26px 22px 22px; border-radius:18px }
  .lc-input { font-size:16px; }   /* 16px or iOS zooms on focus */

  .lg-brand-inner { display:flex; flex-wrap:wrap; align-items:center; column-gap:16px }
  .lg-wordmark { font-size:clamp(40px,12vw,56px) }
  .lg-rule { display:none }
  .lg-headline { font-size:clamp(17px,4.8vw,22px); margin:0; flex:1 1 140px }
  .lg-sub, .lg-benefits, .lg-signoff, .lg-watermark { display:none }

  .lg-welcome { font-size:clamp(24px,6.6vw,28px); margin-bottom:4px }
  .lg-welcome-sub { margin-bottom:20px }
  .lc-field { margin-bottom:14px }
  .lc-field:last-of-type { margin-bottom:18px }
  .lc-input { padding-top:14px; padding-bottom:14px }
  .btn-enter { padding:16px }
}

/* A2Y Portal application chooser. It intentionally reuses the Financial
   Dashboard card, border, and navy/gold palette. */
.portal-launcher{min-height:100vh;background:var(--mist,#eef5fc);display:grid;place-items:center;padding:32px}
.portal-launcher-card{width:min(760px,100%);background:#fff;border:1px solid #d8e6f5;border-radius:18px;padding:42px;box-shadow:0 18px 50px rgba(10,39,74,.12)}
.portal-eyebrow{color:#c9971a;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.portal-launcher-card h1{color:#071f4f;font-size:34px;margin:10px 0 8px}.portal-launcher-card p{color:#506b8d;margin:0 0 26px}
.portal-app-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}.portal-app-card{border:1px solid #cfe0f4;border-radius:12px;background:#fff;padding:22px;text-align:left;cursor:pointer;color:#071f4f;transition:.15s box-shadow,.15s transform}.portal-app-card:hover,.portal-app-card:focus-visible{box-shadow:0 8px 24px rgba(10,39,74,.14);transform:translateY(-2px)}.portal-app-card strong{display:block;font-size:18px;margin-bottom:7px}.portal-app-card span{font-size:13px;color:#617d9e}@media(max-width:600px){.portal-launcher{padding:18px}.portal-launcher-card{padding:26px 20px}.portal-app-cards{grid-template-columns:1fr}}
.portal-launcher{min-height:100dvh;background:linear-gradient(135deg,#eef6ff 0%,#f8fbff 48%,#eaf3fc 100%);display:flex;align-items:center;justify-content:center;padding:clamp(24px,6vw,80px);position:relative;overflow:hidden}.portal-launcher:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-220px;background:rgba(255,194,31,.12)}.portal-launcher-card{position:relative;width:min(1080px,100%);padding:clamp(28px,5vw,64px);background:rgba(255,255,255,.94);border:1px solid #d4e3f3;border-radius:24px;box-shadow:0 22px 65px rgba(6,35,70,.14)}.portal-launcher-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}.portal-launcher-brand{font-size:18px;font-weight:800;letter-spacing:.15em;color:#092b59;text-transform:uppercase}.portal-launcher-brand span{color:#f5b91a}.portal-launcher-card h1{color:#071f4f;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;margin:8px 0}.portal-launcher-card>p{font-size:17px;color:#5d7592;margin:0;max-width:590px}.portal-app-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}.portal-app-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;border:1px solid #d6e4f2;border-radius:16px;background:#fff;padding:26px;min-height:300px;text-align:left;box-shadow:0 8px 22px rgba(8,43,82,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.portal-app-card:hover,.portal-app-card:focus-within{transform:translateY(-4px);box-shadow:0 16px 30px rgba(8,43,82,.14);border-color:#94bce6}.portal-card-top{display:flex;width:100%;justify-content:space-between;align-items:center}.portal-card-number{font:500 13px 'DM Mono',monospace;color:#7992af}.portal-card-status{border-radius:999px;background:#edf8f1;color:#147341;padding:5px 10px;font-size:12px;font-weight:700}.portal-card-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;margin:24px 0 18px;background:#edf5ff;color:#1766c2}.portal-app-efficiency .portal-card-icon{background:#fff7df;color:#ad7710}.portal-app-users .portal-card-icon{background:#eef0fb;color:#4a4fa8}.portal-card-icon .ic{width:28px;height:28px}.portal-app-card h2{color:#08275a;font-size:23px;margin:0 0 10px}.portal-app-card p{color:#597391;line-height:1.55;margin:0 0 24px;max-width:400px}.portal-card-open{margin-top:auto;min-height:46px;border:0;border-radius:8px;padding:0 16px;background:#082b59;color:#fff;font:600 14px inherit;cursor:pointer}.portal-card-open:hover,.portal-card-open:focus-visible{background:#0d427f}.portal-app-users .portal-card-open{background:#4a4fa8}.portal-app-users .portal-card-open:hover,.portal-app-users .portal-card-open:focus-visible{background:#3a3f8f}.portal-app-efficiency .portal-card-open{background:#d29a18}.portal-app-efficiency .portal-card-open:hover,.portal-app-efficiency .portal-card-open:focus-visible{background:#b37c0c}.portal-card-open span{font-size:19px;margin-left:8px}@media(max-width:700px){.portal-launcher{padding:18px}.portal-launcher-card{padding:26px 20px;border-radius:18px}.portal-launcher-head{display:block;margin-bottom:26px}.portal-app-cards{grid-template-columns:1fr}.portal-app-card{min-height:0}.portal-card-open{width:100%}}
.portal-launcher-note{color:#617b99;font-size:13px;font-weight:600;letter-spacing:.02em;padding:12px 0 4px;white-space:nowrap}
@media(max-width:700px){.portal-launcher-note{padding-top:14px;white-space:normal}}
.portal-launcher-head p{font-size:17px;color:#5d7592;margin:0;max-width:590px;line-height:1.5}
/* Who is signed in, and the way out, at the top right of the chooser. A
   shared office machine needs the second as much as the applications. */
.portal-launcher-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.portal-launcher-who{color:#617b99;font-size:13px;overflow-wrap:anywhere;text-align:right}
.portal-launcher-who:empty{display:none}
.portal-signout{min-height:40px;padding:0 16px;border:1px solid #c5d8ee;border-radius:8px;background:#fff;color:#082b59;font:600 14px inherit;cursor:pointer}
.portal-signout:hover,.portal-signout:focus-visible{background:#edf5ff;border-color:#94bce6}
.portal-signout[aria-busy="true"]{opacity:.6;cursor:progress}
@media(max-width:700px){.portal-launcher-side{align-items:flex-start;margin-top:16px}.portal-launcher-who{text-align:left}}

/* Installed on a phone there is no browser chrome, so the page itself has to
   stay clear of the notch and the home indicator. */
@media (display-mode: standalone){
  #login-screen{padding-top:calc(24px + env(safe-area-inset-top,0px))}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.portal-app-chat .portal-card-icon{background:#e8f6f3;color:#0f7a68}.portal-app-chat .portal-card-open{background:#0f7a68}.portal-app-chat .portal-card-open:hover,.portal-app-chat .portal-card-open:focus-visible{background:#0b5f51}
.portal-app-chat .portal-card-open{font-size:13px;padding:0 12px}
/* The app dock under the cards: the same dark dock as the side menu, in a panel so it reads on the light page. */
.portal-launcher-dock:not([hidden]){width:max-content;max-width:100%;min-width:min(340px,100%);margin-top:22px;background:#1f2a3a;border-radius:12px;padding:12px 14px 14px}
.portal-launcher-dock .a2y-dock{border-top:0;padding-top:0}
.portal-launcher-dock.a2y-dock{border-top:0}
.portal-launcher-dock .a2y-dock-row{min-width:300px}
@media(max-width:700px){.portal-launcher-dock:not([hidden]){width:auto}.portal-launcher-dock .a2y-dock-row{min-width:0}}

/* ─── Precise apps: the two Precise cards look like the apps themselves (charcoal #1f242a, white, gold #d6a23c) ───
   for everybody, A2Y staff included. Efficiency is the charcoal button (its sidebar); Chat is the gold button (its
   sign-in button), so the two stay easy to tell apart. */
.portal-app-efficiency,.portal-app-chat{border-color:#d9dde1;box-shadow:0 8px 22px rgba(20,24,29,.07);background:linear-gradient(#1f242a,#1f242a) top/100% 4px no-repeat #fff}
.portal-app-efficiency:hover,.portal-app-efficiency:focus-within,.portal-app-chat:hover,.portal-app-chat:focus-within{border-color:#1f242a;box-shadow:0 16px 30px rgba(20,24,29,.16)}
.portal-app-efficiency .portal-card-icon,.portal-app-chat .portal-card-icon{background:#1f242a;color:#d6a23c}
.portal-app-efficiency h2,.portal-app-chat h2{color:#14181d}
.portal-app-efficiency p,.portal-app-chat p{color:#46515c}
.portal-app-efficiency .portal-card-number,.portal-app-chat .portal-card-number{color:#68737e}
.portal-app-efficiency .portal-card-open{background:#1f242a;color:#fff}
.portal-app-efficiency .portal-card-open:hover,.portal-app-efficiency .portal-card-open:focus-visible{background:#363e46}
.portal-app-chat .portal-card-open{background:#d6a23c;color:#1f242a;font-weight:700}
.portal-app-chat .portal-card-open:hover,.portal-app-chat .portal-card-open:focus-visible{background:#c4912e}
.portal-app-efficiency .portal-card-open:focus-visible,.portal-app-chat .portal-card-open:focus-visible{outline:2px solid #8a6420;outline-offset:2px}

/* ─── Per-client theme: Precise (class set on <html> by portal.js from the server's user.theme) ─── */
.portal-brand-logo{display:block;height:clamp(54px,8vw,84px);width:auto;max-width:100%}
.theme-precise .portal-launcher-brand{letter-spacing:0;text-transform:none;margin-bottom:6px}
.theme-precise .portal-launcher{background:#f4f5f6}
.theme-precise .portal-launcher:before{background:rgba(31,36,42,.07)}
.theme-precise .portal-launcher-card{background:#fff;border:1px solid #e2e5e8;border-top:6px solid #1f242a;box-shadow:0 22px 65px rgba(20,24,29,.12)}
.theme-precise .portal-launcher-card h1{color:#14181d}
.theme-precise .portal-launcher-head p,.theme-precise .portal-launcher-note,.theme-precise .portal-launcher-who{color:#68737e}
.theme-precise .portal-signout{border-color:#ccd2d8;color:#1f242a}
.theme-precise .portal-app-financial{background:linear-gradient(#1f242a,#1f242a) top/100% 4px no-repeat #fff}
.theme-precise .portal-app-financial .portal-card-icon{background:#f1f3f4;color:#1f242a}
.theme-precise .portal-app-financial h2{color:#14181d}
.theme-precise .portal-app-financial p{color:#46515c}
.theme-precise .portal-app-financial .portal-card-open{background:#fff;color:#1f242a;box-shadow:inset 0 0 0 2px #1f242a}
.theme-precise .portal-app-financial .portal-card-open:hover,.theme-precise .portal-app-financial .portal-card-open:focus-visible{background:#f1f3f4}
.theme-precise .portal-app-card:hover,.theme-precise .portal-app-card:focus-within{border-color:#1f242a}

.portal-app-efficiency .portal-card-open span,.portal-app-chat .portal-card-open span,.theme-precise .portal-app-financial .portal-card-open span{color:inherit}
.portal-app-chat .portal-card-open{font-size:13px;padding:0 12px;white-space:nowrap}
.portal-app-chat .portal-card-open span{margin-left:6px}

/* ─── Modern, rounded Portal home (v2): soft elevation, big radii, circular icon badges, pill buttons ─── */
.portal-launcher-card{border:0;border-radius:36px;box-shadow:0 30px 80px -24px rgba(6,35,70,.22),0 2px 6px rgba(6,35,70,.04);background:#fff}
.theme-precise .portal-launcher-card{border:0;border-radius:36px;box-shadow:0 30px 80px -24px rgba(20,24,29,.25),0 2px 6px rgba(20,24,29,.04)}
.portal-launcher-head{align-items:center;margin-bottom:40px}
.portal-launcher-side{align-items:flex-end;gap:10px}
.portal-launcher-note{display:none}
.portal-signout{border-radius:999px;min-height:42px;padding:0 22px;border:0;background:#eef3f9;color:#082b59}
.portal-signout:hover,.portal-signout:focus-visible{background:#dfe9f4}
.theme-precise .portal-signout{background:#eff1f3;color:#1f242a}
.theme-precise .portal-signout:hover,.theme-precise .portal-signout:focus-visible{background:#e2e5e8}
.portal-launcher-who{background:none;font-size:13px}
.portal-app-cards{gap:22px}
.portal-app-card,.portal-app-efficiency,.portal-app-chat,.theme-precise .portal-app-financial{border:0;border-radius:30px;background:#fff;padding:30px;min-height:290px;box-shadow:0 1px 2px rgba(8,43,82,.06),0 14px 34px -14px rgba(8,43,82,.22)}
.portal-app-card{background:linear-gradient(180deg,#fff 0%,#f6faff 100%)}
.portal-app-efficiency,.portal-app-chat,.theme-precise .portal-app-financial{background:linear-gradient(180deg,#fff 0%,#f6f7f8 100%);box-shadow:0 1px 2px rgba(20,24,29,.06),0 14px 34px -14px rgba(20,24,29,.28)}
.portal-app-card:hover,.portal-app-card:focus-within,.portal-app-efficiency:hover,.portal-app-efficiency:focus-within,.portal-app-chat:hover,.portal-app-chat:focus-within,.theme-precise .portal-app-card:hover,.theme-precise .portal-app-card:focus-within{border:0;transform:translateY(-5px);box-shadow:0 2px 4px rgba(8,43,82,.06),0 26px 44px -16px rgba(8,43,82,.30)}
.portal-app-efficiency:hover,.portal-app-efficiency:focus-within,.portal-app-chat:hover,.portal-app-chat:focus-within,.theme-precise .portal-app-card:hover,.theme-precise .portal-app-card:focus-within{box-shadow:0 2px 4px rgba(20,24,29,.06),0 26px 44px -16px rgba(20,24,29,.36)}
.portal-card-icon{width:60px;height:60px;border-radius:50%;margin:26px 0 20px}
.portal-card-icon .ic{width:28px;height:28px}
.theme-precise .portal-app-financial .portal-card-icon{background:#eceef0;color:#1f242a}
.portal-card-number{font-size:12px;letter-spacing:.06em}
.portal-card-open{border-radius:999px;min-height:48px;padding:0 24px}
.portal-app-chat .portal-card-open{padding:0 18px}
.theme-precise .portal-app-financial .portal-card-open{background:#fff;box-shadow:inset 0 0 0 2px #1f242a}
.portal-launcher:before{display:block}
@media(max-width:700px){.portal-launcher-card,.theme-precise .portal-launcher-card{border-radius:28px}.portal-app-card,.portal-app-efficiency,.portal-app-chat,.theme-precise .portal-app-financial{padding:24px;border-radius:26px;min-height:0}.portal-launcher-head{margin-bottom:28px}.portal-launcher-side{align-items:flex-start}}
.portal-app-card .portal-card-open span{color:inherit;font-size:19px}
.portal-app-card.portal-app-chat .portal-card-open{font-size:12px;padding:0 12px;max-width:100%;letter-spacing:-.01em;white-space:nowrap}
.portal-app-card.portal-app-chat .portal-card-open span{margin-left:4px;font-size:16px}
@media(max-width:700px){.portal-app-card.portal-app-chat .portal-card-open{font-size:13px}}
