/* Ease-of-use layer for the Operate and Review pages (ux_ops.js, ops_pages_ui.js). Uses only the kit's --ui-* tokens,
   so it follows Grove and every other style. */

/* ---- Start-here card ---- */
.uxo-guide{margin:0 0 var(--ui-gap);display:grid;gap:14px;font-family:var(--ui-font)}
.uxo-guide-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start;justify-content:space-between}
.uxo-guide-main{flex:1 1 380px;min-width:0}
.uxo-guide h2{margin:4px 0 4px;font-size:var(--ui-card-title);color:var(--ui-ink);display:flex;align-items:center;gap:8px}
.uxo-kicker{margin:0}
.uxo-what{margin:0;color:var(--ui-muted);font-size:14px;line-height:1.5;max-width:68ch}
.uxo-status{flex:0 1 340px;min-width:0;display:grid;gap:6px;padding:12px 14px;border-radius:var(--ui-radius-field);background:var(--ui-field);border:1px solid var(--ui-field-line);border-left:3px solid var(--ui-muted)}
.uxo-status[data-kind=ok]{border-left-color:var(--ui-ok)}
.uxo-status[data-kind=warn]{border-left-color:var(--ui-warn)}
.uxo-status[data-kind=danger]{border-left-color:var(--ui-danger)}
.uxo-status[data-kind=unknown]{border-left:3px dashed var(--ui-unknown)}
.uxo-status-word .ui-badge{font-size:13px}
.uxo-status-todo{font-size:13px;color:var(--ui-ink);line-height:1.45}
.uxo-guide-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.uxo-guide-actions .ui-button{min-height:40px}
.uxo-guide-body[hidden]{display:none}
.uxo-guide-body{display:grid;gap:14px}
.uxo-steps li .ui-button{min-height:36px}
.uxo-terms-label{margin:0 0 6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted)}
.uxo-term-list{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.uxo-term{border:1px solid var(--ui-field-line);background:var(--ui-field);border-radius:var(--ui-radius-field);max-width:100%}
.uxo-term summary{cursor:pointer;padding:6px 12px;font-size:13px;color:var(--ui-ink);list-style:none;min-height:32px;display:flex;align-items:center;gap:6px}
.uxo-term summary::-webkit-details-marker{display:none}
.uxo-term summary::after{content:'?';display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:700;border:1px solid var(--ui-line);color:var(--ui-muted)}
.uxo-term[open]{flex-basis:100%}
.uxo-term[open] summary::after{content:'\2212'}
.uxo-term p{margin:0;padding:0 12px 10px;font-size:13px;line-height:1.5;color:var(--ui-muted);max-width:70ch}
.uxo-term summary:focus-visible,.uxo-q:focus-visible,.uxo-copy:focus-visible,.uxo-filter input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

/* ---- "?" help next to headings ---- */
.uxo-q{display:inline-grid;place-items:center;width:22px;height:22px;min-width:22px;padding:0!important;margin-left:6px;vertical-align:middle;border-radius:50%!important;border:1px solid var(--ui-line)!important;background:transparent!important;color:var(--ui-muted)!important;font:700 11px/1 var(--ui-font);cursor:help;box-shadow:none!important}
.uxo-q:hover,.uxo-q[aria-expanded=true]{color:var(--ui-accent-ink)!important;background:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
th .uxo-q{width:18px;height:18px;min-width:18px;font-size:10px;margin-left:4px}
.uxo-tip{position:absolute;z-index:1000;display:grid;gap:4px;padding:12px 14px;border-radius:var(--ui-radius-field);background:var(--ui-card);border:1px solid color-mix(in srgb,var(--ui-accent) 35%,var(--ui-card-line));color:var(--ui-ink);font:13px/1.5 var(--ui-font);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.uxo-tip[hidden]{display:none}
.uxo-tip b{font-size:13px}
.uxo-tip span{color:var(--ui-muted)}

/* ---- Table filter ---- */
.uxo-filter{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px var(--ui-pad,16px) 4px}
.uxo-filter input{flex:1 1 220px;max-width:360px;min-height:38px}
.uxo-filter-count{font-size:12px;color:var(--ui-muted)}

/* ---- Highlight where a step points ---- */
.uxo-flash{animation:uxo-flash 1.6s ease-out}
@keyframes uxo-flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ui-accent) 70%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
@media (prefers-reduced-motion:reduce){.uxo-flash{animation:none;outline:2px solid var(--ui-accent)}}

/* ---- Shared bits for the rebuilt pages (ops_pages_ui.js) ---- */
.uxo-page{display:grid;gap:var(--ui-gap);font-family:var(--ui-font);color:var(--ui-ink)}
.uxo-page h2{font-size:var(--ui-card-title);margin:0}
.uxo-page .ui-card-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.uxo-page .ui-card-head p{margin:2px 0 0;color:var(--ui-muted);font-size:13px}
.uxo-grid-2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--ui-gap)}
.uxo-form{display:grid;gap:12px}
.uxo-form label{display:grid;gap:6px;font-size:13px;color:var(--ui-ink)}
.uxo-form .uxo-hint{margin:-6px 0 0;font-size:12.5px;color:var(--ui-muted);line-height:1.45}
.uxo-copyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.uxo-copyrow code,.uxo-copyrow input{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;font-family:var(--ui-num,inherit);font-size:12.5px;padding:8px 10px;border-radius:var(--ui-radius-field);background:var(--ui-field);border:1px solid var(--ui-field-line);color:var(--ui-ink)}
.uxo-secret{display:grid;gap:10px;padding:14px;border-radius:var(--ui-radius-field);border:1px solid color-mix(in srgb,var(--ui-warn) 45%,transparent);background:color-mix(in srgb,var(--ui-warn) 8%,var(--ui-card))}
.uxo-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.uxo-item{display:grid;gap:10px;padding:14px;border-radius:var(--ui-radius-field);background:var(--ui-field);border:1px solid var(--ui-field-line)}
.uxo-item-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.uxo-item-head b{font-size:15px}
.uxo-item-meta{font-size:12.5px;color:var(--ui-muted)}
.uxo-row-actions{display:flex;flex-wrap:wrap;gap:8px}
.uxo-steps-inline{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ui-muted);font-size:13.5px;line-height:1.5}
.uxo-steps-inline b{color:var(--ui-ink)}
.uxo-pre{margin:0;max-height:340px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px;padding:12px;border-radius:var(--ui-radius-field);background:var(--ui-field);border:1px solid var(--ui-field-line);color:var(--ui-ink)}
.uxo-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.uxo-toolbar input[type=search]{flex:1 1 220px;max-width:380px;min-height:38px}
.uxo-muted{color:var(--ui-muted);font-size:13px}
.uxo-note-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:14px;line-height:1.55}
.uxo-service{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--ui-radius-field);background:var(--ui-field);border:1px solid var(--ui-field-line)}
.uxo-service p{margin:2px 0 0;font-size:12.5px;color:var(--ui-muted)}
.uxo-hero-tool{display:grid;gap:12px;justify-items:start}
.uxo-hero-tool ol{margin:0}
.uxo-event-detail{max-width:46ch;overflow-wrap:anywhere;color:var(--ui-muted);font-size:12.5px}

/* ---- Narrow screens ---- */
@media (max-width:760px){
  .uxo-grid-2{grid-template-columns:minmax(0,1fr)}
  .uxo-guide{padding:16px}
  .uxo-status{flex-basis:100%}
  .uxo-guide-actions .ui-button{flex:1 1 auto;justify-content:center;text-align:center}
  .uxo-filter{padding-inline:12px}
}
.uxo-steps li{flex-wrap:nowrap}
.uxo-steps .ui-list-main{flex:1 1 auto}
.uxo-steps li>.ui-button{flex:none;margin-left:auto}
.uxo-guide-head .uxo-guide-main:only-child{flex-basis:100%}
@media (max-width:760px){.uxo-guide-actions .ui-button-quiet{flex:0 1 auto}}
/* Tables that become stacked cards on phones (cells carry data-label). */
@media (max-width:760px){
  .uxo-stack table,.uxo-stack tbody,.uxo-stack tr,.uxo-stack td{display:block;width:100%}
  .uxo-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .uxo-stack tr{padding:10px 0;border-bottom:1px solid var(--ui-line)}
  .uxo-stack tr[hidden]{display:none}
  .uxo-stack td{border:0!important;padding:2px 0!important;white-space:normal!important;max-width:none!important}
  .uxo-stack td[data-label]::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted)}
  .uxo-stack .truncate{overflow-wrap:anywhere}
  /* Each row is a card: the first column is its title, every other value sits beside its label. */
  .uxo-stack{overflow:visible!important}
  .uxo-stack tbody{display:grid!important;gap:10px;padding:10px 12px}
  .uxo-stack tr{padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-md,14px);background:color-mix(in srgb,var(--ui-ink) 3%,transparent)}
  .uxo-stack td[data-label]{display:flow-root!important;padding:6px 0!important;overflow-wrap:anywhere}
  .uxo-stack td[data-label]::before{float:left;width:36%;min-width:84px;margin:0 10px 2px 0;line-height:1.6}
  .uxo-stack td[data-label]+td[data-label]{border-top:1px solid color-mix(in srgb,var(--ui-line) 60%,transparent)!important}
  .uxo-stack td:first-child{display:block!important;padding:0 0 6px!important;font-size:15px}
  .uxo-stack td:first-child::before{display:none}
  .uxo-stack td .button-row,.uxo-stack td .uxo-row-actions{display:flex;flex-wrap:wrap;gap:6px}
  .uxo-event-detail{max-width:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
/* Slim strip for pages without setup steps */
.uxo-guide-slim{padding:12px 16px;gap:10px}
.uxo-slim-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.uxo-slim-status{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;flex:1 1 260px;min-width:0;font-size:13px;color:var(--ui-muted)}
.uxo-slim-status>span:last-child{color:var(--ui-ink)}
.uxo-guide-slim .uxo-guide-body{padding-top:4px}
/* Folded sections (ServeUxOps.fold): reference notes and rarely used tools, one click away. */
.uxo-fold{padding:0!important;margin:var(--ui-gap,16px) 0 0}
.uxo-fold>summary{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding:14px 18px;cursor:pointer;list-style:none;border-radius:inherit}
.uxo-fold>summary::-webkit-details-marker{display:none}
.uxo-fold>summary::before{content:'';flex:none;align-self:center;width:7px;height:7px;margin-right:2px;border-right:2px solid var(--ui-accent);border-bottom:2px solid var(--ui-accent);transform:rotate(-45deg);transition:transform .15s}
.uxo-fold[open]>summary::before{transform:rotate(45deg)}
.uxo-fold>summary:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.uxo-fold-title{font-weight:700;color:var(--ui-ink)}
.uxo-fold-hint{flex:1 1 220px;color:var(--ui-muted);font-size:13px}
.uxo-fold-body{padding:0 18px 16px;display:grid;gap:12px;min-width:0}
.uxo-fold-body>.panel,.uxo-fold-body>section.panel{margin:0}
.uxo-fold-group{display:grid;gap:10px}
.uxo-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:8px 0;font-size:13.5px}
.uxo-kv dt{color:var(--ui-muted)}.uxo-kv dd{margin:0;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.uxo-fold>summary::before{transition:none}}
@media (max-width:760px){.uxo-fold>summary{padding:12px 14px}.uxo-fold-body{padding:0 12px 12px}.uxo-kv{grid-template-columns:minmax(0,1fr)}.uxo-kv dd{margin-bottom:6px}}
.uxo-safety-line{margin:0 0 var(--ui-gap,16px);font-size:13.5px}
.uxo-section-title{margin:calc(var(--ui-gap,16px) * 1.5) 0 0;font-size:15px;font-weight:700;color:var(--ui-ink)}
/* Disclosures inside older panels match the kit size (some rendered at body-heading size). */
#content .panel details>summary{font-size:13.5px;font-weight:600;cursor:pointer}
/* Two-column forms squeezed selects to a few letters at phone width; one column below 480 px. */
@media (max-width:480px){#content .form-grid{grid-template-columns:minmax(0,1fr)!important}}