/* Classic authoring layout; shared theme owns colors and controls. */
body.classic-page { margin:0; color:var(--ds-text); background:var(--ds-bg); }
.classic-page * { box-sizing:border-box; }
.classic-page [hidden] { display:none!important; }
.classic-page a { color:inherit; text-decoration:none; }
.classic-page button, .classic-page input, .classic-page textarea { font:inherit; }
.classic-page .editor-back { display:none; }
body.classic-page .classic-main { display:block; max-width:800px; padding:24px 0 48px; }
body.classic-page .classic-intro { padding:0; margin-bottom:20px!important; }
body.classic-page .classic-intro h1 { font-size:30px; line-height:1.2; margin:6px 0 10px; }
.classic-intro p { margin:0; color:var(--ds-secondary); line-height:1.6; }
.classic-draft-links { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; }
.classic-draft-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--ds-text); text-decoration:underline; text-underline-offset:4px; font-size:13px; }
body.classic-page .classic-form { padding:0; background:none; border:0; }
body.classic-page .classic-form>label { display:block; margin:0 0 16px; }
.classic-form label>span { display:block; margin-bottom:7px; color:var(--ds-secondary); font-size:13px; }
.classic-form input, .classic-form textarea { display:block; width:100%; padding:12px 14px; background:var(--ds-surface); color:var(--ds-text); border:0; border-radius:16px; line-height:1.5; resize:vertical; }
.classic-form input { min-height:48px; }
.classic-optional { margin:20px 0; padding:0; }
.classic-optional>summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-radius:16px; background:var(--ds-surface); color:var(--ds-text); cursor:pointer; }
.classic-optional>summary::after { content:'+'; font-size:22px; }
.classic-optional[open]>summary::after { content:'−'; }
.classic-optional>summary span { margin-left:auto; color:var(--ds-muted); font-size:12px; }
.classic-optional .character-categories { margin-top:20px; }
body.classic-page .classic-avatar { display:grid; grid-template-columns:minmax(0,1fr) 112px; grid-template-areas:'copy preview' 'actions preview' 'status status'; gap:12px 16px; margin:18px 0 0; padding:0; background:none; }
.classic-avatar-copy { grid-area:copy; }
.classic-avatar-copy .eyebrow { display:none; }
.classic-avatar-copy h2 { margin:0 0 6px; font-size:18px; }
.classic-avatar-copy p { margin:0; color:var(--ds-secondary); font-size:13px; }
body.classic-page .classic-avatar-preview { grid-area:preview; width:112px; height:144px; min-height:0; position:relative; display:grid; place-items:center; overflow:hidden; border:0; border-radius:16px; background:var(--ds-surface); }
.classic-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.classic-avatar-empty { display:grid; justify-items:center; gap:8px; text-align:center; padding:10px; color:var(--ds-muted); font-size:12px; }
.classic-avatar-empty svg { width:28px; height:28px; }
.classic-avatar-loading { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; background:#161619db; color:var(--ds-text); }
.classic-avatar-loading span { width:28px; height:28px; border:2px solid var(--ds-muted); border-top-color:var(--ds-text); border-radius:50%; animation:classicSpin 1s linear infinite; }
@keyframes classicSpin { to { transform:rotate(360deg); } }
body.classic-page .classic-avatar-actions { grid-area:actions; display:flex; flex-wrap:wrap; align-items:start; gap:8px; margin:0; }
.classic-avatar-actions .secondary-button { min-height:44px; padding-inline:14px; font-size:12px; }
.classic-avatar-actions .text-button { min-height:44px; padding:8px; border:0; background:none; color:var(--ds-secondary); cursor:pointer; }
.classic-avatar-status { grid-area:status; margin:0; color:var(--ds-muted); font-size:12px; }
body.classic-page .classic-visibility { border:0; margin:20px 0 0; padding:0; }
.classic-visibility legend { color:var(--ds-secondary); padding:0 0 8px; }
.classic-visibility-help { color:var(--ds-muted); font-size:12px; margin:0; }
body.classic-page .classic-visibility-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.classic-visibility-option { display:flex; align-items:center; gap:10px; padding:12px; min-height:66px; border:0; border-radius:16px; background:var(--ds-surface); color:var(--ds-secondary); cursor:pointer; text-align:left; }
.classic-visibility-option svg { width:18px; height:18px; }
.classic-visibility-option strong,.classic-visibility-option small { display:block; }
.classic-visibility-option small { font-size:12px; margin-top:3px; }
.classic-visibility-option.selected { background:var(--ds-raised); color:var(--ds-text); }
.classic-actions { display:flex; gap:10px; position:sticky; bottom:0; z-index:5; margin-top:20px; padding:12px 0; background:var(--ds-bg); }
.classic-actions>* { flex:1; min-height:48px; border:0; border-radius:999px; cursor:pointer; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.primary-button { color:var(--ds-on-primary); background:var(--ds-primary); }
.secondary-button { color:var(--ds-text); background:var(--ds-raised); }
.classic-page svg { width:18px; height:18px; flex-shrink:0; }
body.classic-page .classic-tip { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; padding:12px 0; color:var(--ds-secondary); }
.classic-tip strong { font-size:13px; }.classic-tip p { margin:4px 0; font-size:13px; }.classic-tip>a { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; }
.classic-page .toast { position:fixed; left:50%; bottom:86px; transform:translateX(-50%); max-width:calc(100% - 32px); padding:12px 18px; border-radius:16px; background:var(--ds-raised); color:var(--ds-text); z-index:90; opacity:0; pointer-events:none; }.classic-page .toast.show { opacity:1; }
@media(max-width:780px) {
  body.classic-page .classic-main { padding-top:18px; padding-bottom:100px; }
  body.classic-page .classic-intro h1 { font-size:27px; }
  .classic-form input,.classic-form textarea { font-size:16px; scroll-margin-bottom:110px; }
  .classic-actions { position:fixed; left:0; right:0; bottom:0; padding:10px 16px max(10px,env(safe-area-inset-bottom)); margin:0; box-shadow:0 -12px 24px var(--ds-bg); }
  body.classic-page .classic-avatar { grid-template-areas:'copy preview' 'actions actions' 'status status'; }
  body.classic-page .classic-avatar-actions { flex-direction:row; }
  body.classic-page .classic-avatar-preview { width:112px; }
  .classic-optional>summary { flex-wrap:wrap; }
}