/* One manual viewer, no autoplay or repeated phone mockups. */
.ti-appearance{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.1fr);gap:28px;align-items:start;margin:20px 0 28px}
.ti-appearance>*,.ti-appearance-controls{min-width:0}
.ti-device-stage{display:flex;align-items:center;justify-content:center;height:330px;padding:18px;border:1px solid var(--border);border-radius:20px;background:var(--surface-2);overflow:hidden}
.ti-device-reference{position:relative;height:100%;max-width:100%;filter:drop-shadow(0 12px 14px #12203b18)}
.ti-device-reference>img{display:block;width:100%;height:100%;object-fit:contain}
.ti-device-reference>.phone-screen-off{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ti-macbook{display:block;width:100%;height:auto;max-height:100%;filter:drop-shadow(0 12px 12px #12203b18)}
.ti-reference-note{margin:10px 0 0;font-size:.875rem;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.ti-appearance .ti-choice:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ti-appearance-controls [hidden]{display:none!important}
.ti-appearance .grade-description{display:none}
.ti-preview-status{font-size:.9375rem;line-height:1.6;padding:12px 14px;margin:14px 0 0;border-radius:12px;background:var(--surface-2);min-height:72px}
.ti-preview-unavailable{font-size:.9375rem;line-height:1.6;padding:20px;border:1px dashed var(--border-strong);border-radius:16px;color:var(--muted)}
.ti-appearance .ti-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ti-appearance .ti-choice{min-height:68px;flex-direction:column;justify-content:center;gap:5px;padding:10px 6px;text-align:center;font-size:.875rem;line-height:1.3;overflow-wrap:normal;word-break:normal}
.ti-appearance .ti-choice .k{font-size:1.125rem;line-height:1.2}
.ti-function-title{font-size:1.125rem;margin:24px 0 8px}
@media(max-width:700px){.ti-appearance{grid-template-columns:1fr;gap:16px;margin-top:16px}.ti-device-stage{height:230px;padding:12px}.ti-device-stage.is-macbook{height:auto;min-height:150px;aspect-ratio:650/400}.ti-preview-status{min-height:0}.ti-appearance .ti-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:420px){.ti-appearance .ti-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Keep the phone next to the grade choices, so selecting D/E never hides the result. */
@media(max-width:700px){
  .ti-appearance:has(.ti-device-reference){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px 12px}
  .ti-appearance:has(.ti-device-reference) #ti-preview-stage,.ti-appearance:has(.ti-device-reference) .ti-appearance-controls{display:contents}
  .ti-appearance:has(.ti-device-reference) .ti-device-stage{grid-column:1;grid-row:1;position:relative;align-self:start;height:auto;aspect-ratio:1/2.15;padding:6px;border-radius:14px}
  .ti-appearance:has(.ti-device-reference) .ti-device-reference{width:100%;height:auto}
  .ti-appearance:has(.ti-device-reference) #ti-panel-overall{grid-column:2;grid-row:1}
  .ti-appearance:has(.ti-device-reference) #ti-panel-overall .form-field>span,.ti-appearance:has(.ti-device-reference) #ti-panel-overall .form-field>small{display:none}
  .ti-appearance:has(.ti-device-reference) .ti-choice-grid{grid-template-columns:1fr}
  .ti-appearance:has(.ti-device-reference) .ti-choice{flex-direction:row;min-height:52px;gap:8px;padding:8px}
  .ti-appearance:has(.ti-device-reference) .ti-choice .k{flex:none}
  .ti-appearance:has(.ti-device-reference) #ti-preview-stage>.ti-reference-note{grid-column:1/-1;grid-row:2;margin:0}
  .ti-appearance:has(.ti-device-reference) .ti-preview-status{grid-column:1/-1;grid-row:3;margin:0}
  .ti-appearance:has(.ti-device-reference) .ti-appearance-controls>.ti-reference-note{grid-column:1/-1;grid-row:4;margin:0}
}