/* NEO WordPress, third direction: familiar structure, security at the centre. */
.s-shell { display: flex; flex-wrap: wrap; min-height: 100%; background: var(--surface); }

/* sidebar: the sections people already know, with live status next to each */
.s-side { flex: 1 1 248px; max-width: 264px; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-4); background: var(--background); border-right: 1px solid var(--border); }
.s-side img { height: 34px; width: auto; align-self: flex-start; }
.s-nav { display: flex; flex-direction: column; gap: 2px; }
.s-nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--foreground-secondary); font: 500 14px/20px var(--font-sans); }
.s-nav a:hover { background: var(--accent); color: var(--foreground); }
.s-nav a[aria-current="page"] { background: var(--brand-tint); color: var(--primary-hover); font-weight: 600; }
.s-nav a span:first-of-type { flex: 1 1 auto; }
.s-nav svg { flex: none; }
.s-state { flex: none; font: 500 12px/16px var(--font-sans); color: var(--muted-foreground); }
.s-state--ok { color: var(--primary-hover); }
.s-state--warn { padding: 1px 7px; border-radius: var(--radius-full); background: var(--warning-tint); border: 1px solid var(--warning-border); color: var(--warning); }
.s-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-4); border-top: 1px solid var(--border); }
@media (max-width: 640px) { .s-side { max-width: none; border-right: 0; border-bottom: 1px solid var(--border); } .s-side__foot { margin-top: 0; } }

.s-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.s-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-8); background: var(--background); border-bottom: 1px solid var(--border); }
.s-body { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); max-width: 1200px; width: 100%; }
.s-body .nw-table th, .s-body .nw-table td { padding-left: var(--space-4); padding-right: var(--space-4); }

/* the shield: one answer to "is my site safe?" */
.s-shield { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-8); border-radius: var(--radius-xl); background: var(--hero); border: 1px solid var(--brand-tint-strong); }
.s-shield__clip { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-xl); pointer-events: none; }
.s-shield > :not(.s-shield__clip) { position: relative; }
.s-ring { flex: none; position: relative; width: 148px; height: 148px; }
.s-ring svg { display: block; }
.s-ring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 40px/44px var(--font-sans); letter-spacing: -0.02em; }
.s-ring__num small { font: 500 13px/18px var(--font-sans); letter-spacing: 0; color: var(--foreground-tertiary); }
.s-shield__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.s-shield__say { font: 700 32px/40px var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.s-site { flex: 0 1 250px; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--background); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }

/* protection layers: one strip, five layers, each with its state in words */
.s-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--background); overflow: hidden; }
.s-layer { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5); border-left: 1px solid var(--border); margin-left: -1px; color: var(--foreground); }
.s-layer:hover { background: var(--surface); }
.s-layer__name { display: flex; align-items: center; gap: var(--space-2); font: 600 15px/24px var(--font-sans); color: var(--foreground); }
.s-layer__state { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); color: var(--primary-hover); }
.s-layer__state--warn { color: var(--warning); }
.s-layer p { font: 400 13px/18px var(--font-sans); color: var(--foreground-tertiary); }
.s-layer--warn { background: var(--warning-tint); }
.s-layer--warn:hover { background: var(--warning-tint); }

div.s-layer:hover { background: transparent; }
.s-metric__num { font: 700 32px/40px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.s-metric__num small { margin-left: 6px; font: 500 13px/18px var(--font-sans); letter-spacing: 0; color: var(--muted-foreground); }

/* site list */
.s-mini { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 4px solid var(--primary); background: var(--background); font: 700 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.s-mini + div { white-space: nowrap; }
.s-mini--warn { border-color: var(--warning); color: var(--warning); }
.s-body .nw-table th, .s-body .nw-table td { padding-left: var(--space-3); padding-right: var(--space-3); }
.s-shot { flex: none; width: 64px; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--info-tint); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); font: 500 11px/14px var(--font-sans); }
.s-sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl); background: var(--hero); border: 1px solid var(--brand-tint-strong); }
.s-sum__say { flex: 1 1 320px; min-width: 0; font: 700 22px/30px var(--font-sans); letter-spacing: -0.01em; }
.s-sum__fig { display: flex; flex-direction: column; font: 500 13px/18px var(--font-sans); color: var(--foreground-tertiary); }
.s-sum__fig b { font: 700 22px/30px var(--font-sans); color: var(--foreground); font-variant-numeric: tabular-nums; }

/* plan and resources: always visible in the side menu, one resize screen */
.s-plan { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); color: var(--foreground); }
.s-plan:hover { border-color: var(--primary); color: var(--foreground); }
.s-plan[aria-current="page"] { border-color: var(--primary); background: var(--brand-tint); }
.s-plan__top { display: flex; flex-direction: column; font: 600 14px/20px var(--font-sans); }
.s-plan__top span { font: 500 12px/16px var(--font-sans); color: var(--muted-foreground); }
.s-plan__row { display: flex; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); color: var(--foreground-tertiary); font-variant-numeric: tabular-nums; }
.s-plan__row > span:first-child { flex: none; width: 58px; }
.s-plan__row > span:last-child { flex: none; width: 30px; text-align: right; }
.s-plan .nw-bar { display: block; flex: 1 1 auto; height: 6px; background: var(--border-subtle); }
.s-plan__cta { text-align: center; padding: 6px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font: 600 13px/18px var(--font-sans); box-shadow: var(--shadow-button); }
.s-plan + .s-side__foot { margin-top: 0; }
/* same order on every screen, counted from the top: menu, usage, account */
.s-side .s-plan, .s-side .s-side__foot { margin-top: 0; }
/* the side menu stays in view, and the profile is always its last row, at the bottom */
.s-side { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
.s-side .s-side__foot { flex: 1 0 auto; }
.s-side { padding-bottom: 0; gap: var(--space-4); }
.s-side .s-nav a { min-height: 36px; }
.s-side__foot > a:last-child { position: sticky; bottom: 0; margin-top: auto; min-height: 60px; padding-top: var(--space-2); padding-bottom: var(--space-2); border-top: 1px solid var(--border); border-radius: 0; background: var(--background); }
.s-side__foot > a:last-child:hover { background: var(--background); }
.s-side__foot:has(> a:only-child) { border-top: 0; padding-top: 0; }
@media (max-width: 640px) { .s-side { position: static; height: auto; overflow: visible; } }
.u-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.u-size { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border: 1px solid var(--input); border-radius: var(--radius-lg); background: var(--background); cursor: pointer; }
.u-size input { position: absolute; top: var(--space-4); right: var(--space-4); width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.u-size__name { font: 700 17px/24px var(--font-sans); padding-right: 28px; }
.u-size__price { font: 500 13px/18px var(--font-sans); color: var(--foreground-tertiary); }
.u-size__tag { align-self: flex-start; margin-top: 4px; }
.u-size--picked { border: 2px solid var(--primary); padding: calc(var(--space-4) - 1px); background: var(--hero); }
.u-size--now { background: var(--surface); }
.u-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); }
.u-compare b { display: block; font: 700 17px/24px var(--font-sans); }
.u-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5) var(--space-8); }

/* the one thing to fix */
.s-fix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--warning-border); border-radius: var(--radius-xl); background: var(--background); }
.s-fix__text { flex: 1 1 360px; min-width: 0; }

/* security log with restore points in it */
.s-log { position: relative; display: flex; flex-direction: column; }
.s-log__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-3) 52px; border-top: 1px solid var(--border); }
.s-log__row:first-child { border-top: 0; }
.s-log__row::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--border-subtle); }
.s-log__dot { position: absolute; left: 21px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: var(--radius-full); background: var(--background); border: 3px solid var(--primary); }
.s-log__dot--save { border-color: var(--brand-tint-strong); background: var(--brand-tint-strong); }
.s-log__dot--warn { border-color: var(--warning); }
.s-log__time { flex: none; width: 118px; font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.s-log__what { flex: 1 1 260px; min-width: 0; font: 400 14px/20px var(--font-sans); }
.s-log__what small { display: block; font: 400 13px/18px var(--font-sans); color: var(--muted-foreground); }