/* ============================================================
   FALDEX AGENT MODE — portal skin  ·  "Carbon & Citron"
   Added 09-07-2026.

   This file restyles /login/ and /resources/ WITHOUT touching their
   markup. Auth panes, the session bar and the resource filter all key
   off ids and classes in those pages, so the markup is left exactly as
   it was and only the design layer changes here.

   Governed by 02_Brand/1.0 Brand-Guidelines/09-05-2026_Agent-Style-Pack.html
   Consumer pages keep the Master Brand Guide and load faldex.css instead.
   ============================================================ */
:root{
  --ink:#0A0A0B;
  --text:#F6F6F4; --dim:#A5A6A1; --dimmer:#7C7D79;
  --stone:#ADB0A6; --stone-deep:#3A3D33;
  --citron:#D7F25A; --citron-deep:#9CB33A;
  --glass:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.02));
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.032));
  --edge:rgba(255,255,255,.11); --edge-soft:rgba(255,255,255,.065);
  --r:16px; --r-in:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1080px 740px at 3% -16%, rgba(104,126,44,.56), transparent 62%),
  radial-gradient(940px 800px at 99% -2%, rgba(22,88,80,.52), transparent 64%),
  radial-gradient(820px 620px at 86% 58%, rgba(60,72,32,.50), transparent 66%),
  radial-gradient(980px 660px at 58% 112%, rgba(215,242,90,.20), transparent 60%),
  radial-gradient(780px 660px at 10% 84%, rgba(118,72,32,.30), transparent 66%),
  radial-gradient(700px 600px at 34% 44%, rgba(18,20,18,.55), transparent 70%), var(--ink)}
h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;margin:0;letter-spacing:-.035em;line-height:1.05}
p{margin:0 0 1em}
a{color:var(--citron)}
.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--citron);color:var(--ink);
  padding:10px 18px;border-radius:4px;font-weight:600}
:focus-visible{outline:2px solid var(--citron);outline-offset:3px;border-radius:2px}
.eyebrow,.sect-eyebrow{font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--citron);margin:0 0 18px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.6);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--edge-soft)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:14px;padding-bottom:14px}
.top .logo img{height:30px;width:auto;display:block}
/* Every image is constrained. A footer logo with no height rule rendered at its
   natural size and took over the page, which is the classic version of this bug. */
img{max-width:100%;height:auto}
.flogo{margin-bottom:22px}
.flogo img{height:30px;width:auto;display:block;opacity:.85}
.top nav{display:flex;align-items:center;gap:22px}
.top nav a{font-weight:500;font-size:14.5px;color:var(--dim);text-decoration:none;transition:color .16s}
.top nav a:hover{color:var(--text)}
.hamb{display:none;background:none;border:0;color:var(--text);font-size:20px;cursor:pointer}

/* ---------- buttons ---------- */
.btn{font-family:'Inter';font-weight:500;font-size:15px;text-decoration:none;
  padding:13px 24px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,transform .16s}
.btn-dark{background:rgba(0,0,0,.34);color:var(--text);border-color:rgba(255,255,255,.9);width:100%}
.btn-dark:hover{background:var(--text);color:var(--ink);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.24)}
.btn-ghost:hover{border-color:var(--citron);color:var(--citron);transform:translateY(-1px)}
.linkbtn{background:none;border:0;color:var(--dim);font:500 14px/1 'Inter';cursor:pointer;
  padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--citron)}

/* ---------- sign in ---------- */
.auth{min-height:70vh;display:grid;place-items:center;padding:70px 26px}
.authcard{width:100%;max-width:452px;padding:40px 38px 34px;
  background:var(--glass-hi);border:1px solid var(--edge);border-radius:var(--r);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%)}
.authcard h1{font-weight:700;font-size:31px;margin-bottom:12px}
.authcard .lead{color:var(--dim);font-size:16px;margin-bottom:26px}
.checking{color:var(--dim);font-size:15px;margin:0;text-align:center}
.authcard[data-state="checking"] .pane{display:none}
/* Once the auth state resolves, the "Checking your sign in" line has to go.
   Without this it sits above the heading forever. */
.authcard:not([data-state="checking"]) .checking{display:none}
/* login.js moves focus to the pane heading for screen readers. That is correct
   behaviour, but a focus ring on a heading reads as a rendering fault to
   everyone else. Interactive elements keep their ring. */
.authcard h1:focus,.authcard h1:focus-visible,
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.field input{width:100%;font-family:'Inter';font-size:16px;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:var(--r-in);
  padding:13px 15px;transition:border-color .16s,background .16s}
.field input:focus{border-color:var(--citron);background:rgba(255,255,255,.075);outline:none}
.hint{font-size:12.5px;color:var(--dim);margin:8px 0 0}
.msg{font-size:14px;margin:0 0 18px;color:#FFB4A0;min-height:0}
.msg:empty{display:none}
.altrow{margin-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.helpnote{margin-top:22px;padding-top:20px;border-top:1px solid var(--edge-soft);
  font-size:13.5px;color:var(--dim)}

/* ---------- resources ---------- */
.subhero{padding:84px 0 50px}
.subhero h1{font-weight:700;font-size:clamp(34px,4.8vw,60px);max-width:17ch;margin-bottom:18px}
.subhero p{color:var(--dim);font-size:18px;max-width:58ch;margin:0}
.sessionbar{background:rgba(255,255,255,.035);border-top:1px solid var(--edge-soft);
  border-bottom:1px solid var(--edge-soft)}
.sessionbar .wrap{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.sessionbar .who{font-size:13.5px;color:var(--dim);margin:0}
.sessionbar .wholabel{color:var(--dim)}
.sessionbar strong{color:var(--text);font-weight:600}
.sessionbar .sessout{font:500 12.5px/1 'Inter';color:var(--dim);background:transparent;
  border:1px solid var(--edge);border-radius:4px;padding:8px 18px;cursor:pointer;
  transition:border-color .16s,color .16s}
.sessionbar .sessout:hover{border-color:var(--citron);color:var(--citron)}
.sessionbar .sessout[disabled]{opacity:.6;cursor:progress}
.notice{background:rgba(215,242,90,.06);border-top:1px solid rgba(215,242,90,.22);
  border-bottom:1px solid rgba(215,242,90,.22)}
.notice .wrap{padding-top:15px;padding-bottom:15px;display:flex;gap:12px;align-items:flex-start}
.notice p{font-size:14px;line-height:1.6;color:var(--dim);margin:0}
.notice strong{color:var(--citron)}
.pad{padding:54px 0 80px}
.rtools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rtools label{font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.rtools input{font-family:'Inter';font-size:16px;padding:12px 15px;min-width:min(340px,100%);
  color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:var(--r-in)}
.rtools input:focus{border-color:var(--citron);outline:none}
.rcount{font-size:14px;color:var(--dim)}
.rcat{margin-top:56px}
.rcat:first-of-type{margin-top:0}
.rcat h2{font-weight:700;font-size:clamp(23px,2.8vw,32px);color:var(--text)}
.rcat .line{display:none}
.rcat .catnote{font-size:16px;color:var(--dim);margin:10px 0 22px;max-width:70ch}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.rcard{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  padding:24px 24px 20px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .18s,transform .18s}
.rcard:hover{border-color:rgba(215,242,90,.4);transform:translateY(-2px)}
.rcard h3{font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:-.02em;
  color:var(--text);line-height:1.25;margin:0}
.rcard h3 a{color:inherit;text-decoration:none}
.rcard h3 a:hover{color:var(--citron)}
.rcard p{font-size:15px;line-height:1.6;color:var(--dim);margin:0}
.rmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.tag{font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.05);
  color:var(--dim);border:1px solid var(--edge)}
.tag.tool,.tag.link{background:rgba(215,242,90,.1);color:var(--citron);border-color:rgba(215,242,90,.3)}
.tag.soon{background:transparent;color:var(--dim);border-color:var(--edge-soft)}
.rcard.placeholder{border-style:dashed;background:transparent}
.rcard.placeholder h3{color:var(--dim)}
.rempty{display:none;font-size:17px;color:var(--dim)}
.rbtns,.rlinks{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.rbtn{font:500 14px/1 'Inter';color:var(--text);background:transparent;
  border:1px solid var(--edge);border-radius:4px;padding:11px 20px;text-decoration:none}
.rbtn:hover{border-color:var(--citron);color:var(--citron)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--edge-soft);padding:40px 0 60px;margin-top:70px}
.links{display:flex;gap:22px;flex-wrap:wrap}
.links a{color:var(--dim);font-size:14.5px;text-decoration:none}
.links a:hover{color:var(--citron)}
/* --dim, not --dimmer. This block carries the internal-use and licensing
   language, so it is the last text on the page that should be hard to
   read. See the contrast note at the foot of this file. */
.disc{font-size:12.5px;color:var(--dim);line-height:1.7;max-width:92ch;margin-top:20px}
.cream,.bg{background:transparent!important}

@media(max-width:760px){
  .top nav{gap:16px}
  .top nav a{font-size:13.5px}
  .authcard{padding:32px 26px 28px}
  .rgrid{grid-template-columns:1fr}
}

/* ============================================================
   CONTRAST FIXES  ·  09-08-2026

   The style pack asks for contrast to be checked against the brightest
   point of the field rather than against a flat swatch. Done properly,
   by compositing the six radial gradients across a 1440x900 viewport
   and sampling every pixel, two things come out of it.

   WHAT IS FINE. --dim #A5A6A1 holds up everywhere it is actually used:
   7.07:1 on the header glass, 5.60:1 on the notice strip, 4.87:1 on a
   resource card, 5.28:1 inside an input. It only dips to 4.25:1 on a
   panel pinned to the very top-left corner, and no panel sits there —
   the header does. No change needed, and no scrim: an earlier pass here
   added one and it was solving a problem that does not exist.

   WHAT IS NOT. Two values fail wherever they appear:

     --dimmer #7C7D79   4.18:1 on the header glass, 2.88:1 on a card,
                        2.51:1 at worst. The pack's "exactly 4.5:1" is
                        measured against bare ink with nothing over it,
                        which is not a surface this system ever uses.
                        Treat --dimmer as a non-text colour. Everything
                        that was reading text has moved to --dim.

     --edge as a control border   1.14:1 against the panel behind it.
                        WCAG 1.4.11 needs 3:1. This one cannot be fixed
                        by nudging the alpha a little: a translucent
                        white border and a translucent white panel both
                        brighten with the field together, so the ratio
                        barely moves. .24 gives 1.76:1, .40 gives
                        2.80:1. It takes .46, below, to clear 3:1.
   ============================================================ */

/* Border for controls whose shape carries meaning: text inputs, selects,
   textareas, unselected option buttons. Measured at 3.29:1 on a level 1
   panel, 3.01:1 on a raised one, 4.66:1 on the header glass.
   --edge stays correct for panels, cards and dividers, which are
   decorative and outside 1.4.11. */
:root{--edge-ctl:rgba(255,255,255,.46)}
.field input,.rtools input{border-color:var(--edge-ctl)}