/* Appearance: the menu row and its dialog (the dialog's shell is in forms.css). Previews carry
   data-scheme / data-theme / data-font / data-style so they draw with a choice's own tokens whatever
   is applied to the page. */
.set-row{text-decoration:none;display:flex;align-items:center;gap:0.625rem;width:100%;box-sizing:border-box;padding:0.4375rem 0.625rem;border:0;border-radius:var(--control-radius);background:none;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink-2);text-align:left;cursor:pointer}
.set-row small{display:block;font-weight:var(--fw-medium);font-size:var(--fs-xs);color:var(--muted)}

.appearance{width:min(var(--w-dialog),calc(100vw - 2rem));max-height:calc(100dvh - 2rem);box-sizing:border-box;padding:0;overflow:hidden}
.appearance[open]{display:flex}
#appearance-form{display:flex;flex-direction:column;min-height:0;width:100%}
.ap-head{gap:var(--space-3);padding:var(--space-4) var(--space-4) 0}
.ap-head h3{margin:0;font-size:var(--fs-2xl);font-weight:var(--fw-bold)}
.ap-lede{margin:var(--space-1) var(--space-4) 0;color:var(--muted);font-size:var(--fs-md)}
.ap-body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-2) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}
.ap-group{border:0;margin:0;padding:0;min-width:0}
.ap-group legend{padding:0;margin-bottom:var(--space-2);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--ink)}
.ap-actions{margin:0;padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);justify-content:space-between;align-items:center}

/* Option cards: one grid per group */
.ap-options{display:grid;gap:var(--space-2)}
.ap-mode,.ap-density{grid-template-columns:repeat(3,1fr)}
.ap-font{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.ap-scheme{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.ap-style{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:35em){
  .appearance{width:calc(100vw - 2rem)}
  .ap-mode{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ap-mode .ap-note{display:none}
  .ap-density{grid-template-columns:repeat(3,1fr)}
  .ap-font{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-scheme,.ap-style{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ap-card{display:block;position:relative;cursor:pointer}
.ap-card[data-font]{font-family:var(--font)}
.ap-face{display:flex;flex-direction:column;gap:var(--space-1);height:100%;box-sizing:border-box;padding:var(--space-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);transition:background .12s,border-color .12s}
.ap-card:hover .ap-face{border-color:var(--ink-2)}
.ap-radio:checked + .ap-face{background:var(--accent-wash);border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--accent-ink)}
.ap-radio:focus-visible + .ap-face{outline:3px solid var(--focus);outline-offset:2px}
.ap-name{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--ink);padding-right:1.25rem}
.ap-note{font-size:var(--fs-sm);color:var(--muted);line-height:1.35}
.ap-check{position:absolute;top:var(--space-2);right:var(--space-2);width:1.125rem;height:1.125rem;box-sizing:border-box;padding:2px;border-radius:var(--radius-round);background:var(--accent-ink);color:var(--surface-2);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;scale:.6;transition:opacity .12s,scale .12s}
.ap-radio:checked + .ap-face .ap-check{opacity:1;scale:1}
/* The check sits over the preview, so give it its own backing */
.ap-mode .ap-check,.ap-density .ap-check,.ap-scheme .ap-check,.ap-style .ap-check{top:calc(var(--space-2) + .35rem);right:calc(var(--space-2) + .35rem);box-shadow:0 0 0 2px var(--surface-2)}
@media (prefers-reduced-motion:reduce){.ap-face,.ap-check{transition:none}}

/* Mode previews: a small window in the chosen mode; System is split on the diagonal */
.ap-split{position:relative;display:block}
.ap-mock{display:block;overflow:hidden;aspect-ratio:12 / 5;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)}
.ap-half{position:absolute;inset:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ap-bar{display:block;height:.5rem;background:var(--band)}
.ap-tile{display:block;margin:.4rem;padding:.35rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-1)}
.ap-tile b{display:block;height:.25rem;margin-bottom:.25rem;border-radius:var(--radius-pill);background:var(--ink)}
.ap-tile b + b{width:55%;margin-bottom:0;background:var(--accent)}
/* Font previews */
.ap-aa{font-family:var(--font);font-size:var(--fs-5xl);line-height:1.1;font-weight:var(--fw-medium);letter-spacing:-.01em;color:var(--ink)}
/* Density previews: rows at the density's own height, in a window of fixed size */
.ap-table{display:flex;flex-direction:column;height:4.25rem;overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)}
.ap-table i{position:relative;display:block;flex:none;height:calc(var(--pad-cell-y) * 2 + 0.5rem);border-bottom:1px solid var(--line);background:var(--surface-2)}
.ap-table i::before,.ap-table i::after{content:"";position:absolute;top:50%;height:0.25rem;margin-top:-0.125rem;border-radius:var(--radius-pill);background:var(--muted)}
.ap-table i::before{left:0.5rem;width:38%}
.ap-table i::after{left:52%;width:20%;opacity:.6}
.ap-table i:first-child{background:var(--grid)}
.ap-table i:first-child::before{background:var(--ink-2)}
/* Scheme previews: page, card, accent, then the four levels */
.ap-swatch{display:flex;height:2.25rem;overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)}
.ap-swatch i{flex:1}
.ap-swatch .s-bg{background:var(--bg);flex:1.4}
.ap-swatch .s-card{background:var(--surface-2);flex:1.4}
.ap-swatch .s-accent{background:var(--accent)}
.ap-swatch .s-l1{background:var(--m-manual)}
.ap-swatch .s-l2{background:var(--m-hybrid)}
.ap-swatch .s-l3{background:var(--m-system)}
.ap-swatch .s-l4{background:var(--m-automated)}
/* Style previews: a page with one card and three table rows, all drawn from the style's tokens */
.ap-sty{display:block;padding:.4rem;background:var(--page-bg);border-radius:var(--radius-sm)}
.st-card{display:block;padding:.3rem .4rem;background:var(--card-bg);border:var(--card-border);border-bottom:var(--card-border-b);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}
.ap-sty[data-style="editorial"] .st-card{padding-inline:0}
.st-t{display:block;width:45%;height:.3rem;margin-bottom:.3rem;border-radius:var(--pill-radius);background:var(--ink)}
.st-r{display:flex;gap:.3rem;align-items:center;height:.95rem;border-bottom:1px solid var(--table-rule)}
.st-r:first-of-type{border-top:var(--table-head-rule);background:var(--table-head-bg)}
.st-r:last-child{border-bottom:0}
.st-r b{display:block;height:.2rem;border-radius:var(--pill-radius);background:var(--muted);flex:1.4;margin-left:.25rem}
.st-r b + b{flex:1;border-left:var(--cell-v);height:.95rem;background:none;margin:0;position:relative}
.st-r b + b::after{content:"";position:absolute;left:.25rem;right:.3rem;top:50%;height:.2rem;margin-top:-.1rem;border-radius:var(--pill-radius);background:var(--accent)}