/* Flowolf portal styles. Tokens and components from the Flowolf brand guide (tokens.json v2,
   components/bundle.css); see design/mockups for the approved screens. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root, [data-theme="light"] {
  --surface:#f5f7f9; --surface-raised:#fff; --surface-sunken:#eceff3; --surface-hover:#eceff3; --surface-selected:#fff4f0;
  --surface-inverse:#1d2632; --text:#111923; --text-muted:#5b6470; --text-inverse:#f5f7f9; --text-accent:#b34600;
  --border:#dce0e6; --border-strong:#78818c; --focus:#b34600; --accent:#ff6700; --on-accent:#111923;
  --action:#c94f00; --action-hover:#b34600; --action-pressed:#903700; --on-action:#fff;
  --success:#007835; --success-soft:#dff6e2; --danger:#c22826; --danger-soft:#ffe9e6; --warning:#825b00; --warning-soft:#fcecd3;
  --info:#424b57; --info-soft:#eceff3; --linkedin:#0a66c2;
  --shadow-1:0 1px 2px 0 rgba(17,25,35,.06),0 2px 8px 0 rgba(17,25,35,.06);
  --pick-orange-accent:#ff6700; --pick-orange-text:#b34600; --pick-orange-soft:#fff4f0; --pick-orange-action:#c94f00; --pick-orange-action-hover:#b34600; --pick-orange-action-pressed:#903700; --pick-orange-on-action:#fff;
  --pick-amber-accent:#d38f00; --pick-amber-text:#936200; --pick-amber-soft:#fff1df; --pick-amber-action:#9e6a00; --pick-amber-action-hover:#885a00; --pick-amber-action-pressed:#724b00; --pick-amber-on-action:#fff;
  --pick-moss-accent:#7fb125; --pick-moss-text:#527700; --pick-moss-soft:#eef8e2; --pick-moss-action:#598000; --pick-moss-action-hover:#4b6d00; --pick-moss-action-pressed:#3d5a00; --pick-moss-on-action:#fff;
  --pick-jade-accent:#00ba87; --pick-jade-text:#007c59; --pick-jade-soft:#e2faee; --pick-jade-action:#00855f; --pick-jade-action-hover:#007150; --pick-jade-action-pressed:#005d42; --pick-jade-on-action:#fff;
  --pick-lagoon-accent:#00b4bb; --pick-lagoon-text:#00797f; --pick-lagoon-soft:#ddfafb; --pick-lagoon-action:#008287; --pick-lagoon-action-hover:#006e73; --pick-lagoon-action-pressed:#005c60; --pick-lagoon-on-action:#fff;
  --pick-iris-accent:#968cff; --pick-iris-text:#695bcd; --pick-iris-soft:#f2f2ff; --pick-iris-action:#7264d7; --pick-iris-action-hover:#6152c3; --pick-iris-action-pressed:#5143a6; --pick-iris-on-action:#fff;
  --pick-violet-accent:#bf7cec; --pick-violet-text:#904eba; --pick-violet-soft:#f8f0ff; --pick-violet-action:#9957c4; --pick-violet-action-hover:#8745b0; --pick-violet-action-pressed:#723896; --pick-violet-on-action:#fff;
  --pick-berry-accent:#e96cad; --pick-berry-text:#b73e81; --pick-berry-soft:#ffeef5; --pick-berry-action:#c1488a; --pick-berry-action-hover:#ad3478; --pick-berry-action-pressed:#932965; --pick-berry-on-action:#fff;
  --pick-coral-accent:#f66c6d; --pick-coral-text:#c13b42; --pick-coral-soft:#ffefee; --pick-coral-action:#cb454a; --pick-coral-action-hover:#b63039; --pick-coral-action-pressed:#9b262e; --pick-coral-on-action:#fff;
  --pick-graphite-accent:#78818c; --pick-graphite-text:#424b57; --pick-graphite-soft:#eceff3; --pick-graphite-action:#2c3643; --pick-graphite-action-hover:#1d2632; --pick-graphite-action-pressed:#111923; --pick-graphite-on-action:#fff;
}
[data-theme="dark"] {
  --surface:#1d2632; --surface-raised:#2c3643; --surface-sunken:#111923; --surface-hover:#424b57; --surface-selected:#6c2a05;
  --surface-inverse:#f5f7f9; --text:#f5f7f9; --text-muted:#c5cbd2; --text-inverse:#111923; --text-accent:#ffb799;
  --border:#424b57; --border-strong:#9ea5af; --focus:#ffb799;
  --success:#75d78d; --success-soft:#2c3643; --danger:#ffa096; --danger-soft:#2c3643; --warning:#fdbe45; --warning-soft:#2c3643;
  --info:#dce0e6; --info-soft:#2c3643; --linkedin:#92c1fd; --shadow-1:0 1px 2px 0 rgba(0,0,0,.4);
  --pick-orange-text:#ffb799; --pick-orange-soft:#6c2a05; --pick-amber-text:#faaa00; --pick-amber-soft:#4a2f00;
  --pick-moss-text:#96c944; --pick-moss-soft:#2b3c10; --pick-jade-text:#00d49a; --pick-jade-soft:#00402c;
  --pick-lagoon-text:#00cdd5; --pick-lagoon-soft:#003e41; --pick-iris-text:#b5b2ff; --pick-iris-soft:#322f58;
  --pick-violet-text:#d9a4ff; --pick-violet-soft:#402a50; --pick-berry-text:#ff9bcb; --pick-berry-soft:#4f253a;
  --pick-coral-text:#ffa09c; --pick-coral-soft:#542525;
  --pick-graphite-accent:#9ea5af; --pick-graphite-text:#dce0e6; --pick-graphite-soft:#424b57; --pick-graphite-action:#dce0e6; --pick-graphite-action-hover:#eceff3; --pick-graphite-action-pressed:#c5cbd2; --pick-graphite-on-action:#111923;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--surface); color: var(--text); font: 400 16px/24px "IBM Plex Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Headings get focus after a page change (for screen readers), but show no ring. */
h1[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/16px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-accent); }
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.logo { display: block; width: auto; color: #1d2632; }
[data-theme="dark"] .logo { color: #f5f7f9; }

/* ---- Buttons: slanted bars ---- */
.btn { --bg: var(--action); --bgh: var(--action-hover); --bgp: var(--action-pressed); --edge: var(--action); --ink: var(--on-action); --h: 40px; --sl: calc(var(--h) * .5774);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h);
  padding: 0 calc(16px + var(--sl) / 2); border: 0; background: none; color: var(--ink); font: 600 15px/20px "IBM Plex Sans"; white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn::before, .btn::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%); }
.btn::before { inset: 0; background: var(--edge); }
.btn::after { inset: 1.5px 2.5px; background: var(--bg); }
.btn:hover::after { background: var(--bgh); }
.btn:active::after { background: var(--bgp); }
.btn--block { width: 100%; }
.btn--ghost { --bg: var(--surface-raised); --bgh: var(--surface-hover); --bgp: var(--surface-hover); --edge: var(--border-strong); --ink: var(--text); }
.btn--sm { --h: 32px; padding: 0 calc(12px + var(--sl) / 2); font-size: 14px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .4; cursor: not-allowed; }
.btn[disabled]:hover::after { background: var(--bg); }
.link { color: var(--text-accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
.link:hover { text-decoration-thickness: 2px; }

/* ---- Forms ---- */
.field { display: grid; gap: 8px; }
.label { font: 500 14px/20px "IBM Plex Sans"; }
.input { width: 100%; min-height: 40px; padding: 8px 16px; font: 400 16px/24px "IBM Plex Sans"; color: var(--text); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 2px; }
.input:hover { border-color: var(--text-muted); }
.input::placeholder { color: var(--text-muted); }
.input--code { font: 500 28px/36px "IBM Plex Mono", monospace; letter-spacing: .4em; text-align: center; padding: 8px 0 8px .4em; }
.hint { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.field--error .input { border: 2px solid var(--danger); }
.field--error .hint { color: var(--danger); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 20px; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }

/* ---- Alerts and badges ---- */
.alert { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px 16px; border-radius: 2px; font-size: 14px; line-height: 20px; background: var(--info-soft); border: 1px solid var(--info); }
.alert > .icon { width: 20px; height: 20px; color: var(--info); }
.alert strong { font-weight: 600; }
.alert--success { background: var(--success-soft); border-color: var(--success); }
.alert--success > .icon { color: var(--success); }
.alert--danger { background: var(--danger-soft); border-color: var(--danger); }
.alert--danger > .icon { color: var(--danger); }
.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px; font: 500 12px/16px "IBM Plex Sans"; border-radius: 2px; color: var(--info); background: var(--info-soft); white-space: nowrap; }

/* ---- Sign-in screens ---- */
.auth { display: grid; place-items: center; min-height: 100vh; padding: 48px 16px; }
.auth__box { width: 100%; max-width: 440px; display: grid; gap: 24px; }
.auth__logo { height: clamp(56px, 7vw, 80px); justify-self: center; margin-bottom: 8px; }
.card { display: grid; gap: 20px; padding: 32px; background: var(--surface-raised); border: 1px solid var(--border); }
.card h1 { margin: 0; font: 600 24px/32px "IBM Plex Sans"; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--text-muted); }
.card p strong { color: var(--text); font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; font-size: 14px; line-height: 20px; }
.foot { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-muted); text-align: center; }
.trial { padding: 12px 16px; background: var(--surface-sunken); font-size: 14px; line-height: 20px; }
.trial b { font-weight: 600; }
.companies { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); }
.companies li + li { border-top: 1px solid var(--border); }
.company { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.company:hover { background: var(--surface-hover); }
.mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; background: var(--surface-inverse); color: var(--text-inverse); font: 600 14px/1 "IBM Plex Sans"; }
.company small { display: block; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.company .icon { margin-left: auto; color: var(--text-muted); }

/* ---- App shell ---- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: var(--surface-sunken); border-right: 1px solid var(--border); }
.nav__logo { height: 32px; margin: 4px 12px 16px; }
.nav__company { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 2px; }
.nav__company .mark { width: 28px; height: 28px; font-size: 13px; }
.nav__company strong { display: block; font: 600 14px/20px "IBM Plex Sans"; }
.nav__company small { display: block; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.nav__group { margin: 16px 12px 4px; font: 500 12px/16px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.nav__item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; font: 500 14px/20px "IBM Plex Sans"; color: var(--text); text-decoration: none; border-radius: 2px; }
.nav__item .icon { width: 20px; height: 20px; color: var(--text-muted); }
a.nav__item:hover { background: var(--surface-hover); }
.nav__item[aria-current="page"] { background: var(--surface-selected); font-weight: 600; }
.nav__item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--accent); }
.nav__item[aria-current="page"] .icon { color: var(--text); }
.nav__item[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.nav__item .badge { margin-left: auto; min-height: 20px; padding: 0 6px; }
.nav__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; line-height: 20px; }
.avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--border-strong); font: 600 12px/1 "IBM Plex Sans"; }
.me small { display: block; color: var(--text-muted); font-size: 12px; line-height: 16px; }
.nav__signout { justify-self: start; margin: 0 12px 4px; font-size: 14px; }

.main { padding: 32px 40px 64px; }
.page { max-width: 1120px; display: grid; gap: 32px; }
.page h1 { margin: 8px 0 8px; font: 600 40px/48px "IBM Plex Sans"; letter-spacing: -.02em; }
.lead { margin: 0; max-width: 62ch; color: var(--text-muted); }
.panel { background: var(--surface-raised); border: 1px solid var(--border); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.panel__head h2 { margin: 0; font: 600 18px/26px "IBM Plex Sans"; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.steps li:last-child { border-bottom: 0; }
.steps .icon { width: 20px; height: 20px; color: var(--text-muted); }
.steps b { display: block; font-weight: 600; }
.steps span { color: var(--text-muted); font-size: 14px; line-height: 20px; }
.steps .badge { margin-left: auto; }
.meter { display: grid; gap: 6px; max-width: 360px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.meter strong { color: var(--text); }
.bar { height: 6px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.bar > span { display: block; height: 100%; background: var(--accent); }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .nav { border-right: 0; border-bottom: 1px solid var(--border); }
  .main { padding: 24px 16px 48px; }
  .page h1 { font-size: 32px; line-height: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn::after, .input, .nav__item { transition: background-color 120ms cubic-bezier(.2,0,0,1), border-color 120ms cubic-bezier(.2,0,0,1); }
}
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn::before, .btn::after { display: none; }
  .nav__item[aria-current="page"]::before { background: Highlight; }
}