/* ════════════════════════════════════════════════════════════════════════════
   identity.fowlguard.com, as served. Loaded after clearway.css and identity.css (both copied
   unchanged from design/clearway). This file holds only what the design leaves to its script or
   never needed: the server renders the frame, so the brand mark is a file, the destination photo
   is a class, messages come back from the server, and the portal's admin pages keep the forms and
   tables they already had.
   ════════════════════════════════════════════════════════════════════════════ */

/* The mark: the one logo file, not an inline copy */
.brand img{width:30px;height:30px;flex:none}

/* Destination photographs (CC0, see assets/photos/CREDITS.md) */
.auth-aside .bg.ph-server-rack{background-image:url(/assets/photos/server-rack.jpg)}
.auth-aside .bg.ph-lone-worker{background-image:url(/assets/photos/lone-worker.jpg)}
.auth-aside .bg.ph-keyboard{background-image:url(/assets/photos/keyboard.jpg)}
.auth-aside .bg.ph-open-office{background-image:url(/assets/photos/open-office.jpg)}
.auth-aside .bg.ph-home-office{background-image:url(/assets/photos/home-office.jpg)}
.auth-aside .bg.ph-earth-lights{background-image:url(/assets/photos/earth-lights.jpg)}
.auth-aside .dest .mono{white-space:nowrap}

/* Messages the server sends back: errors, confirmations */
.flash{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:14px;font-size:14.5px;font-weight:600;line-height:1.45}
.flash.err{background:var(--deny-bg);color:var(--deny);border:1px solid color-mix(in srgb,var(--deny) 30%,transparent);animation:flasherr .45s ease}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.err::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--deny);color:var(--surface);font:800 13px/1 var(--font)}
@keyframes flasherr{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.flash.err{animation:none}}

/* Sign-in card details */
.auth-card .check{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.auth-card .check input{width:18px;height:18px;margin:0;accent-color:var(--signal)}
.auth-card .btn[disabled],.social .btn[disabled]{opacity:.5;cursor:not-allowed}
.auth-card .btn-line{background:var(--surface)}
.fld input.code{height:60px;text-align:center;font:600 24px/1 var(--mono);letter-spacing:.3em}
.fld input.code::placeholder{letter-spacing:.3em;color:var(--line-2)}
.fld .pw input{width:100%}
.choice .chip{font-weight:600}
.choice .ico{font:800 14px/1 var(--font)}
.choice .ico .i,.choice .ico svg.logo{width:20px;height:20px}
.choice>span:nth-child(2){min-width:0}
.choice b{overflow-wrap:anywhere}
.auth-card .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:15px}
.auth-card .kv dt{color:var(--dim);font-weight:600}
.auth-card .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.auth-card .actions{display:grid;gap:10px}
.fine-print .sep{margin:0 6px;color:var(--line-2)}
.auth-foot .copy{white-space:nowrap}

/* Account layout: the parts identity.js wrote in the design */
.acct-bar .me .who{font-size:14px;color:var(--dim);max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-main .acct-head p{max-width:70ch}
.panel-card form.body .btn,.panel-card .body>div>.btn{justify-self:start}
.panel-card .fld{max-width:28rem}
.panel-card .fld input{height:44px}
.panel-card .fld input.code{height:52px;font-size:20px}
.panel-card .kvrow dd .fld{max-width:none}
.panel-card .body p{color:var(--dim)}
.panel-card .body p b{color:var(--ink)}
.list-row>div:nth-child(2){min-width:0}
.list-row small{overflow-wrap:anywhere}
.list-row .end form{margin:0}
.secret.uri{font-size:12px;letter-spacing:0;color:var(--dim)}
.acct-foot{font-size:13px;color:var(--faint)}

/* The portal's admin pages (organisations, users, licences, audit): their forms and tables, in
   Clearway terms. Scoped to .portal so the redesigned account pages above are untouched. */
.portal{display:grid;gap:18px;min-width:0}
.portal h1{font-size:clamp(28px,2.8vw,38px);letter-spacing:-.03em}
.portal h3{font-size:19px;letter-spacing:-.015em;margin:0 0 4px}
.portal .sub{color:var(--dim);margin-top:-8px}
.portal .muted{color:var(--dim)}
.portal .card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 22px;min-width:0;overflow-x:auto}
.portal .card:has(>table){padding:0 0 4px}
.portal table{width:100%;border-collapse:collapse}
.portal thead,.portal tr:first-child:has(th){border-bottom:1px solid var(--line)}
.portal th{text-align:left;padding:11px 16px;font:600 12px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.portal td{text-align:left;padding:9px 16px;font-size:14.5px;border-top:1px solid var(--line);vertical-align:top}
.portal tr:first-child td{border-top:0}
.portal label{display:block;font-size:14px;font-weight:700;color:var(--ink-2);margin:12px 0 6px}
.portal label:has(>input[type=checkbox]){display:flex;align-items:center;gap:8px;font-weight:600}
.portal input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--signal)}
.portal input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.portal select{width:100%;max-width:28rem;height:40px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-size:14.5px}
.portal input:focus,.portal select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px var(--signal-soft)}
.portal .row{display:flex;flex-wrap:wrap;gap:14px}
.portal .row>div{flex:1;min-width:12rem}
.portal form.inline{display:inline;margin:0}
.portal button,.portal .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;margin-top:12px;border-radius:999px;border:1.5px solid transparent;background:var(--signal);color:var(--signal-ink);font:700 14px/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.portal button:hover,.portal .btn:hover{background:var(--signal-hover)}
.portal button.ghost,.portal .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);margin-top:0}
.portal button.ghost:hover,.portal .btn.ghost:hover{border-color:var(--ink)}
.portal td button,.portal td .btn{height:32px;padding:0 12px;font-size:13.5px;margin:2px 0}
.portal .pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:600 12px/1 var(--font);white-space:nowrap}
.portal .pill.ok{background:var(--ok-bg);color:var(--ok)}
.portal .pill.bad{background:var(--deny-bg);color:var(--deny)}
.portal .pill.mut{background:var(--surface-3);color:var(--dim)}
.portal .seats{font-size:28px;font-weight:800;letter-spacing:-.03em}
.portal .seats small{font-size:14.5px;color:var(--dim);font-weight:500;letter-spacing:0}
.portal .bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:10px}
.portal .bar>i{display:block;height:100%;background:var(--signal)}
.portal hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.portal .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.portal .toolbar input{max-width:18rem}
.portal .toolbar button,.portal .toolbar .btn{margin:0}
code,.portal code{font-family:var(--mono);font-size:.9em;background:var(--surface-3);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.codes span,.secret{overflow-wrap:anywhere}