/* AxMaster console — subset of artifacts/axmaster-prototype.html's tokens and
   shell/card/button classes, restricted to what B07's rendered templates
   actually use. Same-origin static file, no inline <style>/<script> (D-17). */
:root{
  --navy:#0b1426; --cyan:#29c3d2; --focus:#0b7480; --on-primary:#ffffff;
  --bg:#f7f8fa; --surface:#ffffff; --border:#dde2e8; --border-control:#7c8798; --fg:#0b1426; --muted:#5b6673;
  --destructive:#b3261e; --destructive-bg:#fbeceb;
  --success:#1a7f4e; --success-bg:#e9f6ef; --warning:#a15c00; --warning-bg:#fbf1e2;
  --navy-900:#152238; --surface-2:#eef0f3; --surface-3:#f2f4f6; --destructive-hover:#8f1f19;
  --rail-fg:#c7cedb; --fg-subtle:#7c8798; --on-navy-muted:#9aa8bd; --slate-700:#334155;
  --prov-synthetic-bg:#e6f0fa; --prov-synthetic-fg:#0b4a80;
  --prov-public-bg:#eef7ec; --prov-public-fg:#1a5c33;
  --prov-customer-bg:#f6ecfa; --prov-customer-fg:#5a2a80;
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --sh-md:0 4px 6px rgba(11,20,38,0.08);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--fg); font-size:15px; line-height:1.5;
}
a{color:inherit;}
button{font-family:inherit; font-size:inherit;}
h1,h2{margin:0 0 var(--sp-3) 0; font-weight:700; line-height:1.25;}
h1{font-size:24px;} h2{font-size:20px;}
p{margin:0 0 var(--sp-2) 0;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--sp-2); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); font-weight:600; border:1px solid transparent; cursor:pointer;
  transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  min-height:44px; line-height:1.2; text-decoration:none;
}
.btn-primary{background:var(--navy); color:var(--on-primary);}
/* Auth-card buttons: full width, one line, so every primary there is the same height (visual param 20). */
.idp-btn{width:100%; justify-content:center; white-space:nowrap;}
.btn-primary:hover{background:var(--navy-900);}
.btn-secondary{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-secondary:hover{background:var(--surface-2);}
.btn-sm{padding:var(--sp-2) var(--sp-3); min-height:32px; font-size:14px;}
.btn-destructive{background:var(--destructive); color:var(--on-primary);}
.btn-destructive:hover{background:var(--destructive-hover);}

/* ---------- Shell ---------- */
.shell{display:flex; min-height:100vh;}
.rail{
  width:220px; flex:0 0 220px; background:var(--navy); color:var(--on-primary);
  display:flex; flex-direction:column; padding:var(--sp-4) var(--sp-3);
}
.rail-logo{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2) var(--sp-5) var(--sp-2); font-weight:700; font-size:16px;}
.rail-nav{display:flex; flex-direction:column; gap:var(--sp-2); flex:1;}
.rail-link{
  display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3); border-radius:var(--r-md);
  color:var(--rail-fg); text-decoration:none; font-weight:500; min-height:44px;
  transition:background-color 150ms ease, color 150ms ease; border-left:3px solid transparent;
}
.rail-link:hover{background:rgba(255,255,255,0.06); color:var(--on-primary);}
.rail-link.active{background:rgba(41,195,210,0.14); color:var(--on-primary); border-left-color:var(--cyan);}
/* B64: logout is a form button, not an <a> (POST, not idempotent nav) --
   this resets the browser's default <button> chrome so it matches
   .rail-link's look exactly. */
.rail-button{background:none; border:none; border-left:3px solid transparent; width:100%; text-align:left; font:inherit; cursor:pointer;}
.footer-note{font-size:13px; color:var(--fg-subtle); text-align:left; padding-left:12px;}
.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5); border-bottom:1px solid var(--border); background:var(--surface);
  flex-wrap:wrap;
}
.breadcrumb{display:flex; align-items:center; gap:var(--sp-2); font-size:14px; color:var(--muted); flex-wrap:wrap;}
.breadcrumb a{text-decoration:none; color:var(--muted);}
.breadcrumb a:hover{color:var(--navy); text-decoration:underline;}
.breadcrumb .current{color:var(--fg); font-weight:600;}
.content{padding:var(--sp-5); flex:1; max-width:1280px; width:100%; margin:0 auto;}

/* ---------- Cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-4);}
.uc-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
}
.uc-card-title{font-weight:700; font-size:15px;}
.uc-card-meta{font-size:14px; color:var(--muted);}
.uc-card-chips{display:flex; flex-wrap:wrap; gap:var(--sp-2);}
.uc-card-footer{display:flex; align-items:center; justify-content:space-between; margin-top:var(--sp-2);}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--sp-4);}
.agent-section{margin-bottom:var(--sp-6); border:0; padding:0;}
.agent-section-header{cursor:pointer; padding:var(--sp-2) 0; font-weight:700; font-size:20px;}
.agent-section-header:hover{color:var(--navy);}
.agent-section-body{margin-top:var(--sp-3);}
.agent-empty{color:var(--muted); font-size:14px; padding:var(--sp-2) 0;}

/* ---------- Chips (05 §5 item 3 / §6 tokens) ---------- */
.chip{
  display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600;
  padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); background:var(--surface-2); color:var(--muted);
  white-space:nowrap;
}
.chip-dept{background:var(--surface-2); color:var(--slate-700);}
.chip-provenance-synthetic{background:var(--prov-synthetic-bg); color:var(--prov-synthetic-fg);}
.chip-provenance-public{background:var(--prov-public-bg); color:var(--prov-public-fg);}
.chip-provenance-customer{background:var(--prov-customer-bg); color:var(--prov-customer-fg);}
.chip-warn{background:var(--warning-bg); color:var(--warning);}
.chip-destructive{background:var(--destructive-bg); color:var(--destructive);}

/* ---------- HealthDot (05 §5 item 4) ---------- */
.health{display:inline-flex; align-items:center; gap:var(--sp-2); font-size:14px; color:var(--muted);}
.dot{width:10px; height:10px; border-radius:50%; flex:0 0 auto;}
.dot-healthy{background:var(--success);}
.dot-degraded{background:var(--warning);}
.dot-unhealthy{background:var(--destructive);}
.dot-unknown{background:var(--muted);}

/* ---------- SegmentedToggle (05 §5 item 12) ---------- */
.segmented{display:inline-flex; gap:var(--sp-2);}
.segmented a{
  padding:8px 16px; background:var(--surface); cursor:pointer; font-weight:600;
  color:var(--muted); text-decoration:none; transition:background-color 150ms ease, color 150ms ease;
  min-height:40px; display:inline-flex; align-items:center;
  border:1px solid var(--border-control); border-radius:var(--r-md);
}
.segmented a.active{background:var(--navy); color:var(--on-primary);}

/* ---------- Finder ---------- */
.finder{position:relative; max-width:480px; flex:1; min-width:220px; display:flex; align-items:center;}
.finder input{padding-left:40px;}
.finder svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none;}
.section-toolbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-4);}

/* ---------- Inputs (finder only, subset of MASTER's .input) ---------- */
.input{
  width:100%; padding:var(--sp-3); border:1px solid var(--border-control); border-radius:var(--r-md);
  font-size:16px; font-family:inherit; background:var(--surface); color:var(--fg);
  transition:border-color 150ms ease; min-height:44px;
}
.input:focus{border-color:var(--focus);}
/* M52: a multi-select scrolls its own options, it does not clip them; options sit on the spacing scale. */
select[multiple].input{overflow:auto;}
select option{padding:var(--sp-1) var(--sp-2);}
ul,ol{margin:0 0 var(--sp-2) 0; padding-left:var(--sp-5);}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg);}
table{width:100%; border-collapse:collapse; min-width:480px;}
th,td{text-align:left; padding:var(--sp-3) var(--sp-4); font-size:14px; border-bottom:1px solid var(--border); white-space:nowrap;}
th{background:var(--surface-3); font-weight:600; color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:0.03em;}
tr:last-child td{border-bottom:none;}
/* M52 (D-159): row actions sit >=8px apart (visual param 7). */
td .btn{margin:var(--sp-1) var(--sp-2) var(--sp-1) 0;}

.center-state{max-width:520px; margin:var(--sp-6) auto; text-align:center;}
.login-card{max-width:440px; margin:0 auto;}
.hint{font-size:14px; font-weight:400; color:var(--muted);}

/* ---------- FormField (05 §5 item 10) ---------- */
.form-field{display:flex; flex-direction:column; gap:4px; margin-bottom:var(--sp-3); max-width:420px;}
.form-field label{font-size:14px; font-weight:600; color:var(--muted);}
.card{margin-bottom:var(--sp-5);}

/* ---------- Filters row (05 §4 screen 7 Audit log, B28) ---------- */
.filters-row{display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-end; margin-bottom:var(--sp-4);}
.filters-row .form-field{margin-bottom:0; min-width:160px; max-width:220px;}

/* ---------- Modal / ConfirmDialog (05 §5 items 7/8, B26) ----------
   Pure-CSS :target toggle, no JS — see _confirm_modal.html's docstring
   for the focus-trap/Esc-close trade-off this makes. */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(11,20,38,0.55);
  align-items:center; justify-content:center; padding:var(--sp-4); z-index:100;
}
.modal-overlay:target{display:flex;}
.modal-panel{
  background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-5);
  max-width:420px; width:100%; box-shadow:var(--sh-md);
}
.modal-actions{display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-4);}

/* ---------- Demo mode (B30, `05` §4 screen 8) ---------- */
.demo-shell{min-height:100vh; background:var(--navy); color:var(--on-primary); display:flex; flex-direction:column;}
.demo-top{display:flex; justify-content:space-between; align-items:center; padding:var(--sp-4) var(--sp-5);}
.demo-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--sp-4); gap:var(--sp-3);}
.demo-body .center-state{color:var(--fg);}
.demo-title{font-size:28px; font-weight:700; color:var(--on-primary); margin:0;}
.demo-meta{color:var(--on-navy-muted); font-size:14px;}
.demo-dots{display:flex; gap:8px; margin-top:var(--sp-2);}
.demo-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.3); display:inline-block;}
.demo-dot.active{background:var(--cyan);}
.demo-controls{display:flex; align-items:center; justify-content:center; gap:var(--sp-5); padding:var(--sp-5); flex-wrap:wrap;}
.demo-nav-btn{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:var(--on-primary);
  min-height:44px; min-width:44px;
}
.demo-nav-btn:hover{background:rgba(255,255,255,0.16);}
.demo-nav-btn:disabled{opacity:0.4; cursor:not-allowed;}
.demo-shell{--focus:var(--cyan);}
.demo-body .card{color:var(--fg); max-width:520px; width:100%; text-align:left; margin-bottom:0;}
.demo-body .data-notice{max-width:520px; width:100%; text-align:left;}
.demo-exit{position:absolute; top:var(--sp-4); right:var(--sp-5); min-height:44px;}
/* M48: .btn-secondary is navy-on-transparent, i.e. invisible (contrast 1.0) on the navy .demo-shell. */
.demo-exit,.demo-exit:hover{color:var(--on-primary); border-color:var(--on-primary);}
.demo-exit:hover{background:rgba(255,255,255,0.12);}

/* ---------- Kanban (05 §4 screen 6, B27) ----------
   `05 §9`'s Admin: Onboarding row wants 3 distinct layouts per breakpoint
   (accordion at 375px, 2-visible + h-scroll at 768px, all 5 columns at
   1024px+) rather than the prototype's simpler grid-collapse — `<details>`
   per column gives a real, keyboard-operable accordion at the narrowest
   width for free; wider breakpoints just change the columns' layout
   container. Mobile-first: base rule below is the ≤767px shape. */
.kanban{display:flex; flex-direction:column; gap:var(--sp-3);}
.kcol{background:var(--surface-3); border-radius:var(--r-lg); padding:var(--sp-3);}
.kcol summary{
  font-size:14px; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted);
  font-weight:700; cursor:pointer; min-height:44px; display:flex; align-items:center;
}
.kcol-body{margin-top:var(--sp-2);}
.kitem{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-3); margin-bottom:var(--sp-2);}
.kitem-title{font-weight:700; font-size:14px; margin-bottom:4px;}
.kitem .chip{white-space:normal;}
.kitem-meta{font-size:14px; color:var(--muted); margin-bottom:var(--sp-2);}

@media (min-width: 768px){
  .kanban{flex-direction:row; overflow-x:auto; padding-bottom:var(--sp-2);}
  .kcol{flex:0 0 46%;}
}
@media (min-width: 1024px){
  .kanban{display:grid; grid-template-columns:repeat(5,1fr); overflow-x:visible;}
  .kcol{flex:initial;}
}

/* ---------- Stepper / wizard (05 §4 screen 6a, B27) ---------- */
.wizard-wrap{max-width:720px; margin:0 auto;}
.stepper{display:flex; gap:var(--sp-2); margin-bottom:var(--sp-5);}
.step{flex:1; text-align:center; padding:var(--sp-2); border-bottom:3px solid var(--border); color:var(--muted); font-weight:600; font-size:14px;}
.step.active{border-color:var(--navy); color:var(--navy);}
.step.done{border-color:var(--success); color:var(--success);}

/* ---------- Key/value summary (wizard review step, B27) ---------- */
.kv{display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--border); font-size:14px;}
.kv:last-child{border-bottom:none;}
.kv dt{color:var(--muted);}
dl{margin:0;}
code, .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px;}

/* ---------- Use-case launcher/detail (05 §4 screen 4, B29) ---------- */
.manifest-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-4); max-width:1200px;}
.audit-tail{font-size:14px; color:var(--muted);}
.audit-tail div{padding:4px 0; border-bottom:1px solid var(--border);}
.audit-tail div:last-child{border-bottom:none;}

@media (min-width: 768px){
  .manifest-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 768px){
  body{font-size:16px;}
  td{font-size:16px;}
  th, .hint, .breadcrumb, .btn-sm, .uc-card-meta, .agent-empty, .health, .form-field label,
  .kitem-title, .kitem-meta, .step, .kv, .audit-tail, .offline-banner, code, .mono{font-size:15px;}
  .footer-note{font-size:14px;}
  .btn-sm{min-height:44px;}
  /* Rail links are text-only (no icons), so a 64px icon rail clipped them;
     stack the rail above the content as a wrapping link bar instead. */
  .shell{flex-direction:column; min-height:0;}
  .rail{width:auto; flex:none; padding:var(--sp-2) var(--sp-3);}
  .rail-logo{padding:var(--sp-2);}
  .rail-nav{flex-direction:row; flex-wrap:wrap;}
  .footer-note{display:none;}
  .content{padding:var(--sp-4);}
  .demo-controls{flex-direction:column;}
}
@media (max-width: 420px){
  .cards-grid{grid-template-columns:1fr;}
}
@media (max-width: 375px){
  .topbar{padding:var(--sp-3);}
  .section-toolbar{flex-direction:column; align-items:stretch;}
  .finder{max-width:none;}
  /* 05 §9 Wizard row: "Stepper labels hide, numbers only" at 375px */
  .step-label{display:none;}
  /* 05 §9 Admin: Audit row: "filters stack, CSV button full-width" */
  .filters-row{flex-direction:column; align-items:stretch;}
  .filters-row .form-field{max-width:none;}
  .filters-row .btn{width:100%;}
}
/* D-113/OQ-12: offline banner */
.offline-banner{background:var(--warning-bg); color:var(--warning); text-align:center; padding:var(--sp-2) var(--sp-4); font-size:14px;}
.offline-banner[hidden]{display:none;}

/* M12: page-level data notice (role="note"); light surface so it reads on white and on the navy demo shell */
.data-notice{background:var(--surface-2); color:var(--fg); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4); font-size:14px;}

/* M20: utility classes replacing inline style= (CSP style-src 'self') */
.text-muted{color:var(--muted);}
.text-left{text-align:left;}
.title-sm{font-size:20px;}
.mt-2{margin-top:var(--sp-2);}
.mt-4{margin-top:var(--sp-4);}
.mt-5{margin-top:var(--sp-5);}
.mb-20{margin-bottom:var(--sp-5);}
.hint-flush{margin:0 0 var(--sp-4);}
.list-plain{list-style:none; padding:0; margin:0 0 var(--sp-2) 0;}
.row-wrap{display:flex; gap:var(--sp-2); flex-wrap:wrap;}