/* Line 15817 (upskill-looks-1-r1): the Google path for the Alive attachment page, the all-looks sheet, the public
   character preview and the retired-photo-face card. Linked only while ai.features.looks_upskill_1 is on
   (App\Support\Looks\LooksUpskill1::stylesheet()), after css/ns-tokens.css. Every rule is scoped under a class a lit page
   adds to its own root: .ns-looks-u1 (with .ns-gp-ag, which follows the app's light/dark switch), .ns-looks-u1-preview
   and .ns-looks-moved (with .ns-gp, which follows the system scheme). This sheet only points each page's own colours at
   the --ns-* tokens: calm surfaces, Google type, one accent, 44 px targets, nothing wider than a 375 px phone. */

/* ---- Shared ---------------------------------------------------------------------------------------------------- */
.ns-looks-u1 {
    background: var(--ns-bg-deep);
    color: var(--ns-text);
    font-family: var(--ns-font);
    line-height: 1.5;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ns-looks-u1 h1, .ns-looks-u1 h2, .ns-looks-u1 h3 {
    color: var(--ns-text);
    font-family: 'Google Sans', var(--ns-font);
    font-weight: 500;
    letter-spacing: 0;
}
.ns-looks-u1 a { color: var(--ns-gold-light); }
.ns-looks-u1 :focus-visible { outline: 2px solid var(--ns-gold); outline-offset: 2px; }

/* ---- Alive attachment (.aa-shell) ------------------------------------------------------------------------------ */
.aa-shell.ns-looks-u1 {
    --aa-border: var(--ns-border);
    --aa-muted: var(--ns-text-2);
    --aa-panel: var(--ns-card);
    --aa-panel-2: var(--ns-surface);
    border-radius: var(--ns-radius);
}
.aa-shell.ns-looks-u1 h1, .aa-shell.ns-looks-u1 h2, .aa-shell.ns-looks-u1 h3,
.aa-shell.ns-looks-u1 .aa-fact strong, .aa-shell.ns-looks-u1 .aa-meta dd,
.aa-shell.ns-looks-u1 .aa-integrity-note strong, .aa-shell.ns-looks-u1 .aa-confirm { color: var(--ns-text); }
.aa-shell.ns-looks-u1 a { color: var(--ns-gold-light); }
.aa-shell.ns-looks-u1 .aa-kicker { color: var(--ns-text-2); letter-spacing: .06em; font-weight: 500; }
.aa-shell.ns-looks-u1 .aa-title { font-size: clamp(1.5rem, 4vw, 2rem); }
.aa-shell.ns-looks-u1 .aa-back { color: var(--ns-text) !important; border-color: var(--ns-border-strong); border-radius: 999px; font-weight: 500; }
.aa-shell.ns-looks-u1 .aa-current { background: var(--ns-card); border-color: var(--ns-border); border-radius: var(--ns-radius); }
.aa-shell.ns-looks-u1 .aa-card { background: var(--ns-card); border-color: var(--ns-border); border-radius: var(--ns-radius); }
.aa-shell.ns-looks-u1 .aa-card--current { border-color: var(--ns-gold); box-shadow: 0 0 0 1px var(--ns-gold-border, rgba(249, 171, 0, .3)); }
.aa-shell.ns-looks-u1 .aa-preview { background: var(--ns-surface); border-color: var(--ns-border); color: var(--ns-text); }
.aa-shell.ns-looks-u1 .aa-badge { background: var(--ns-surface); color: var(--ns-text); font-weight: 500; }
.aa-shell.ns-looks-u1 .aa-badge--ok { background: var(--ns-surface); color: var(--ns-gp-ag-ok, #188038); }
.aa-shell.ns-looks-u1 .aa-badge--bad { background: var(--ns-surface); color: var(--ns-gp-ag-err, #d93025); }
.aa-shell.ns-looks-u1 .aa-badge--warn, .aa-shell.ns-looks-u1 .aa-badge--current { background: var(--ns-surface); color: var(--ns-gold-light); }
.aa-shell.ns-looks-u1 .aa-status { background: var(--ns-surface); border-color: var(--ns-border); color: var(--ns-text); }
.aa-shell.ns-looks-u1 .aa-warning { background: var(--ns-surface); color: var(--ns-text); border-left-color: var(--ns-gold); }
.aa-shell.ns-looks-u1 .aa-meta code { background: var(--ns-surface); color: var(--ns-text); }
.aa-shell.ns-looks-u1 .aa-integrity-note { background: var(--ns-surface); }
.aa-shell.ns-looks-u1 .aa-action { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); border-radius: 999px; font-weight: 500; }
.aa-shell.ns-looks-u1 .aa-action:hover { background: var(--ns-gold-deep); }
.aa-shell.ns-looks-u1 .aa-action--danger { background: transparent; border-color: var(--ns-border-strong); color: var(--ns-gp-ag-err, #d93025); }
.aa-shell.ns-looks-u1 .aa-action:disabled { background: var(--ns-surface); border-color: var(--ns-border); color: var(--ns-text-2); }
.aa-shell.ns-looks-u1 .aa-confirm input { accent-color: var(--ns-gold); }
.aa-shell.ns-looks-u1 .aa-voice { color: var(--ns-text-2); font-size: .9rem; }

/* ---- All eight looks (.ns-all-looks) --------------------------------------------------------------------------- */
.ns-all-looks.ns-looks-u1 .ns-all-looks__lead,
.ns-all-looks.ns-looks-u1 .ns-all-looks__state,
.ns-all-looks.ns-looks-u1 .ns-all-looks__reason,
.ns-all-looks.ns-looks-u1 .ns-all-looks__phone p,
.ns-all-looks.ns-looks-u1 .ns-all-looks__engine,
.ns-all-looks.ns-looks-u1 .ns-all-looks__note { color: var(--ns-text-2); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__title { font-size: clamp(1.5rem, 4vw, 1.9rem); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__tile,
.ns-all-looks.ns-looks-u1 .ns-all-looks__phone { background: var(--ns-card); border-color: var(--ns-border); border-radius: var(--ns-radius); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__tile[data-look-made="0"] { background: var(--ns-surface); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__tile[data-look-current="1"] { border-color: var(--ns-gold); box-shadow: 0 0 0 2px var(--ns-gold-glow, rgba(249, 171, 0, .22)); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__stage,
.ns-all-looks.ns-looks-u1 .ns-all-looks__source-frame { background: var(--ns-surface); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__stage:focus-visible { outline-color: var(--ns-gold); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__mark { color: var(--ns-text-2); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__name { color: var(--ns-text); font-weight: 500; }
.ns-all-looks.ns-looks-u1 .ns-all-looks__state--current { color: var(--ns-gold-light); font-weight: 500; }
.ns-all-looks.ns-looks-u1 .ns-all-looks__recreation { background: var(--ns-surface); color: var(--ns-text); font-weight: 500; }
.ns-all-looks.ns-looks-u1 .ns-all-looks__menu-list { background: var(--ns-card); border-color: var(--ns-border); }
.ns-all-looks.ns-looks-u1 .ns-all-looks__menu-item { color: var(--ns-text); font-weight: 500; }
.ns-all-looks.ns-looks-u1 .ns-all-looks__menu-item:hover,
.ns-all-looks.ns-looks-u1 .ns-all-looks__menu-item:focus-visible { background: var(--ns-surface); }
.ns-all-looks.ns-looks-u1 .btn { border-radius: 999px; font-weight: 500; }

/* ---- Public character preview (body.ns-looks-u1-preview) ------------------------------------------------------- */
body.ns-looks-u1-preview { background: var(--ns-bg); color: var(--ns-text); font-family: var(--ns-font); }
body.ns-looks-u1-preview .pv-tag { background: var(--ns-surface); color: var(--ns-text-2); font-weight: 500; }
body.ns-looks-u1-preview .pv-note { color: var(--ns-text-2); }
body.ns-looks-u1-preview .pv-next { margin: 1.25rem 0 0; }
body.ns-looks-u1-preview .pv-next a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.5rem;
    border-radius: 999px; background: var(--ns-gold); color: var(--ns-on-accent); font-weight: 500; text-decoration: none;
}
body.ns-looks-u1-preview .pv-next a:focus-visible { outline: 2px solid var(--ns-text); outline-offset: 2px; }

/* ---- The retired-photo-face card (looks.legacy-face-moved) ------------------------------------------------------ */
body.ns-gp:has(.ns-looks-moved) { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--ns-bg); color: var(--ns-text); font-family: var(--ns-font); }
body.ns-gp .ns-looks-moved { max-width: 34rem; padding: 1.5rem 1rem; text-align: center; }
body.ns-gp .ns-looks-moved h1 { font-family: 'Google Sans', var(--ns-font); font-weight: 500; font-size: clamp(1.4rem, 4vw, 1.8rem); margin: 0 0 .75rem; }
body.ns-gp .ns-looks-moved p { color: var(--ns-text-2); margin: 0 0 1.25rem; }
body.ns-gp .ns-looks-moved nav { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
body.ns-gp .ns-looks-moved__primary {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.5rem;
    border-radius: 999px; background: var(--ns-gold); color: var(--ns-on-accent); font-weight: 500; text-decoration: none;
}
body.ns-gp .ns-looks-moved__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ns-gold-light); text-decoration: none; }