/* =========================================================
   dash-ui.css: the components. One block per component, in the order of the README's catalogue.
   Class names are short and unprefixed (.panel, .chip, .btn): only the design system writes them.
   ========================================================= */

/* ---- Icon ---- */
.ico{width:var(--mm-size-icon-md);height:var(--mm-size-icon-md);flex:none;}
.ico.sm{width:var(--mm-size-icon-sm);height:var(--mm-size-icon-sm);}
.ico.lg{width:var(--mm-size-icon-lg);height:var(--mm-size-icon-lg);}

/* ---- Panel ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);min-width:0;display:flex;flex-direction:column;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);min-height:52px;flex-wrap:wrap;}
.panel-head h3{font-family:var(--font-label);font-weight:600;font-size:var(--fs-lg);letter-spacing:0.02em;text-transform:uppercase;line-height:1.2;}
.panel-sub{margin-top:1px;color:var(--muted);font-size:var(--fs-sm);}
.panel-acts{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;}
.panel-body{padding:var(--sp-4);flex:1 1 auto;min-width:0;}
.panel-flush{flex:1 1 auto;min-width:0;}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line-soft);
  font-size:var(--fs-sm);color:var(--muted);flex-wrap:wrap;}
.panel.tone-danger{border-color:var(--bad);}
.panel.tone-danger .panel-head{background:var(--bad-soft);}
.panel.tone-brand{border-top:4px solid var(--yellow);}
.panel h4{font-family:var(--font-label);font-weight:600;font-size:var(--fs-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2);}

/* ---- Stat and StatGrid ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3);}
.stats.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.stats.cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.stats.cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
@media (max-width:1180px){.stats.cols-5,.stats.cols-6{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:720px){.stats,.stats.cols-4,.stats.cols-5,.stats.cols-6{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4) var(--sp-3);
  box-shadow:var(--shadow-sm);min-width:0;overflow:hidden;}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line);}
.stat.tone-good::before{background:var(--good);} .stat.tone-warn::before{background:var(--warn);}
.stat.tone-bad::before{background:var(--bad);} .stat.tone-info::before{background:var(--info);} .stat.tone-brand::before{background:var(--yellow);}
.stat-label{font-family:var(--font-label);font-weight:600;font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-value{margin-top:2px;font-family:var(--font-display);font-style:italic;font-weight:800;font-size:var(--fs-4xl);line-height:1.05;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.stat-value.sm{font-size:var(--fs-2xl);line-height:1.25;}
.stat.tone-bad .stat-value{color:var(--bad-ink);}
.stat-value a{color:inherit;}
.stat-value a:hover{color:var(--link);text-decoration:none;}
.stat-foot{margin-top:var(--sp-1);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-2);min-width:0;}
.stat-foot > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stat-spark{margin-top:var(--sp-2);height:28px;}
.delta{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:var(--fs-xs);padding:1px 6px;border-radius:var(--r-full);}
.delta.up{background:var(--good-soft);color:var(--good-ink);}
.delta.down{background:var(--bad-soft);color:var(--bad-ink);}
.delta.flat{background:var(--soft);color:var(--ink-2);}
.delta .ico{width:12px;height:12px;}

/* ---- DataTable ---- */
.tbl-wrap{overflow-x:auto;min-width:0;}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-md);}
.tbl thead th{position:relative;padding:var(--sp-2) var(--sp-3);text-align:left;white-space:nowrap;background:var(--page);border-bottom:1px solid var(--line);
  font-family:var(--font-label);font-weight:600;font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2);}
.tbl thead.sticky th{position:sticky;top:0;z-index:1;}
.tbl td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover td{background:var(--hover);}
.tbl tr.click{cursor:pointer;}
.tbl tr.hl td{background:var(--selected);}
.tbl tr.dim td{color:var(--muted);}
.tbl .num,.tbl th.num{text-align:right;}
.tbl td.num{font-family:var(--font-mono);font-size:var(--fs-sm);}
.tbl code{overflow-wrap:anywhere;white-space:normal;}
.tbl .sub{display:block;color:var(--muted);font-size:var(--fs-xs);}
.tbl .cell-main{font-weight:600;}
.tbl .acts{text-align:right;white-space:nowrap;}
.tbl .acts .btn + .btn{margin-left:var(--sp-1);}
.tbl tfoot td{border-top:1px solid var(--line);font-weight:600;background:var(--page);}
.tbl td.empty-cell{padding:0;}
.tbl.compact td,.tbl.compact th{padding:6px var(--sp-3);}
.tbl-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--line-soft);
  font-size:var(--fs-sm);color:var(--muted);flex-wrap:wrap;}
.sort{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;}
.sort:hover{color:var(--ink);}
.sort.on{color:var(--ink);}
.sort .caret{width:10px;height:10px;opacity:0.35;}
.sort.on .caret{opacity:1;}
th.num .sort{flex-direction:row-reverse;}

/* ---- Pager ---- */
.pager{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;}
.pager button{min-width:30px;height:30px;padding:0 var(--sp-2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink-2);cursor:pointer;font-weight:600;font-size:var(--fs-sm);}
.pager button:hover:not(:disabled){border-color:var(--line-strong);color:var(--ink);}
.pager button.on{background:var(--ink);border-color:var(--ink);color:var(--on-dark);}
.pager button:disabled{opacity:0.4;cursor:default;}
.pager .pager-info{margin:0 var(--sp-2);color:var(--muted);font-size:var(--fs-sm);}

/* ---- DetailList ---- */
.dl{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:var(--sp-2) var(--sp-5);margin:0;font-size:var(--fs-md);}
.dl dt{color:var(--muted);font-size:var(--fs-sm);padding-top:1px;}
.dl dd{margin:0;min-width:0;overflow-wrap:anywhere;}
.dl.pad{padding:var(--sp-4);}
@media (max-width:560px){.dl{grid-template-columns:minmax(0,1fr);gap:2px;}.dl dd{margin-bottom:var(--sp-2);}}

/* ---- EntityHead ---- */
.ent-head{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;min-width:0;}
.ent-head .ent-text{flex:1 1 240px;min-width:0;}
.ent-head .ent-title{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-family:var(--font-display);font-style:italic;font-weight:800;
  font-size:var(--fs-3xl);line-height:1.05;text-transform:uppercase;}
.ent-head .ent-title:focus{outline:none;}
.ent-head .ent-sub{margin-top:var(--sp-1);color:var(--ink-2);font-size:var(--fs-sm);display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;}
.ent-head .ent-chips{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-top:var(--sp-2);}
.ent-head .ent-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;}
.page > .ent-head{margin-bottom:var(--sp-5);}

/* ---- EmptyState ---- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--ink-2);}
.empty .empty-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-full);background:var(--soft);color:var(--muted);margin-bottom:var(--sp-2);}
.empty .empty-ico .ico{width:22px;height:22px;}
.empty b{color:var(--ink);font-weight:600;}
.empty span{font-size:var(--fs-sm);max-width:440px;}
.empty .empty-act{margin-top:var(--sp-3);}
.empty.compact{padding:var(--sp-4);}

/* ---- Notice ---- */
.notice{position:relative;display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);border:1px solid;font-size:var(--fs-md);}
.notice > .ico{margin-top:2px;flex:none;}
.notice .notice-body{flex:1 1 auto;min-width:0;}
.notice .notice-title{font-weight:600;}
.notice.notice-info{background:var(--info-soft);border-color:var(--info);color:var(--info-ink);}
.notice.notice-success{background:var(--good-soft);border-color:var(--good);color:var(--good-ink);}
.notice.notice-warning{background:var(--warn-soft);border-color:var(--warn);color:var(--warn-ink);}
.notice.notice-danger{background:var(--bad-soft);border-color:var(--bad);color:var(--bad-ink);}
.notice .notice-x{margin:-4px -8px -4px 0;}
.notice + .notice,.notice + .panel,.notice + .grid,.notice + .stats{margin-top:var(--sp-3);}
.page > .notice{margin-bottom:var(--sp-4);}

/* ---- Chip ---- */
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 var(--sp-2);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;
  white-space:nowrap;background:var(--soft);color:var(--ink-2);line-height:1;vertical-align:middle;max-width:100%;}
.chip .ico{width:12px;height:12px;}
.chip-info{background:var(--info-soft);color:var(--info-ink);}
.chip-success{background:var(--good-soft);color:var(--good-ink);}
.chip-warning{background:var(--warn-soft);color:var(--warn-ink);}
.chip-danger{background:var(--bad-soft);color:var(--bad-ink);}
.chip-accent{background:var(--accent-soft);color:var(--accent-ink);}
.chip-brand{background:var(--yellow);color:var(--ink);}
.chip-dark{background:var(--ink);color:var(--on-dark);}
.chip-outline{background:transparent;border:1px solid var(--line);color:var(--ink-2);}
/* Hue, element and rarity: the colour is the datum. A tinted pill with a solid swatch. */
.chip-data{background:color-mix(in srgb,var(--chip) 14%,var(--surface));color:color-mix(in srgb,var(--chip) 55%,var(--ink));}
.chip-data::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--chip);flex:none;}
.chips{display:flex;gap:var(--sp-1);flex-wrap:wrap;align-items:center;}
.hue-0{--chip:var(--hue-0);} .hue-1{--chip:var(--hue-1);} .hue-2{--chip:var(--hue-2);} .hue-3{--chip:var(--hue-3);} .hue-4{--chip:var(--hue-4);}
.hue-5{--chip:var(--hue-5);} .hue-6{--chip:var(--hue-6);} .hue-7{--chip:var(--hue-7);} .hue-8{--chip:var(--hue-8);} .hue-9{--chip:var(--hue-9);}
.element-0{--chip:var(--element-0);} .element-1{--chip:var(--element-1);} .element-2{--chip:var(--element-2);}
.rarity-0{--chip:var(--rarity-0);} .rarity-1{--chip:var(--rarity-1);} .rarity-2{--chip:var(--rarity-2);} .rarity-3{--chip:var(--rarity-3);} .rarity-4{--chip:var(--rarity-4);}
.rarity-5{--chip:var(--rarity-5);} .rarity-6{--chip:var(--rarity-6);} .rarity-7{--chip:var(--rarity-7);} .rarity-8{--chip:var(--rarity-8);}

/* ---- Badge: a count ---- */
.badge{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;border-radius:var(--r-full);font-size:var(--fs-2xs);font-weight:600;
  font-family:var(--font-mono);background:var(--soft);color:var(--ink-2);line-height:1;}
.badge.badge-brand{background:var(--yellow);color:var(--ink);}
.badge.badge-danger{background:var(--red);color:var(--on-dark);}
.badge.badge-success{background:var(--green);color:var(--on-dark);}
.badge.badge-info{background:var(--blue);color:var(--on-dark);}
.rail .badge{background:var(--rail-line);color:var(--on-dark);}
.rail .badge.badge-brand{background:var(--yellow);color:var(--ink);}
.rail .badge.badge-danger{background:var(--red);color:var(--on-dark);}

/* ---- StatusDot ---- */
.dot{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.dot::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--idle);flex:none;}
.dot.dot-good::before{background:var(--good);box-shadow:0 0 0 3px var(--good-soft);}
.dot.dot-warn::before{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);}
.dot.dot-bad::before{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft);}
.dot.dot-info::before{background:var(--info);box-shadow:0 0 0 3px var(--info-soft);}
.dot.pulse::before{animation:mm-pulse 1.6s var(--ease) infinite;}
@keyframes mm-pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

/* ---- Tabs ---- */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs > button,.tabs > a{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3);border:0;background:none;
  color:var(--ink-2);font-weight:600;font-size:var(--fs-md);cursor:pointer;white-space:nowrap;text-decoration:none;}
.tabs > button:hover,.tabs > a:hover{color:var(--ink);text-decoration:none;}
.tabs > .on{color:var(--ink);}
.tabs > .on::after{content:"";position:absolute;left:var(--sp-2);right:var(--sp-2);bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--yellow);}
.tabs.in-panel{padding:0 var(--sp-3);}
.tabs + .panel,.tabs + .stack,.tabs + .grid{margin-top:var(--sp-4);}

/* ---- Segmented ---- */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-md);background:var(--soft);max-width:100%;overflow-x:auto;}
.seg button{height:28px;padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);font-weight:600;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
.seg button:disabled{opacity:0.5;cursor:default;}

/* ---- Buttons: candy, with a darker bottom edge ---- */
.btn{--b-bg:var(--btn-secondary);--b-edge:var(--btn-secondary-edge);--b-ink:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--ctl-md);padding:0 var(--sp-4);
  border:1px solid var(--b-edge);border-bottom-width:var(--edge);border-radius:var(--r-md);background:var(--b-bg);color:var(--b-ink);
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-md);line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;user-select:none;
  transition:transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);}
.btn:hover{filter:brightness(1.04);text-decoration:none;color:var(--b-ink);}
.btn:active:not(:disabled){transform:translateY(1px);border-bottom-width:calc(var(--edge) - 1px);margin-top:1px;}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.btn:disabled,.btn.disabled{opacity:0.45;cursor:not-allowed;filter:none;pointer-events:none;}
.btn .ico{width:16px;height:16px;}
.btn-primary{--b-bg:var(--btn-primary);--b-edge:var(--btn-primary-edge);--b-ink:var(--btn-primary-ink);}
.btn-strong{--b-bg:var(--btn-strong);--b-edge:var(--btn-strong-edge);--b-ink:var(--on-dark);}
.btn-danger{--b-bg:var(--btn-danger);--b-edge:var(--btn-danger-edge);--b-ink:var(--on-dark);}
.btn-quiet{--b-bg:transparent;--b-edge:transparent;--b-ink:var(--ink-2);border-bottom-width:1px;}
.btn-quiet:hover{background:var(--soft);color:var(--ink);filter:none;}
.btn-quiet:active:not(:disabled){border-bottom-width:1px;}
.btn-sm{height:var(--ctl-sm);padding:0 var(--sp-3);font-size:var(--fs-sm);border-radius:var(--r-sm);}
.btn-sm .ico{width:14px;height:14px;}
.btn-lg{height:var(--ctl-lg);padding:0 var(--sp-5);font-size:var(--fs-lg);}
.btn-block{display:flex;width:100%;}
.btn.busy{position:relative;color:transparent;}
.btn.busy::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--b-ink);border-right-color:transparent;border-radius:var(--r-full);animation:mm-spin 0.7s linear infinite;}
@keyframes mm-spin{to{transform:rotate(360deg);}}
.btn-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;}
.btn-row > .grow{flex:1 1 auto;}

/* ---- IconButton ---- */
.icon-btn{display:inline-grid;place-items:center;width:var(--ctl-md);height:var(--ctl-md);padding:0;border:0;border-radius:var(--r-md);background:none;color:var(--ink-2);cursor:pointer;flex:none;}
.icon-btn:hover{background:var(--soft);color:var(--ink);}
.icon-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.icon-btn:disabled{opacity:0.4;cursor:default;}
.icon-btn .ico{width:18px;height:18px;}
.icon-btn.sm{width:var(--ctl-sm);height:var(--ctl-sm);}
.icon-btn.sm .ico{width:15px;height:15px;}
.icon-btn.danger:hover{background:var(--bad-soft);color:var(--bad-ink);}
.rail .icon-btn{color:var(--on-dark-2);}
.rail .icon-btn:hover{background:var(--rail-hover);color:var(--on-dark);}

/* ---- Field, inputs ---- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field > .lbl{font-weight:600;font-size:var(--fs-sm);color:var(--ink);}
.field > .lbl .req{color:var(--red);margin-left:2px;}
.field > .lbl .opt{color:var(--muted);font-weight:400;}
.field .help{font-size:var(--fs-xs);color:var(--muted);}
.field .error{font-size:var(--fs-xs);color:var(--bad-ink);font-weight:600;}
.field input:not([type=checkbox]):not([type=radio]),.field textarea,.input{width:100%;height:var(--ctl-md);padding:0 var(--sp-3);border:1px solid var(--line-strong);
  border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-size:var(--fs-md);transition:border-color var(--t-fast),box-shadow var(--t-fast);}
.field textarea{height:auto;min-height:90px;padding:var(--sp-2) var(--sp-3);resize:vertical;line-height:1.45;}
.field input:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--mm-border-focus);box-shadow:var(--focus-ring);}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);}
.field input:disabled,.field textarea:disabled{background:var(--soft);color:var(--muted);}
.field input.invalid,.field input[aria-invalid=true]{border-color:var(--bad);}
.field.inline{flex-direction:row;align-items:center;gap:var(--sp-2);}
.field.inline > .lbl{font-weight:400;color:var(--ink-2);}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}
.form-grid .span-2{grid-column:1 / -1;}
@media (max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr);}}
.form{display:flex;flex-direction:column;gap:var(--sp-4);}
.validation-message{font-size:var(--fs-xs);color:var(--bad-ink);}

/* ---- SearchField ---- */
.search{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--ctl-md);padding:0 var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--muted);min-width:220px;max-width:100%;}
.search:focus-within{border-color:var(--mm-border-focus);box-shadow:var(--focus-ring);}
.search input{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;outline:none;color:var(--ink);font-size:var(--fs-md);}
.search input::-webkit-search-cancel-button{display:none;}
.search .ico{width:16px;height:16px;}
.search.wide{min-width:320px;}
@media (max-width:560px){.search,.search.wide{min-width:0;flex:1 1 100%;}}

/* ---- Picker (every dropdown) ---- */
.picker{position:relative;display:inline-flex;min-width:160px;max-width:100%;}
.field .picker{display:flex;width:100%;}
.picker-btn{display:flex;align-items:center;gap:var(--sp-2);width:100%;height:var(--ctl-md);padding:0 var(--sp-2) 0 var(--sp-3);border:1px solid var(--line-strong);
  border-radius:var(--r-md);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;font-size:var(--fs-md);}
.picker-btn:hover{border-color:var(--ink-2);}
.picker-btn:focus-visible,.picker.open .picker-btn{outline:none;border-color:var(--mm-border-focus);box-shadow:var(--focus-ring);}
.picker-btn:disabled{background:var(--soft);color:var(--muted);cursor:default;}
.picker-btn.is-empty .picker-val{color:var(--muted);}
.picker-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.picker-chev{width:14px;height:14px;color:var(--muted);flex:none;}
.picker.sm .picker-btn{height:var(--ctl-sm);font-size:var(--fs-sm);}
.picker-scrim{position:fixed;inset:0;z-index:40;}
.pop{position:absolute;z-index:41;top:calc(100% + 4px);left:0;min-width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden;}
.pop-search{padding:var(--sp-2);border-bottom:1px solid var(--line-soft);}
.pop-search input{width:100%;height:30px;padding:0 var(--sp-2);border:1px solid var(--line);border-radius:var(--r-sm);outline:none;font-size:var(--fs-sm);}
.pop-search input:focus{border-color:var(--mm-border-focus);}
.pop-list{max-height:300px;overflow-y:auto;padding:var(--sp-1);}
.pop-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:7px var(--sp-2);border:0;border-radius:var(--r-sm);background:none;color:var(--ink);
  text-align:left;cursor:pointer;font-size:var(--fs-md);text-decoration:none;}
.pop-item:hover,.pop-item.cursor{background:var(--soft);text-decoration:none;color:var(--ink);}
.pop-item.selected{font-weight:600;}
.pop-item .pop-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.pop-item .pop-text span{font-size:var(--fs-xs);color:var(--muted);font-weight:400;}
.pop-item .tick{width:14px;height:14px;color:var(--green);flex:none;}
.pop-empty{padding:var(--sp-3);color:var(--muted);font-size:var(--fs-sm);}
.pop-head{padding:var(--sp-2) var(--sp-2) var(--sp-1);font-family:var(--font-label);font-weight:600;font-size:var(--fs-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}

/* ---- Switch ---- */
.switch{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;user-select:none;font-size:var(--fs-md);}
.switch input{position:absolute;opacity:0;width:1px;height:1px;}
.switch .track{position:relative;width:38px;height:22px;border-radius:var(--r-full);background:var(--line-strong);transition:background var(--t) var(--ease);flex:none;}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:var(--r-full);background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease);}
.switch input:checked + .track{background:var(--green);}
.switch input:checked + .track::after{transform:translateX(16px);}
.switch input:focus-visible + .track{box-shadow:var(--focus-ring);}
.switch input:disabled + .track{opacity:0.5;}
.switch .switch-label{color:var(--ink-2);}

/* ---- Dialog ---- */
.dlg-scrim{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--sp-4);background:var(--scrim);animation:mm-fade var(--t) var(--ease);}
.dlg{width:100%;max-width:480px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);outline:none;animation:mm-rise var(--t-slow) var(--ease-out);overflow:hidden;}
.dlg.s{max-width:380px;} .dlg.m{max-width:560px;} .dlg.l{max-width:820px;} .dlg.xl{max-width:1100px;}
.dlg-head{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5) var(--sp-3);border-bottom:1px solid var(--line-soft);}
.dlg-head h3{flex:1 1 auto;font-family:var(--font-display);font-style:italic;font-weight:800;font-size:var(--fs-xl);text-transform:uppercase;line-height:1.15;}
.dlg-head .dlg-sub{margin-top:2px;color:var(--muted);font-size:var(--fs-sm);}
.dlg.danger .dlg-head{border-top:4px solid var(--red);}
.dlg.danger .dlg-head .ico{color:var(--red);}
.dlg-body{padding:var(--sp-4) var(--sp-5);overflow-y:auto;flex:1 1 auto;}
.dlg-body.flush{padding:0;}
.dlg-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--line-soft);background:var(--page);flex-wrap:wrap;}
.dlg-x{margin:-4px -8px 0 0;}
@keyframes mm-fade{from{opacity:0;}}
@keyframes mm-rise{from{opacity:0;transform:translateY(10px) scale(0.98);}}
.confirm-type{margin-top:var(--sp-3);}
.confirm-type code{font-weight:600;}

/* ---- Toasts ---- */
.toast-wrap{position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:80;display:flex;flex-direction:column;gap:var(--sp-2);max-width:min(420px,calc(100vw - 32px));}
.toast{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--ink);color:var(--on-dark);
  box-shadow:var(--shadow-lg);font-weight:600;font-size:var(--fs-md);animation:mm-rise var(--t-slow) var(--ease-out);border-left:5px solid var(--blue);}
.toast .ico{width:18px;height:18px;margin-top:1px;flex:none;}
.toast .toast-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.toast.toast-success{border-left-color:var(--green);} .toast.toast-success .ico{color:var(--green);}
.toast.toast-danger{border-left-color:var(--red);} .toast.toast-danger .ico{color:var(--red);}
.toast.toast-warning{border-left-color:var(--yellow);} .toast.toast-warning .ico{color:var(--yellow);}
.toast.toast-info .ico{color:var(--blue);}
.toast .icon-btn{width:24px;height:24px;color:var(--on-dark-2);}
.toast .icon-btn:hover{background:var(--rail-hover);color:var(--on-dark);}

/* ---- Flag: the country code on a plate ---- */
.flag{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:18px;padding:0 4px;border:1px solid var(--line);border-radius:var(--r-xs);
  background:var(--surface);font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-2);letter-spacing:0.04em;line-height:1;vertical-align:middle;
  box-shadow:inset 3px 0 0 var(--blue);}
.flag.none{box-shadow:none;color:var(--muted);}

/* ---- Avatar ---- */
.avatar{--av:var(--hue-0);display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-full);
  background:var(--av);color:var(--on-dark);font-family:var(--font-display);font-style:italic;font-weight:800;font-size:15px;text-transform:uppercase;line-height:1;
  box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--av) 70%,var(--ink));}
.avatar.sm{width:26px;height:26px;font-size:12px;}
.avatar.lg{width:56px;height:56px;font-size:24px;}
.avatar.xl{width:72px;height:72px;font-size:30px;}
.avatar.square{border-radius:var(--r-md);}
.avatar.hue-0{--av:var(--hue-0);} .avatar.hue-1{--av:var(--hue-1);} .avatar.hue-2{--av:var(--hue-2);} .avatar.hue-3{--av:var(--hue-3);} .avatar.hue-4{--av:var(--hue-4);}
.avatar.hue-5{--av:var(--hue-5);} .avatar.hue-6{--av:var(--hue-6);} .avatar.hue-7{--av:var(--hue-7);} .avatar.hue-8{--av:var(--hue-8);} .avatar.hue-9{--av:var(--hue-9);}
.avatar.bot{--av:var(--idle);}

/* ---- Countdown ---- */
.countdown{display:inline-flex;align-items:baseline;gap:var(--sp-1);font-family:var(--font-mono);font-size:var(--fs-sm);white-space:nowrap;}
.countdown.soon{color:var(--bad-ink);}
.countdown.past{color:var(--muted);}

/* ---- ProgressBar ---- */
.progress{display:flex;flex-direction:column;gap:4px;min-width:80px;}
.progress-top{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-2);}
.progress-track{height:8px;border-radius:var(--r-full);background:var(--soft);overflow:hidden;}
.progress.sm .progress-track{height:5px;}
.progress-fill{height:100%;border-radius:var(--r-full);background:var(--blue);transition:width var(--t-slow) var(--ease);}
.progress.tone-good .progress-fill{background:var(--green);}
.progress.tone-warn .progress-fill{background:var(--yellow);}
.progress.tone-bad .progress-fill{background:var(--red);}
.progress.tone-brand .progress-fill{background:repeating-linear-gradient(-45deg,var(--yellow) 0 8px,var(--mm-yellow-300) 8px 16px);}

/* ---- Timeline: a feed of events (Timeline, TimelineItem) ---- */
.timeline{list-style:none;margin:0;padding:0;}
.timeline > li{display:grid;grid-template-columns:120px 118px minmax(0,1fr) auto;gap:var(--sp-3);align-items:start;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--line-soft);font-size:var(--fs-md);}
.timeline > li:last-child{border-bottom:0;}
.timeline > li:hover{background:var(--hover);}
.timeline .tl-time{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);padding-top:3px;white-space:nowrap;}
.timeline .tl-body{min-width:0;overflow-wrap:anywhere;}
.timeline .tl-body details{margin-top:var(--sp-1);}
.timeline .tl-body summary{cursor:pointer;color:var(--link);font-size:var(--fs-xs);}
.timeline .tl-body pre{margin:var(--sp-1) 0 0;padding:var(--sp-2);background:var(--soft);border-radius:var(--r-sm);font-size:var(--fs-xs);white-space:pre-wrap;max-height:260px;overflow:auto;}
.timeline.compact > li{grid-template-columns:120px minmax(0,1fr);padding:6px var(--sp-3);font-size:var(--fs-sm);}
.timeline.no-kind > li{grid-template-columns:120px minmax(0,1fr) auto;}
@media (max-width:720px){.timeline > li,.timeline.no-kind > li{grid-template-columns:minmax(0,1fr);gap:2px;}}

/* ---- Messages (a chat feed with moderation) ---- */
.msgs{list-style:none;margin:0;padding:0;max-height:520px;overflow-y:auto;}
.msgs > li{display:flex;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--line-soft);align-items:flex-start;}
.msgs > li.sys{color:var(--muted);font-style:italic;font-size:var(--fs-sm);}
.msgs .msg-body{flex:1 1 auto;min-width:0;}
.msgs .msg-who{font-weight:600;}
.msgs .msg-meta{color:var(--muted);font-size:var(--fs-xs);margin-left:var(--sp-1);}
.msgs .msg-text{overflow-wrap:anywhere;}

/* ---- Command palette ---- */
.palette .dlg-body{padding:0;}
.palette-field{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);}
.palette-field .ico{width:18px;height:18px;color:var(--muted);}
.palette-field input{flex:1 1 auto;border:0;outline:none;background:none;font-size:var(--fs-lg);min-width:0;}
.palette-list{max-height:min(440px,60vh);overflow-y:auto;padding:var(--sp-2);}
.palette-list .pop-item .ico{color:var(--muted);}
.palette-list .pop-item.cursor{background:var(--selected);}
.palette-list .pop-item.cursor .ico{color:var(--ink);}
.palette-keys{display:flex;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--line-soft);font-size:var(--fs-xs);color:var(--muted);background:var(--page);flex-wrap:wrap;}

/* ---- Swatch (the gallery's token samples) ---- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3);}
.swatch{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);font-size:var(--fs-xs);}
.swatch-color{height:52px;border-bottom:1px solid var(--line-soft);}
.swatch-meta{padding:var(--sp-2);display:flex;flex-direction:column;gap:1px;}
.swatch-meta b{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-xs);color:var(--ink);overflow-wrap:anywhere;}
.swatch-meta span{color:var(--muted);}
.sample-box{display:grid;place-items:center;min-height:64px;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:var(--page);font-size:var(--fs-xs);color:var(--muted);}

/* ---- Monster cards (CardTile): a card thumbnail framed in its element's colour, its rarity on a ribbon ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--sp-3);}
.card-tile{--el:var(--line);display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--el);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);min-width:0;}
.card-tile.element-0{--el:var(--element-0);} .card-tile.element-1{--el:var(--element-1);} .card-tile.element-2{--el:var(--element-2);}
.card-art{position:relative;aspect-ratio:130/174;background:var(--soft);display:grid;place-items:center;overflow:hidden;}
.card-art img{width:100%;height:100%;object-fit:cover;display:block;}
.card-art .card-ph{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:var(--fs-3xl);color:var(--el);opacity:0.7;text-transform:uppercase;}
.card-rarity{position:absolute;top:var(--sp-1);left:var(--sp-1);}
.card-marks{position:absolute;top:var(--sp-1);right:var(--sp-1);display:flex;flex-direction:column;gap:2px;align-items:flex-end;}
.card-body{padding:var(--sp-2);display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);min-width:0;}
.card-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-stats{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);}
.card-meta{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}