/* NEO WordPress: second-round concepts. Biznet Gio tokens, new layouts. */

/* shared top bar: no page menu, a site switcher and a command bar instead */
.c-top { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-height); padding: var(--space-2) var(--space-6); background: var(--background); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.c-top img { height: 34px; width: auto; display: block; }
.c-switch { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font: 600 14px/20px var(--font-sans); cursor: pointer; }
.c-cmd { flex: 1 1 260px; max-width: 460px; display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3) 0 14px; border: 0; border-radius: var(--radius-full); background: var(--secondary); color: var(--muted-foreground); font: 400 14px/20px var(--font-sans); cursor: pointer; text-align: left; }
.c-cmd span:first-of-type { flex: 1 1 auto; }
.c-spacer { flex: 1 1 0; }
.c-task { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--brand-tint); color: var(--primary-hover); font: 600 13px/18px var(--font-sans); cursor: pointer; }
.c-task .gio-spin { width: 12px; height: 12px; }
.c-pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--secondary); }
.c-pills a { padding: 5px 14px; border-radius: var(--radius-full); color: var(--foreground-secondary); font: 500 14px/20px var(--font-sans); }
.c-pills a[aria-current="page"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
.c-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: var(--radius-full); background: var(--primary); color: var(--primary-foreground); font: 600 11px/18px var(--font-sans); text-align: center; }
.c-say { font: 700 40px/48px var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.c-lead { font: 400 17px/28px var(--font-sans); color: var(--foreground-tertiary); }

/* A. Rewind: the site and its history */
.a-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); max-width: var(--container-max); margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-8); }
.a-shot { flex: 1 1 380px; max-width: 520px; aspect-ratio: 16 / 10; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--hero); box-shadow: var(--shadow-popover); }
.a-shot__bar { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); background: var(--surface); border-bottom: 1px solid var(--border); font: 400 12px/16px var(--font-mono); color: var(--muted-foreground); }
.a-shot__bar i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border-subtle); }
.a-shot__body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); font: 500 13px/18px var(--font-sans); text-align: center; padding: var(--space-4); }
.a-hero__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.a-band { background: var(--background); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.a-band__in { max-width: var(--container-max); margin: 0 auto; padding: var(--space-6); }
.a-railwrap { overflow-x: auto; padding-bottom: var(--space-2); }
.a-rail { position: relative; min-width: 980px; height: 144px; }
.a-axis { position: absolute; left: 0; right: 0; top: 76px; height: 2px; background: var(--border-subtle); }
.a-tick { position: absolute; top: 108px; transform: translateX(-50%); font: 500 12px/16px var(--font-sans); color: var(--muted-foreground); white-space: nowrap; }
.a-mark { position: absolute; top: 77px; transform: translate(-50%, -50%); width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--brand-tint-strong); cursor: pointer; }
.a-mark--change { width: 16px; height: 16px; background: var(--background); border: 3px solid var(--primary); }
.a-mark--incident { width: 16px; height: 16px; background: var(--warning-tint); border: 3px solid var(--warning); border-radius: var(--radius-xs); transform: translate(-50%, -50%) rotate(45deg); }
.a-mark--picked { width: 24px; height: 24px; background: var(--primary); border: 4px solid var(--background); box-shadow: 0 0 0 3px var(--primary); }
.a-mark--now { width: 18px; height: 18px; background: var(--primary); box-shadow: 0 0 0 6px var(--brand-tint); }
.a-flag { position: absolute; top: 2px; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--radius-full); background: var(--foreground); color: var(--background); font: 600 12px/16px var(--font-sans); white-space: nowrap; }
.a-flag--now { top: 32px; background: var(--brand-tint); color: var(--primary-hover); transform: translateX(-100%); display: inline-flex; align-items: center; gap: 6px; }
.a-flag--now .gio-spin { width: 10px; height: 10px; }
.a-legend { display: flex; flex-wrap: wrap; gap: var(--space-5); font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); }
.a-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.a-legend .a-mark { position: static; transform: none; }
.a-legend .a-mark--incident { transform: rotate(45deg); }
.a-point { display: flex; flex-wrap: wrap; gap: var(--space-8); max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--space-6); }
.a-compare { flex: 1 1 420px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.a-compare figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.a-compare figcaption { font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); }
.a-point__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.a-changes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font: 400 15px/24px var(--font-sans); }
.a-changes li { display: flex; gap: var(--space-3); }
.a-changes b { flex: none; width: 76px; font: 500 13px/24px var(--font-sans); color: var(--muted-foreground); }
.a-days { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6) var(--space-14); }
.a-ev { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.a-ev__time { flex: none; width: 132px; font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.a-ev__what { flex: 1 1 320px; min-width: 0; font: 400 15px/24px var(--font-sans); }
.a-ev__what small { display: block; font: 400 13px/18px var(--font-sans); color: var(--muted-foreground); }

/* B. Autopilot: a calm inbox */
.b-wrap { max-width: 780px; margin: 0 auto; padding: var(--space-14) var(--space-6) var(--space-10); display: flex; flex-direction: column; gap: var(--space-8); }
.b-mode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--hero); }
.b-card { display: flex; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--background); box-shadow: var(--shadow-xs); }
.b-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.b-card__title { font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.b-plan { margin: var(--space-2) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface); font: 400 14px/22px var(--font-sans); color: var(--foreground-secondary); }
.b-plan ol { margin: 0; padding-left: 20px; }
.b-card--working { background: var(--hero); border-color: var(--brand-tint-strong); }
.b-card--working .gio-spin { flex: none; width: 22px; height: 22px; margin: 9px; color: var(--primary); }
.b-steps { display: flex; flex-direction: column; gap: 6px; font: 400 14px/20px var(--font-sans); color: var(--foreground-secondary); }
.b-steps span { display: inline-flex; align-items: center; gap: var(--space-2); }
.b-steps .is-done { color: var(--primary-hover); }
.b-steps .is-wait { color: var(--muted-foreground); }
.b-done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); font: 400 15px/24px var(--font-sans); }
.b-done__what { flex: 1 1 300px; min-width: 0; }
.b-done small { color: var(--muted-foreground); font: 400 13px/18px var(--font-sans); }
.b-ask { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); }
.b-ask__in { max-width: 780px; margin: 0 auto; padding: var(--space-4) var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.b-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.b-chips button { height: 32px; padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--background); color: var(--foreground-secondary); font: 500 13px/18px var(--font-sans); cursor: pointer; }

/* C. Pipeline: environments and a workbench */
.p-wrap { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-8); }
.p-pipe { display: flex; flex-wrap: wrap; align-items: stretch; }
.p-env { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--background); }
.p-env--live { border: 2px solid var(--primary); }
.p-env__name { font: 700 22px/30px var(--font-sans); letter-spacing: -0.01em; }
.p-env dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); font: 400 13px/20px var(--font-sans); }
.p-env dt { color: var(--muted-foreground); }
.p-env dd { margin: 0; font-variant-numeric: tabular-nums; }
.p-link { flex: 0 1 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) 0; text-align: center; font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); }
.p-link__line { width: 100%; height: 0; border-top: 2px dashed var(--input); }
.p-link--busy .p-link__line { border-top: 2px solid var(--primary); }
.p-diff { display: inline-flex; gap: var(--space-2); font: 500 13px/18px var(--font-mono); }
.p-diff .add { color: var(--primary-hover); }
.p-diff .del { color: var(--destructive); }
.p-bench { position: sticky; bottom: 0; background: var(--foreground); color: var(--on-brand); }
.p-bench__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding: 0 var(--space-6); border-bottom: 1px solid rgba(255, 255, 255, 0.16); font: 500 13px/18px var(--font-sans); }
.p-bench__tabs button { padding: var(--space-3) 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--on-brand); opacity: 0.72; font: inherit; cursor: pointer; }
.p-bench__tabs button[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--on-brand); }
.p-bench__body { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-4) var(--space-6) var(--space-5); }
.p-bench__task { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--space-2); font: 400 14px/20px var(--font-sans); }
.p-bench__bar { height: 6px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.p-bench__bar span { display: block; height: 100%; background: var(--on-brand); }
.p-bench__log { flex: 2 1 480px; min-width: 0; margin: 0; font: 400 13px/22px var(--font-mono); white-space: pre-wrap; opacity: 0.92; }

/* Toast behaviour board */
.t-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.t-step { display: flex; flex-direction: column; gap: var(--space-3); }
.t-when { font: 600 15px/24px var(--font-sans); }
.t-toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--background); box-shadow: var(--shadow-popover); font: 400 14px/20px var(--font-sans); }
.t-toast .gio-spin { flex: none; margin-top: 2px; color: var(--primary); }
.t-toast strong { display: block; font-weight: 600; }
.t-toast small { display: block; color: var(--foreground-tertiary); font: 400 13px/18px var(--font-sans); }
.t-toast a { display: inline-block; margin-top: 6px; font-weight: 600; }
.t-toast--bad { border-color: var(--destructive); }
.t-ico { flex: none; display: inline-flex; margin-top: 1px; color: var(--primary); }
.t-ico--bad { color: var(--destructive); }
.t-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }