/* The client area's one stylesheet, in the websites' look (company/sites shared/css/theme.css at 77caeda: its tokens,
   fonts and parts, copied, not linked, so the portal loads nothing from anywhere else). An observatory at night: dark by
   default, light when the device asks; hairline borders; solar amber only where something asks for you; one filled
   button per screen. Laid out by reading direction (inline-start/end), so Arabic (CA10) mirrors by itself. The fonts are
   in fonts/, all SIL Open Font License 1.1 (OFL-*.txt beside them). When the websites' tokens change, copy them here.
   By day it is the websites' Sunrise (theme.css at d895f6c): the header is the dawn sky (violet, the last stars, the sky's
   pale words), the sun comes up along its lower edge and its light spills onto the top of a pale dawn ground, where the
   page sits on white panels with a soft shadow. Words stay dark on pale grounds, white on the sky. */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/unbounded-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/unbounded-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-Regular-Latin1.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-Medium-Latin1.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-SemiBold-Latin1.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular-Latin1.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSansArabic-Regular.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexSansArabic-SemiBold.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}

/* ---- tokens: the websites' own (dark the default, light when the device asks) ---------------------------------- */
:root{color-scheme:dark;
  --ink:#06070c;--deep:#0b0d16;--panel:#121524;--panel2:#181c2e;--sky-peak:#2e2466;
  --surface:rgba(18,21,36,.72);--line:rgba(170,182,235,.16);--line-2:rgba(170,182,235,.28);
  --text:#eceef8;--text-2:#c4c8dc;--mute:#9aa0b9;
  --solar:#ffb35c;--solar-ink:#ffb35c;--ion:#8fd8ff;--mint:#72e3b4;--coral:#ff7d6e;--violet:#a395ff;
  --btn-bg:#eceef8;--btn-ink:#0b0d16;--focus:#ffb35c;
  --font-display:'Unbounded','Avenir Next',ui-sans-serif,system-ui,sans-serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans Arabic',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-arabic:'IBM Plex Sans Arabic','IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --step--1:.8rem;--step-0:.94rem;--step-1:1rem;--step-2:1.125rem;--step-3:1.25rem;--step-4:clamp(1.45rem,1.15rem + 1.2vw,2rem);
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:36px;--s-7:56px;
  --gutter:clamp(16px,5vw,40px);--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;--ease:cubic-bezier(.22,1,.36,1);
  --elev:inset 0 1px 0 rgba(255,255,255,.035)}
@media (prefers-color-scheme: light){:root{color-scheme:light;
  --ink:#f7f1f6;--deep:#efe6f0;--panel:#ffffff;--panel2:#faf6fa;--sky-peak:#ecdff0;
  --surface:rgba(255,255,255,.92);--line:rgba(26,18,51,.12);--line-2:rgba(26,18,51,.24);
  --text:#1a1233;--text-2:#3b2f57;--mute:#5a4e75;
  --solar:#c46a00;--solar-ink:#8a4100;--ion:#0a5a88;--mint:#06674a;--coral:#b0251d;--violet:#5f2fc0;
  --btn-bg:#1a1233;--btn-ink:#fff6ee;--focus:#6a35c9;
  --elev:0 1px 2px rgba(40,20,80,.06),0 12px 32px -14px rgba(60,30,110,.22)}}

/* ---- base ------------------------------------------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* hidden wins over any display (a .note's flex showed passkey's empty error, a lone red dot) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-block-size:100vh;display:flex;flex-direction:column;color:var(--text-2);font-family:var(--font-body);font-size:var(--step-1);line-height:1.6;-webkit-font-smoothing:antialiased;
  background:var(--ink) radial-gradient(ellipse 80rem 40rem at 85% -10%,color-mix(in srgb,var(--sky-peak) 55%,transparent),transparent 70%) no-repeat}
h1,h2,h3{margin:0;color:var(--text);line-height:1.2;text-wrap:balance}
h1{font-family:var(--font-display);font-weight:300;font-size:var(--step-4);letter-spacing:-.01em;margin-block-end:var(--s-3)}
h2{font-size:var(--step-2);font-weight:600;margin-block-end:var(--s-2)}
p{margin:0 0 var(--s-3);text-wrap:pretty}
a{color:var(--text);text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--text-2)}
strong,b{color:var(--text);font-weight:600}
code{font-family:var(--font-mono);font-size:.92em;color:var(--text)}
[lang="ar"],[dir="rtl"]{font-family:var(--font-arabic)}
[lang="ar"] :is(h1,h2,h3){font-family:var(--font-arabic);font-weight:600;letter-spacing:0;line-height:1.35}
::selection{background:rgba(163,149,255,.4);color:var(--text)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---- header and footer ----------------------------------------------------------------------------------------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;min-block-size:4rem;padding-inline:var(--gutter);
  border-block-end:1px solid var(--line);background:color-mix(in srgb,var(--ink) 78%,transparent)}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.035em;
  color:var(--text);text-decoration:none;direction:ltr}
.brand img{inline-size:2.2rem;block-size:2.2rem}
.brand span{background:linear-gradient(100deg,var(--text) 20%,var(--ion) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nav{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;font-size:var(--step-0)}
.nav a{color:var(--text-2);text-decoration:none;padding-block:var(--s-2)}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.nav a[aria-current]{box-shadow:0 2px 0 var(--solar)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3) var(--s-5);padding:var(--s-5) var(--gutter);color:var(--mute);font-size:var(--step--1);border-block-start:1px solid var(--line)}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
.foot__links a{color:var(--text-2)}

/* ---- page ------------------------------------------------------------------------------------------------------ */
main{flex:1;inline-size:100%;max-inline-size:62rem;margin-inline:auto;padding:var(--s-6) var(--gutter) var(--s-7)}
main.narrow{max-inline-size:30rem}
.lede{font-size:var(--step-2);color:var(--text-2);margin-block-end:var(--s-5)}
.muted,.hint{color:var(--mute)}
.hint{font-weight:400;font-size:var(--step--1)}
.links{font-size:var(--step-0);color:var(--mute);margin-block-start:var(--s-4)}
.links a{color:var(--text-2)}

/* ---- forms: the websites' .form and .field ---------------------------------------------------------------------- */
.form{display:grid;gap:var(--s-4);margin-block:var(--s-4);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.form label{display:grid;gap:var(--s-2);font-size:var(--step-0);font-weight:500;color:var(--text)}
input{font:inherit;inline-size:100%;padding:11px 14px;border:1px solid var(--mute);border-radius:var(--r-md);background:var(--panel);color:var(--text);font-weight:400}
input::placeholder{color:var(--mute)}
input[aria-invalid="true"]{border-color:var(--coral)}
select{font:inherit;inline-size:100%;padding:11px 14px;border:1px solid var(--mute);border-radius:var(--r-md);background:var(--panel);color:var(--text)}
textarea{font:inherit;font-weight:400;inline-size:100%;min-block-size:6rem;padding:11px 14px;border:1px solid var(--mute);border-radius:var(--r-md);background:var(--panel);color:var(--text);resize:vertical}
input[type=file]{padding:9px 12px}
input[type=radio],input[type=checkbox]{inline-size:auto;accent-color:var(--solar)}
.choice{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);border:0;margin:0;padding:0}
.choice legend{font-weight:500;margin-block-end:var(--s-2);padding:0}
.choice label{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:400}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--s-4)}
.form h2{margin:0;font-size:var(--step-1)}
input.code{font-family:var(--font-mono);font-size:var(--step-3);letter-spacing:.15em;font-variant-numeric:tabular-nums}

/* ---- buttons: pills; .primary is the screen's one filled button, every other is an outline --------------------- */
button{font:inherit;font-weight:600;font-size:var(--step-0);line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:44px;padding:12px 24px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;transition:transform .16s var(--ease),border-color .16s}
button:hover{border-color:var(--text-2)}
button.primary{background:var(--btn-bg);border-color:transparent;color:var(--btn-ink)}
button.primary:hover{transform:translateY(-1px)}
button.link{background:none;border:0;padding:0;min-block-size:auto;color:var(--text-2);font-weight:400;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
button.link:hover{color:var(--text)}
form.inline{display:inline}

/* ---- notes: a dot says what kind, never a filled band ---------------------------------------------------------- */
.note{display:flex;gap:var(--s-3);align-items:baseline;padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text-2);font-size:var(--step-0);margin-block:var(--s-3)}
.note::before{content:"";flex:none;inline-size:.5em;block-size:.5em;border-radius:50%;background:var(--mute);transform:translateY(-.1em)}
.note.ok::before{background:var(--mint)}
.note.warn::before{background:var(--solar)}
.note.bad::before{background:var(--coral)}
.note.bad{color:var(--text)}
.note:empty{display:none}

/* ---- cards, facts, numbers ------------------------------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s-4);margin-block:var(--s-4)}
.card{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.card.wide{margin-block:var(--s-4)}
.card p:last-child{margin-block-end:0}
.steps{padding-inline-start:1.2em;display:grid;gap:var(--s-3);margin-block:var(--s-4)}
.steps li::marker{font-family:var(--font-mono);color:var(--solar-ink)}
.qr-box{inline-size:min(15rem,100%);margin-block:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);background:#fff}
.qr{display:block;inline-size:100%;block-size:auto}
.key,.codes{font-family:var(--font-mono);font-size:var(--step-2);color:var(--text);font-variant-numeric:tabular-nums}
.key{overflow-wrap:anywhere}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-5);margin-block:var(--s-4);padding-block:var(--s-4);padding-inline:calc(var(--s-5) + 1.2em) var(--s-5);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.codes li::marker{color:var(--mute)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);margin:0}
.facts dt{color:var(--mute)}
.facts dd{margin:0;overflow-wrap:anywhere;color:var(--text)}
.stats{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-block:var(--s-4)}
.stat{display:grid;gap:var(--s-1);padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.stat b{font-family:var(--font-display);font-weight:300;font-size:var(--step-4);font-variant-numeric:tabular-nums}
.stat span{color:var(--mute);font-size:var(--step--1)}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.form,.card,.codes,.stat,.scroll,.msg{box-shadow:var(--elev)}
.table{border-collapse:collapse;inline-size:100%;font-size:var(--step-0)}
.table th,.table td{text-align:start;padding:10px 14px;border-block-end:1px solid var(--line);white-space:nowrap}
.table tr:last-child td{border-block-end:0}
.table th{color:var(--mute);font-weight:500;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}
@media print{body{background:#fff;color:#000}.top,.foot,form{display:none}.codes{border:0}}
.or{color:var(--mute);text-align:center;margin-block:var(--s-4) 0}

/* ---- CA4: catalogue, orders ------------------------------------------------------------------------------------- */
.qty{max-inline-size:6rem}
.price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text)}
.kind{color:var(--mute);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:end;margin-block:var(--s-4)}
.actions label{display:grid;gap:var(--s-2);font-weight:500}
.actions input,.actions select{inline-size:auto;min-inline-size:8rem}
.status{display:inline-block;padding:2px 10px;border:1px solid var(--line-2);border-radius:var(--r-md);font-size:var(--step--1)}
.status.issued{border-color:var(--solar)}.status.paid{border-color:var(--mint)}.status.void{border-color:var(--coral)}   /* an invoice's state (CA5) */
.history{display:grid;gap:var(--s-3);list-style:none;padding:0;margin-block:var(--s-3)}
.history li{padding-inline-start:var(--s-4);border-inline-start:2px solid var(--line)}
.history time{color:var(--mute);font-size:var(--step--1)}
.table td.wrap{white-space:normal;min-inline-size:14rem}

/* ---- support (CA7): the thread, one message under another; the company's side set in by reading direction; notes marked ---- */
.thread{display:grid;gap:var(--s-3);margin-block:var(--s-4);padding:0;list-style:none}
.msg{padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);max-inline-size:46rem}
.msg.staff{border-color:var(--line-2);margin-inline-start:var(--s-5)}
.msg.note{border-style:dashed;border-color:var(--solar);max-inline-size:none}
.msg header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-1) var(--s-4);margin-block-end:var(--s-2);font-size:var(--step--1);color:var(--mute)}
.msg header strong{font-size:var(--step-0)}
.msg .words{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;color:var(--text)}
.files{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:var(--s-3) 0 0;padding:0;list-style:none;font-size:var(--step--1)}
.tag{display:inline-block;padding:2px 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--step--1);color:var(--text-2);white-space:nowrap}
.tag.urgent{border-color:var(--coral);color:var(--text)}
.tag.waiting_us,.tag.open{border-color:var(--solar);color:var(--text)}
.bar{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:end;margin-block:var(--s-4)}
.bar label{display:grid;gap:var(--s-1);font-size:var(--step--1);color:var(--mute)}
.bar select{inline-size:auto;min-inline-size:9rem}

/* ---- Sunrise, by day: the header is the dawn sky and takes the sky's own words; the sun comes up along its lower edge,
   at the same place as the websites' (78%), and its light spills onto the top of the ground. Checked by hand: the
   header's words on its lightest violet (#3a2782) are at least 9:1, every ink on the glow's warmest spot (#f6cfcc) at least 4.7:1. */
@media (prefers-color-scheme: light){
  body{background:radial-gradient(ellipse 60rem 16rem at 78% 4rem,rgba(255,170,130,.30),transparent 70%) no-repeat,
    linear-gradient(180deg,#f2dfec 4rem,var(--ink) 20rem) no-repeat var(--ink)}
  .top{position:relative;border-block-end:0;
    --text:#ffffff;--text-2:#ffe7f1;--mute:#f8dcec;--solar:#ffc677;--ion:#cfe9ff;--line:rgba(255,255,255,.26);--line-2:rgba(255,255,255,.5);--focus:#ffe2bd;
    background:
      radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.85) 60%,transparent),radial-gradient(1px 1px at 41% 30%,rgba(255,255,255,.6) 60%,transparent),
      radial-gradient(1.5px 1.5px at 63% 18%,rgba(255,255,255,.8) 60%,transparent),radial-gradient(1px 1px at 91% 40%,rgba(255,255,255,.55) 60%,transparent),
      radial-gradient(28rem 3rem at 78% 100%,rgba(255,154,122,.42),transparent 70%),
      linear-gradient(180deg,#241c66,#3a2782)}
  .top::after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;block-size:2px;pointer-events:none;
    background:linear-gradient(90deg,transparent 8%,#d4648f 45%,#ff9a7a 66%,#ffe2b0 78%,#ff9a7a 88%,transparent)}
  button.primary{box-shadow:0 8px 20px -10px rgba(26,18,51,.45)}
}