/* Line 15911 (upskill-harness-1-r1): the Google path for the harness pages. Loaded only while
   ai.features.harness_pages_google_path is on, by resources/views/partials/harness/google-path-look.blade.php,
   on an element that carries .ns-gp. Values are public/css/ns-tokens.css's Google surfaces (#202124 ink, #5f6368
   secondary, #dadce0 lines, #f1f3f4 surface) with NetShow gold as the accent: light by default, dark under
   prefers-color-scheme: dark. The design-system tokens (--ns-*) are re-dressed in the same scope, so a page that
   already reads them (the harness cockpit) follows without its own rules. */

.ns-gp {
    --gp-bg: #ffffff;
    --gp-surface: #f8f9fa;
    --gp-card: #ffffff;
    --gp-chip: #f1f3f4;
    --gp-text: #202124;
    --gp-text-2: #5f6368;
    --gp-line: #dadce0;
    --gp-accent: #f9ab00;
    --gp-accent-ink: #202124;
    --gp-link: #1a73e8;
    --gp-ring: rgba(26, 115, 232, .35);
    --gp-ok: #188038;
    --gp-bad: #d93025;
    --gp-font: Roboto, 'Google Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --gp-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    --gp-radius: 12px;

    --ns-bg-primary: var(--gp-bg);
    --ns-bg-secondary: var(--gp-surface);
    --ns-bg-tertiary: var(--gp-chip);
    --ns-text-primary: var(--gp-text);
    --ns-text-secondary: var(--gp-text-2);
    --ns-text-muted: var(--gp-text-2);
    --ns-border: var(--gp-line);
    --ns-border-subtle: var(--gp-line);
    --ns-accent: #b06000;
    --ns-accent-hover: #e37400;
    --ns-accent-subtle: rgba(249, 171, 0, .14);
    --ns-accent-text: var(--gp-accent-ink);
    --ns-success: var(--gp-ok);
    --ns-error: var(--gp-bad);
    --ns-info: var(--gp-link);
    --ns-radius-md: 8px;
    --ns-radius-lg: var(--gp-radius);

    color-scheme: light;
    background: var(--gp-bg);
    color: var(--gp-text);
    font-family: var(--gp-font);
    line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
    .ns-gp {
        --gp-bg: #202124;
        --gp-surface: #292a2d;
        --gp-card: #2d2e31;
        --gp-chip: #35363a;
        --gp-text: #e8eaed;
        --gp-text-2: #9aa0a6;
        --gp-line: rgba(232, 234, 237, .16);
        --gp-accent: #f5a623;
        --gp-link: #8ab4f8;
        --gp-ring: rgba(138, 180, 248, .4);
        --gp-ok: #81c995;
        --gp-bad: #f28b82;
        --ns-accent: #fdd663;
        --ns-accent-hover: #f5a623;
        --ns-accent-subtle: rgba(245, 166, 35, .16);
        color-scheme: dark;
    }
}

/* Page frame: calm, one column at 375 px, generous but tight Google spacing. */
main.ns-gp, div.ns-gp.container, section.ns-gp { border-radius: var(--gp-radius); padding: 20px 16px 32px; }
@media (min-width: 768px) { main.ns-gp, div.ns-gp.container, section.ns-gp { padding: 28px 28px 40px; } }
.ns-gp h1, .ns-gp .h1, .ns-gp .h3 { font-family: var(--gp-font); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.25; letter-spacing: 0; color: var(--gp-text); }
.ns-gp h2, .ns-gp .h4, .ns-gp .h5 { font-family: var(--gp-font); font-weight: 500; font-size: 1.125rem; line-height: 1.4; color: var(--gp-text); }
.ns-gp h3 { font-weight: 500; font-size: 1rem; color: var(--gp-text); }
.ns-gp p, .ns-gp li, .ns-gp dd { color: var(--gp-text); }
.ns-gp .small, .ns-gp small, .ns-gp header p { color: var(--gp-text-2); }
.ns-gp a { color: var(--gp-link); text-decoration: none; }
.ns-gp a:hover { text-decoration: underline; }
.ns-gp a:focus-visible, .ns-gp button:focus-visible, .ns-gp .btn:focus-visible { outline: 3px solid var(--gp-ring); outline-offset: 2px; box-shadow: none; }

/* Surfaces. */
.ns-gp .card, .ns-gp .ns-bring-stage, .ns-gp .ns-bring-row { background: var(--gp-card); color: var(--gp-text); border: 1px solid var(--gp-line); border-radius: var(--gp-radius); box-shadow: none; }
.ns-gp .card-body { padding: 16px; }
.ns-gp .ns-bring-row[aria-current] { border-color: var(--gp-link); box-shadow: 0 0 0 2px var(--gp-ring); }
.ns-gp pre, .ns-gp .ns-bring-row__command { background: var(--gp-surface); color: var(--gp-text); border: 1px solid var(--gp-line) !important; border-radius: 8px; font: .85rem/1.6 var(--gp-mono); padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ns-gp code { color: inherit; font-family: var(--gp-mono); }
.ns-gp .border { border-color: var(--gp-line) !important; }
.ns-gp .form-control, .ns-gp .form-select, .ns-gp textarea, .ns-gp input[type="text"] { background: var(--gp-bg); color: var(--gp-text); border: 1px solid var(--gp-line); border-radius: 8px; min-height: 44px; }
.ns-gp .alert { border-radius: var(--gp-radius); border: 1px solid var(--gp-line); background: var(--gp-surface); color: var(--gp-text); }

/* Buttons: one filled primary per step, the rest quiet (Google's filled / outlined pair). */
.ns-gp .btn { border-radius: 999px; font-family: var(--gp-font); font-weight: 500; min-height: 40px; padding: 8px 20px; letter-spacing: .01em; }
.ns-gp .btn-sm { min-height: 32px; padding: 4px 14px; }
.ns-gp .btn-primary { background: var(--gp-accent); border-color: var(--gp-accent); color: var(--gp-accent-ink); }
.ns-gp .btn-primary:hover { filter: brightness(.95); background: var(--gp-accent); border-color: var(--gp-accent); color: var(--gp-accent-ink); }
.ns-gp .btn-outline-primary, .ns-gp .btn-outline-secondary, .ns-gp .btn-secondary { background: transparent; border: 1px solid var(--gp-line); color: var(--gp-link); }
.ns-gp .btn-outline-primary:hover, .ns-gp .btn-outline-secondary:hover { background: var(--gp-chip); color: var(--gp-link); }
.ns-gp .btn:disabled, .ns-gp .btn[disabled] { opacity: 1; color: var(--gp-text-2); background: var(--gp-chip); border-color: var(--gp-chip); }

/* The bring door's host: a drawn live face, never a photo. */
.ns-gp .ns-bring-stage__face { background: transparent; }
.ns-gp .ns-bring-stage__face .abf-tile { width: 100%; height: 100%; border: 0; }
.ns-gp .ns-bring-stage__ai { background: var(--gp-text); color: var(--gp-bg); }
.ns-gp .ns-bring-stage[data-speaking] .ns-bring-stage__face { box-shadow: 0 0 0 3px var(--gp-accent); }
.ns-gp .ns-bring-row__name { color: var(--gp-link); text-decoration: none; font-weight: 500; }

/* The Studio's take-home card when it joins the harness take-home page. */
.ns-gp .ns-sj__action { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 20px; border: 0; border-radius: 999px; background: var(--gp-accent); color: var(--gp-accent-ink); font-weight: 500; text-decoration: none; }
.ns-gp .ns-sj__secondary { color: var(--gp-link); background: transparent; border: 0; }
.ns-gp .ns-th { border-color: var(--gp-line); background: var(--gp-card); }

/* Admin readout. */
.ns-gp .gp-counts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0; }
.ns-gp .gp-counts li { background: var(--gp-chip); border-radius: 999px; padding: 4px 12px; font-size: .85rem; }

/* The public A2A proof. */
body.ns-gp { margin: 0; min-height: 100vh; }
.ns-gp .gp-wrap { max-width: 1080px; margin: auto; padding: 20px 16px 64px; }
@media (min-width: 768px) { .ns-gp .gp-wrap { padding: 28px 40px 72px; } }
.ns-gp .gp-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--gp-line); }
.ns-gp .gp-brand { font-weight: 500; letter-spacing: .08em; color: var(--gp-text); }
.ns-gp .gp-links { display: flex; gap: 16px; flex-wrap: wrap; }
.ns-gp .gp-eyebrow { margin: 28px 0 0; color: var(--gp-text-2); font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.ns-gp .gp-lead { font-size: 1.05rem; max-width: 720px; color: var(--gp-text-2); }
.ns-gp .gp-notice { display: inline-block; background: var(--gp-chip); border-radius: 999px; padding: 6px 14px; font-size: .9rem; color: var(--gp-text); }
.ns-gp .gp-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; counter-reset: step; }
.ns-gp .gp-step { counter-increment: step; background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: var(--gp-radius); padding: 16px; min-width: 0; }
@media (min-width: 768px) { .ns-gp .gp-step { padding: 24px; } }
.ns-gp .gp-step h2::before { content: counter(step) ". "; color: var(--gp-text-2); }
.ns-gp .gp-actor { color: var(--gp-text-2); margin: 4px 0 0; }
.ns-gp .gp-endpoint { display: inline-block; background: var(--gp-chip); border-radius: 8px; padding: 4px 10px; font: 500 .85rem var(--gp-mono); overflow-wrap: anywhere; }
.ns-gp .gp-shapes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
@media (min-width: 768px) { .ns-gp .gp-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ns-gp .gp-shapes h3 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-text-2); margin: 0 0 6px; }
.ns-gp .gp-note { color: var(--gp-text-2); font-size: .9rem; margin-top: 24px; }

@media (prefers-reduced-motion: reduce) { .ns-gp * { transition: none !important; } }