/* Admin → settings screens: cards per topic, each saving by itself (see admin-settings.js).
   Flat 1px surfaces on --bg2 like Dissemination and the stats pages; text and control sizes
   come from the shared roles in typography.css / controls.css. */

.aset-page{max-width:1120px}
.aset-head{margin:6px 0 16px}
.aset-head h2{margin:0;font-size:var(--ui-title);font-weight:700;letter-spacing:-.01em}
.aset-head p{margin:3px 0 0;font-size:var(--ui-label);color:var(--text3)}

.aset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.aset-card{min-width:0;padding:14px 16px 16px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-md)}
.aset-card.wide{grid-column:1/-1}
.aset-card-h{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 12px}
.aset-card-h h3{margin:0;padding:0;border:0;font-size:var(--ui-section);font-weight:650;color:var(--text);margin-right:auto}
.aset-card-h p{flex-basis:100%;margin:0;max-width:none;font-size:var(--ui-caption);line-height:1.45;color:var(--text3)}

/* Saving state: next to the card title, announced politely, gone after a moment. */
.aset-st{min-height:1em;font-size:var(--ui-caption);font-variant-numeric:tabular-nums;color:var(--text3)}
.aset-st.ok{color:var(--green-ink,var(--green))}
.aset-st.err{color:var(--red);font-weight:600}
.aset-st.busy::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;border:1.5px solid var(--text3);border-right-color:transparent;vertical-align:-1px;animation:aset-spin .8s linear infinite}
@keyframes aset-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.aset-st.busy::before{animation:none}}

.aset-fields{display:flex;flex-direction:column;gap:14px}
.aset-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.aset-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.aset-lab{font-size:var(--ui-label);font-weight:500;color:var(--text2)}
.aset-opt{font-weight:400;color:var(--text3)}
.aset-hint{font-size:var(--ui-caption);line-height:1.45;color:var(--text3)}
.aset-card .form-input{width:100%;min-width:0}
.aset-card .aset-narrow{max-width:140px}
.aset-sub{margin:16px 0 4px;font-size:var(--ui-label);font-weight:600;color:var(--text2)}
.aset-swatches{display:flex;gap:8px;flex-wrap:wrap}

.aset-logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aset-logo-box{width:64px;height:64px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--bg3)}
.aset-logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.aset-logo-box span{font-size:var(--ui-caption);color:var(--text3)}
.aset-logo-actions{display:flex;flex-direction:column;gap:6px}
.aset-logo-actions .btn{width:fit-content;cursor:pointer}
.aset-danger{color:var(--red)}

/* Characterization rules: two columns when the card is wide. */
.aset-card.wide .modlock-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 32px}
.aset-card .modlock-name{width:auto;flex:1 1 90px;min-width:0}

/* The lists that already render their own rows (vial types, solvents) sit flush in the card. */
.aset-card #admin-vial-types-list,.aset-card #admin-custom-solvents-list{min-width:0}

@media (max-width:1100px){
  .aset-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .aset-pair{grid-template-columns:minmax(0,1fr)}
}

/* Slack status: the Configuration card and the Admin → Slack block. */
.slk-note{margin:0 0 10px;font-size:var(--ui-body);line-height:1.5;color:var(--text2)}
.slk-small{font-size:var(--ui-caption);color:var(--text3)}
.slk-bad{color:var(--red)}
.slk-head{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--ui-body);color:var(--text)}
.slk-head .aset-st{margin-left:auto}
.slk-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--border2)}
.slk-dot.ok{background:var(--green)}
.slk-dot.bad{background:var(--red)}
.slk-kinds{display:flex;gap:6px 18px;flex-wrap:wrap;margin:0 0 8px}
.slk-check{display:inline-flex;align-items:center;gap:7px;font-size:var(--ui-body);cursor:pointer}
.slk-admin-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.slk-state{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:var(--ui-body);color:var(--text2)}
.slk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.slk-sub{margin:16px 0 6px;font-size:var(--ui-label);font-weight:600;color:var(--text2)}
.slk-people{display:flex;flex-direction:column;gap:2px;border:1px solid var(--border2);border-radius:var(--r-md);background:var(--bg2);padding:4px 12px}
.slk-person{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:var(--ui-body);border-bottom:1px solid var(--border2)}
.slk-person:last-child{border-bottom:0}
.slk-muted{color:var(--text3);font-size:var(--ui-caption)}
@media (max-width:640px){.slk-grid{grid-template-columns:minmax(0,1fr)}}

/* Where "Set up Slack" lands: the card flashes once so the eye finds it. */
.slk-flash{animation:slk-flash var(--mo-flash) var(--mo-io);border-radius:var(--r-md)}
@keyframes slk-flash{0%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}100%{box-shadow:0 0 0 3px transparent;background:transparent}}
@media (prefers-reduced-motion:reduce){.slk-flash{animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}}

/* Configuration → Slack: the wording of each automatic status */
.slk-words{margin:10px 0 4px}
.slk-word{display:grid;grid-template-columns:110px 40px minmax(0,1fr) auto;gap:6px 8px;align-items:center;margin-bottom:8px}
.slk-word-k{font-size:var(--ui-body);color:var(--text2)}
.slk-word-pick{grid-column:1 / -1}
.slk-word-eb{width:40px;height:40px}
.slk-word-p{grid-column:2 / -1;font-size:var(--ui-caption,12px);color:var(--text3)}
@media (max-width:620px){.slk-word{grid-template-columns:40px minmax(0,1fr) auto}.slk-word-k{grid-column:1 / -1}.slk-word-p{grid-column:1 / -1}}
.cfg-day-check{position:relative;cursor:pointer}
.cfg-day-check input{position:absolute;opacity:0;pointer-events:none}
.cfg-day-check span{display:grid;place-items:center;min-width:34px;height:28px;padding:0 7px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--bg);color:var(--text2);font-size:var(--ui-action);font-weight:600}
.cfg-day-check input:checked+span{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:color-mix(in srgb,var(--accent) 12%,var(--bg));color:var(--accent-ink)}
.cfg-day-check input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.cfg-day-check input:disabled+span{cursor:not-allowed}
@media(max-width:820px){.cfg-day-check span{min-width:42px;height:44px}}

/* Admin → Files & disk */
.stor-intro{margin:-5px 0 14px;color:var(--text3);font-size:var(--ui-body);line-height:1.5}
.stor-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stor-chart-card{min-width:0;padding:13px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2)}
.stor-chart-title{font-size:var(--ui-label);font-weight:650;color:var(--text2);margin-bottom:8px}
.stor-chart-canvas{position:relative;height:210px;min-width:0}
.stor-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--bg2)}
.stor-metrics>div{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.stor-metrics>div:nth-child(3n){border-right:0}.stor-metrics>div:nth-child(n+4){border-bottom:0}
.stor-metrics span,.stor-metrics small{color:var(--text3);font-size:var(--ui-caption)}.stor-metrics strong{font-size:var(--ui-section);color:var(--text)}
.stor-full-link{margin:12px 0 0;font-size:var(--ui-body)}.stor-note{margin:8px 0 0;color:var(--text3);font-size:var(--ui-caption);line-height:1.55}
@media(max-width:820px){
  .stor-chart-grid{grid-template-columns:minmax(0,1fr)}
  .stor-chart-card{padding:12px}.stor-chart-canvas{height:290px}
  .stor-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stor-metrics>div,.stor-metrics>div:nth-child(3n){border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
  .stor-metrics>div:nth-child(even){border-right:0}.stor-metrics>div:nth-child(n+5){border-bottom:0}
}