/* U4x brand: the one source of every colour, gradient, font, radius and spacing value.
   Edit THIS file (prism/brand/brand.css), then run `python prism/brand/sync.py`. It copies this file and fonts/
   to the three deployables: cloud/site/, cloud/ and product/web/. prism/brand/test_brand.py fails if a copy
   differs, or if a colour literal appears in a UI file outside this one.

   Two themes, one brand. Night (the default): the app, meaning the Cloud console and the head dashboard. Day
   (<html data-theme="day">): the public site.
   Components sit in @layer brand, so a page's own unlayered rule always beats them whatever the load order.
   Fonts are self-hosted: a head can run with no internet, and the console's CSP is font-src 'self'.
   Manrope's face starts at 500 on purpose: the approved board's normal text renders at 500, so 400 does too. */

@font-face{font-family:"Manrope";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/manrope.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono.woff2) format("woff2")}

:root{
  /* ---- primitives: the only colour literals in the product ---- */
  --brand-day-bg:#ffffff;--brand-day-panel:#f4f7f8;--brand-day-panel2:#e8eef0;--brand-day-fg:#101a20;--brand-day-muted:#51616c;
  --brand-day-line:#d3dde1;--brand-day-line-strong:#a9b8bf;--brand-day-accent:#0b6f78;--brand-day-accent-hover:#085860;--brand-day-on-accent:#ffffff;
  --brand-day-good:#14724a;--brand-day-warn:#855d00;--brand-day-err:#b02a2a;--brand-day-offline:#8496a0;--brand-day-grad-b:#5b3fd6;

  --brand-night-bg:#0b0d14;--brand-night-panel:#151925;--brand-night-panel2:#10131c;--brand-night-fg:#eef1f8;--brand-night-muted:#a2aabd;
  --brand-night-line:#272d3e;--brand-night-line-strong:#3c4459;--brand-night-accent:#33ccc0;--brand-night-accent-hover:#5fdcd2;--brand-night-on-accent:#07121a;
  --brand-night-good:#46e08f;--brand-night-warn:#ffb84d;--brand-night-err:#ff7f7f;--brand-night-offline:#667089;--brand-night-grad-b:#a18bff;

  --brand-shadow:#000000;
  /* the spectrum. The night one is the hairline at the top of the app and the filled seat cells, in both themes;
     --gradient below is what a primary button wears in the current theme. Change or flatten them here */
  --brand-gradient:linear-gradient(100deg,var(--brand-night-accent),var(--brand-night-grad-b));
  --brand-gradient-day:linear-gradient(100deg,var(--brand-day-accent),var(--brand-day-grad-b));
  /* categorical series, for data only (the Models cut bar: one colour per machine). Dark text reads on all of them */
  --series-1:#33ccc0;--series-2:#46e08f;--series-3:#ffb84d;--series-4:#7ab8ff;--series-5:#ff9d8a;
  --series-6:#d9e36b;--series-7:#8fd6e8;--series-8:#c3b4f5;--series-9:#e3a8d8;

  /* ---- fonts, radii, spacing ---- */
  --font-display:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
  --radius-panel:18px;--radius-note:12px;--radius-control:10px;--radius-chip:6px;--radius-pill:999px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --control-h:36px;--control-h-sm:28px;--hairline-h:3px;--shell-h:68px;

  /* ---- Night: what every page uses ---- */
  color-scheme:dark;
  --bg:var(--brand-night-bg);--panel:var(--brand-night-panel);--panel2:var(--brand-night-panel2);--field:var(--brand-night-bg);
  --fg:var(--brand-night-fg);--muted:var(--brand-night-muted);--line:var(--brand-night-line);--line-strong:var(--brand-night-line-strong);
  --accent:var(--brand-night-accent);--accent-hover:var(--brand-night-accent-hover);--on-accent:var(--brand-night-on-accent);
  --gradient:var(--brand-gradient);--wordmark:var(--brand-night-fg);
  --good:var(--brand-night-good);--warn:var(--brand-night-warn);--err:var(--brand-night-err);--offline:var(--brand-night-offline);
  --shadow:0 12px 40px color-mix(in srgb,var(--brand-shadow) 55%,transparent);--scrim:color-mix(in srgb,var(--brand-night-bg) 82%,transparent);
}
html[data-theme="day"]{
  /* ---- Day: the public site ---- */
  color-scheme:light;
  --radius-panel:14px;
  --bg:var(--brand-day-bg);--panel:var(--brand-day-panel);--panel2:var(--brand-day-panel2);--field:var(--brand-day-bg);
  --fg:var(--brand-day-fg);--muted:var(--brand-day-muted);--line:var(--brand-day-line);--line-strong:var(--brand-day-line-strong);
  --accent:var(--brand-day-accent);--accent-hover:var(--brand-day-accent-hover);--on-accent:var(--brand-day-on-accent);
  --gradient:var(--brand-gradient-day);--wordmark:var(--brand-day-accent);
  --good:var(--brand-day-good);--warn:var(--brand-day-warn);--err:var(--brand-day-err);--offline:var(--brand-day-offline);
  --shadow:0 8px 24px color-mix(in srgb,var(--brand-day-fg) 8%,transparent);--scrim:color-mix(in srgb,var(--brand-day-fg) 45%,transparent);
}
/* derived from the theme values above: opaque, so they read the same over a canvas or a ring edge */
:root,html[data-theme="day"]{
  --line-soft:color-mix(in srgb,var(--line) 62%,var(--panel));
  --hover:var(--panel2);
  --accent-line:color-mix(in srgb,var(--accent) 45%,var(--panel));--accent-wash:color-mix(in srgb,var(--accent) 12%,var(--panel));
  --good-line:color-mix(in srgb,var(--good) 45%,var(--panel));--good-wash:color-mix(in srgb,var(--good) 12%,var(--panel));
  --warn-line:color-mix(in srgb,var(--warn) 45%,var(--panel));--warn-wash:color-mix(in srgb,var(--warn) 12%,var(--panel));
  --err-line:color-mix(in srgb,var(--err) 45%,var(--panel));--err-wash:color-mix(in srgb,var(--err) 12%,var(--panel));
}

@layer brand{
  *{box-sizing:border-box}
  html{background:var(--bg)}
  body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:var(--font-display)}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  code,pre,kbd,.mono{font-family:var(--font-mono)}
  :focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  [hidden]{display:none!important}

  /* text roles */
  .muted{color:var(--muted)}.good{color:var(--good)}.warn{color:var(--warn)}.err{color:var(--err)}
  .tnum,.data{font-family:var(--font-mono);font-size:.93em;font-variant-numeric:tabular-nums}

  /* buttons. A bare <button> is the plain one, at zero specificity */
  :where(button),.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
    padding:7px 14px;background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:var(--radius-control);
    font:600 14px/1.2 var(--font-body);white-space:nowrap;cursor:pointer;text-decoration:none}
  .btn{min-height:var(--control-h);padding:0 14px}
  :where(button):hover,.btn:hover{border-color:var(--accent);text-decoration:none}
  :where(button):disabled,.btn:disabled{opacity:.5;cursor:default}
  .btn-primary{background:var(--gradient);background-origin:border-box;color:var(--on-accent);border-color:transparent;font-weight:700}
  .btn-primary:hover{filter:brightness(1.08);border-color:transparent}
  .btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--accent)}
  .btn-danger{background:transparent;color:var(--muted);border-color:var(--line)}
  .btn-danger:hover{color:var(--err);border-color:var(--err)}
  .btn-sm{min-height:var(--control-h-sm);padding:0 10px;font-size:12.5px}

  /* panels: the rounded card */
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-panel);padding:var(--space-4) var(--space-5)}

  /* fields */
  :where(input:not([type=checkbox],[type=radio]),select,textarea),.field{width:100%;min-height:var(--control-h);padding:7px 11px;
    background:var(--field);color:var(--fg);border:1px solid var(--line);border-radius:var(--radius-control);font:14px/1.3 var(--font-body)}
  :where(input,select,textarea)::placeholder,.field::placeholder{color:var(--muted);opacity:1}
  :where(input,select,textarea):focus,.field:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
  :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--err)}

  /* pills */
  .pill{display:inline-block;font:600 12px/1.5 var(--font-body);padding:1px 9px;border-radius:var(--radius-pill);
    border:1px solid var(--line);color:var(--muted);white-space:nowrap}
  .pill-good{color:var(--good);border-color:var(--good-line)}
  .pill-warn{color:var(--warn);border-color:var(--warn-line)}
  .pill-err{color:var(--err);border-color:var(--err-line)}

  /* table rows: ruled, no zebra. A bare <table> gets them, at zero specificity; .rows says so explicitly */
  .rows,:where(table){width:100%;border-collapse:collapse;font-size:13px}
  :where(th){text-align:left;font:600 12px/1.4 var(--font-body);color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
  :where(td){padding:9px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
  :where(tr:last-child td){border-bottom:0}

  /* the app's shell: gradient hairline, then wordmark, pill nav, status pill (head: shell.js; Cloud: console.py).
     The hairline is fixed; the header's top border is the same height, so it sits under it at rest and when stuck */
  .u4x-hairline{position:fixed;top:0;left:0;right:0;height:var(--hairline-h);z-index:99;background:var(--brand-gradient)}
  .u4x-shell{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;min-height:var(--shell-h);
    padding:0 28px;background:var(--bg);border-top:var(--hairline-h) solid var(--bg);border-bottom:1px solid var(--line);font:400 15px/normal var(--font-body);color:var(--fg)}
  .u4x-shell a{color:inherit;text-decoration:none}
  .wordmark,.u4x-brand b{font:800 20px/normal var(--font-display);color:var(--wordmark);letter-spacing:0}
  .u4x-brand{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
  .u4x-brand span{color:var(--muted);font-size:12.5px;font-weight:500}
  .u4x-nav{display:flex;flex-wrap:wrap;gap:4px;font-size:14px;font-weight:500}
  .u4x-nav a{padding:8px 14px;border-radius:var(--radius-pill);color:var(--muted)}
  .u4x-nav a:hover{color:var(--fg)}
  .u4x-nav a.on{background:var(--panel);color:var(--fg)}
  .u4x-status{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;margin-left:auto;padding:7px 13px;border-radius:var(--radius-pill);
    background:var(--panel);font:400 13px/normal var(--font-body);color:var(--fg)}
  .dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:var(--offline);vertical-align:middle}
  .dot.on{background:var(--good)}
  .u4x-status.serving .dot{background:var(--good)}
  .u4x-status.starting .dot,.u4x-status.capacity .dot,.u4x-status.no_model .dot{background:var(--warn)}
  .u4x-status.error .dot,.u4x-status.down .dot{background:var(--err)}
  .u4x-status:has(.txt){flex-wrap:nowrap}
  .u4x-status .txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .u4x-status .txt b{font-weight:500;color:var(--fg)}
  .u4x-status .st.warn{color:var(--warn)}.u4x-status .st.err{color:var(--err)}
  .u4x-status .why{color:var(--fg);max-width:52ch}
  .u4x-shell .u4x-status .hint{color:var(--accent);white-space:nowrap}
  .u4x-user{display:flex;align-items:center;gap:var(--space-3);min-width:0;font-size:13px;color:var(--muted);white-space:nowrap}
  .u4x-user b{color:var(--fg);font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
  .u4x-user .role{font:500 12px/1.5 var(--font-body);color:var(--muted)}
  .u4x-shell .u4x-user a{color:var(--muted)}
  .u4x-shell .u4x-user a:hover{color:var(--fg)}
  @media (max-width:760px){
    .u4x-shell{padding:10px var(--space-4);gap:8px 12px}
    .u4x-nav{order:2;flex-basis:100%;gap:2px;font-size:13.5px}
    .u4x-nav a{padding:6px 9px}
    .u4x-status{margin-left:0;order:3}
    .u4x-user{margin-left:auto}
  }
  @media print{.u4x-hairline,.u4x-shell{position:static}}
}