/* ─────────────────────────────────────────────────────────────────────────
   ValWithProof — the rules that belong to the product rather than to a page.

   Five documents draw this product: the role picker, the founder door, the
   mentor console, the admin console and the meeting room. Each was written as
   a self-contained file with its own <style>, which is why they are pleasant
   to edit and why they had drifted — five sets of focus behaviour, five
   answers to "what does a disabled button look like", five opinions on
   whether a long word breaks or overflows.

   This is the small set of rules that should be the same everywhere, loaded
   last so it wins, and written against the variables each page already
   defines with a literal fallback beside each so it degrades rather than
   breaks on the pages that name theirs differently.

   Deliberately narrow. It is not a design system and it is not trying to
   restyle anything — every rule here is either an accessibility floor the
   pages were missing, or a state that was invisible.
   ───────────────────────────────────────────────────────────────────────── */

/* ── keyboard focus ───────────────────────────────────────────────────────
   None of the five documents had a focus style. Several set `outline:0` on
   inputs to get a custom border, which removed it for keyboard users too. On
   a product where a mentor fills in a fourteen-field profile and an
   administrator works a queue, tabbing through with no idea where you are is
   not a small thing.

   `:focus-visible` rather than `:focus`, so a mouse click does not draw a ring
   — which is the reason people removed the outline in the first place. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--g600, var(--brand, #0E7C70));
  outline-offset: 2px;
  border-radius: max(4px, var(--radius, 6px));
}
/* Inside a dark bar the green ring disappears. */
:where(.topbar, .cwh, .rbrand, .sidebar) :where(a, button):focus-visible {
  outline-color: #fff;
}

/* A skip target for the keyboard, on the pages that have a main region.
   Visible only when focused, which is the whole point of it. */
.skip-to-main {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 9px 14px;
  border-radius: 9px;
  background: var(--g900, #0B3C37);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: top .12s ease;
}
.skip-to-main:focus { top: 12px; }

/* ── disabled ─────────────────────────────────────────────────────────────
   A disabled button that looks enabled is a button people press repeatedly.
   Several of these pages disable a Send while a message is in flight and
   showed no difference at all. */
:where(button, .btn, input, select, textarea):disabled,
:where(button, .btn)[aria-disabled='true'] {
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.7);
}
:where(button, .btn):disabled:hover { transform: none; box-shadow: none; }

/* ── pressed ──────────────────────────────────────────────────────────────
   On a touch screen there is no hover, so without an active state a tap gives
   no feedback at all until the network answers. */
:where(button, .btn):not(:disabled):active { transform: translateY(1px); }

/* ── text that is longer than its box ─────────────────────────────────────
   An email address, a pasted URL or a German compound noun. These pages laid
   out on the assumption that content is short; a founder called
   "Priyadarshini Venkataraghavan" is not exotic. */
:where(.ttl, .nm, .pv, .meta, .help, .l, td, th) { overflow-wrap: anywhere; }
/* Not on the big numbers — a wrapped "S$12,000" reads as two numbers. */
:where(.stat .n, .pg-amount) { overflow-wrap: normal; }

/* ── touch targets ────────────────────────────────────────────────────────
   Small chips and icon buttons that are comfortable with a mouse are a
   coin-toss with a thumb. The visual size is left alone; the hit area grows. */
@media (pointer: coarse) {
  :where(.chip, .trayx, .clip, .tabs button, .cwtabs button, .quick button) {
    position: relative;
  }
  :where(.chip, .trayx, .clip, .tabs button, .cwtabs button, .quick button)::after {
    content: '';
    position: absolute;
    inset: -8px;
  }
}

/* ── scrollable regions ───────────────────────────────────────────────────
   Message streams and long tables. Momentum scrolling on iOS, and a scrollbar
   that is not a full-width system bar sitting over the content. */
:where(.stream, .cwb, .chatlist, .thlist, .tabs) {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── motion ───────────────────────────────────────────────────────────────
   Everything here animates on a 120–200 ms curve, which is fine for most
   people and is not fine for anyone who has asked their system to stop.
   `!important` because these transitions are declared inline in five
   documents and this has to win over all of them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── print ────────────────────────────────────────────────────────────────
   An administrator printing a mentor's application, or a founder keeping a
   record of a session. Chrome, floating buttons and dark bars are all noise
   on paper, and a card with a shadow prints as a grey smear. */
@media print {
  .topbar, .fab, .chatwin, .sendrow, .composer, .tabs, .skip-to-main { display: none !important; }
  .app { padding: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  body { background: #fff !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 10px; color: #555; }
}

/* ── the last thing on the page ───────────────────────────────────────────
   Every portal floats a Support button bottom-right. Anything the page anchors
   to the bottom of its own content needs to clear it, including the safe area
   on a phone with a home indicator. */
:where(.app, .shell-main, main) { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

/* ── forced colours ───────────────────────────────────────────────────────
   Windows high-contrast mode drops backgrounds, which removes every one of
   this product's outline-less buttons. */
@media (forced-colors: active) {
  :where(button, .btn, .chip, .fchip, .tkrow) { border: 1px solid ButtonBorder; }
  :where(button, .btn):focus-visible { outline: 2px solid Highlight; }
}

/* ── show / hide a password ───────────────────────────────────────────────
   Every door in this product asks for a password and, until now, only the
   administrator's could show you what you had typed. That is backwards: the
   administrator types theirs from a manager, and the mentor on a phone with
   an autocorrecting keyboard is the one who cannot tell a typo from a wrong
   password — and gets "Wrong email or password" for the difference.

   One rule set, in the file every portal already loads, so a password field
   added later gets the control by using the same two class names rather than
   by somebody remembering this exists.

     <span class="pwwrap">
       <input type="password" …>
       <button type="button" class="pwreveal" aria-pressed="false" …>
     </span>

   `aria-pressed` is the state — the icon follows it in CSS, so the script
   toggling the field sets one attribute and nothing else has to agree.

   Colours are literal rather than var(): polish.css is loaded by six
   documents that each declare their own palette, and a control that renders
   invisible in the one that happens not to define --muted is worse than one
   that is a shade off in the other five. */
.pwwrap { position: relative; display: block; }
.pwwrap > input { padding-right: 44px; }
.pwreveal {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: transparent; color: #5F727C; cursor: pointer;
  padding: 0; line-height: 0; border-radius: 8px; transition: color .14s, background .14s;
}
.pwreveal:hover { color: #0B6A61; background: rgba(14, 124, 112, .09); }
/* ── the press, composed rather than replaced ────────────────────────────
   The global affordance a few rules up — `:where(button, .btn):active {
   transform: translateY(1px) }` — REPLACES a transform, and this button's
   position depends on one: translateY(-50%) is what centres it in the field.

   Pressed, it lost that and jumped 17 px down, out from under the cursor.
   The mouse went down on the button and came up on the input behind it, so
   the browser dispatched the click on their common ancestor — the wrapper —
   and the button's own handler never ran. The eye did nothing when clicked,
   which is precisely the bug this control exists to fix.

   Both transforms, in the order that keeps the centring. Listed for the
   admin console's older SHOW/HIDE button too, which has the same shape and
   was silently broken by the same rule. */
.pwreveal:not(:disabled):active,
.pwtoggle:not(:disabled):active { transform: translateY(-50%) translateY(1px); }
.pwreveal:focus-visible { outline: 2px solid #119488; outline-offset: 1px; }
.pwreveal svg { width: 18px; height: 18px; pointer-events: none; display: block; }
.pwreveal .i-eyeoff { display: none; }
.pwreveal[aria-pressed="true"] .i-eye { display: none; }
.pwreveal[aria-pressed="true"] .i-eyeoff { display: block; }
/* A revealed password must never be the thing a browser prints or a
   screenshot tool captures by accident. */
@media print { .pwwrap > input { -webkit-text-security: disc; } .pwreveal { display: none; } }