/* Layout fixes found by the v1 quality sweep. Fold into the artifact CSS when convenient. */
/* Field "Where are you starting today?" control overflowed at 400px: let options share the width and wrap text */
.seg button { min-width: 0; }
@media (max-width: 520px) {
  .seg.big button { white-space: normal; line-height: 1.25; text-align: center; padding-inline: 6px; }
  .seg.big button svg { flex: none; }
}

/* ================= Theme v1: Graphite + Violet, Poppins (design canvas "WalQalum OS Redesign") ================= */
:root{
  --bg:#F6F6F8;--panel:#FFFFFF;--soft:#F0F0F4;--soft-2:#E6E6EC;--line:#DEDEE6;--line-2:#CBCBD6;
  --ink:#18181D;--ink-2:#3A3A44;--muted:#62626E;--accent:#5B47D6;--accent-ink:#FFFFFF;--accent-soft:#ECE9FB;
  --ok:#0F8A5F;--ok-soft:#E2F3EA;--warn:#A36500;--warn-soft:#FCF0D9;--bad:#C02E2E;--bad-soft:#FBE6E2;
  --stop:#18181D;--stop-ink:#FFFFFF;--shadow:0 1px 2px rgba(24,24,29,.05),0 4px 16px rgba(24,24,29,.05);
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --side:#1A1A1F;--side-ink:#C9C9D4;--side-muted:#8C8C99;--side-hover:rgba(255,255,255,.06);--side-on:rgba(255,255,255,.11);--side-accent:#A99BFF;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E0E11;--panel:#17171B;--soft:#1D1D22;--soft-2:#26262D;--line:#2A2A31;--line-2:#383840;
  --ink:#F4F4F6;--ink-2:#D4D4DA;--muted:#93939E;--accent:#8B7CF6;--accent-ink:#FFFFFF;--accent-soft:rgba(139,124,246,.16);
  --side:#121216;--sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif}}
:root[data-theme="dark"]{
  --bg:#0E0E11;--panel:#17171B;--soft:#1D1D22;--soft-2:#26262D;--line:#2A2A31;--line-2:#383840;
  --ink:#F4F4F6;--ink-2:#D4D4DA;--muted:#93939E;--accent:#8B7CF6;--accent-ink:#FFFFFF;--accent-soft:rgba(139,124,246,.16);
  --side:#121216;--sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif}

/* Dark graphite sidebar with roomier items (about 40px rows) */
aside.side{background:var(--side);border-right-color:var(--side);color:var(--side-ink)}
aside.side .brand,aside.side .brand span{color:#FFFFFF}
aside.side .nav-btn{color:var(--side-ink);padding:10px 12px;border-radius:8px}
aside.side .nav-btn:hover{background:var(--side-hover);color:#FFFFFF}
aside.side .nav-btn[aria-current="page"]{background:var(--side-on);color:#FFFFFF;box-shadow:none}
aside.side .nav-btn[aria-current="page"] svg{color:var(--side-accent);opacity:1}
aside.side .nav-sep{color:var(--side-muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
aside.side .side-foot{border-top-color:rgba(255,255,255,.08)}
aside.side .me-btn{color:#FFFFFF}
aside.side .me-btn:hover{background:var(--side-hover)}
aside.side .me-btn .s,aside.side .field>label,aside.side .hint{color:var(--side-muted)}
aside.side .seg{background:rgba(255,255,255,.06)}
aside.side .seg button{color:var(--side-ink)}
aside.side .seg button[aria-pressed="true"]{background:var(--side-on);color:#FFFFFF;box-shadow:none}
aside.side select{background:#24242B;color:#FFFFFF;border-color:#34343D}
aside.side .btn.ghost{color:var(--side-ink)}
aside.side .btn.ghost:hover{background:var(--side-hover);color:#FFFFFF}
aside.side .chip{background:rgba(255,255,255,.1);color:#FFFFFF}

/* WalQalum eagle watermark: bottom-right, about 70% in view */
body::after{content:"";position:fixed;right:-170px;bottom:-70px;width:680px;height:255px;z-index:-1;pointer-events:none;
  background:var(--ink);opacity:.045;-webkit-mask:url("eagle.svg") center/contain no-repeat;mask:url("eagle.svg") center/contain no-repeat}
@media (max-width:900px){body::after{right:-80px;bottom:64px;width:320px;height:120px}}
@media print{body::after{display:none}}

/* let the page background sit on <html> so the watermark can go between it and the content */
html{background:var(--bg)}
html body{background:transparent}