/* Shell layout. Colours and spacing come only from the design tokens in helix-tokens.css. */
body { margin: 0; font: var(--fs-body)/1.5 var(--font-sans); }
.workspace { min-height: 100vh; background: var(--bg-canvas); color: var(--text-primary); }
.shell-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 5vw;
    background: var(--side-bg); color: var(--side-text); border-bottom: 1px solid var(--side-line); }
.shell-header .brand { color: inherit; font-size: var(--fs-title); font-weight: 700; text-decoration: none; }
.shell-header .person { color: var(--side-mute); font-size: var(--fs-meta); }
.shell-header form { margin: 0; }
.languages { display: flex; gap: var(--sp-2); font-size: var(--fs-meta); }
.languages a { color: var(--side-mute); text-decoration: none; }
.languages a[aria-current="true"] { color: var(--side-text); box-shadow: inset 0 -2px 0 var(--cyan); }
.shell-main { max-width: 60rem; margin: auto; padding: var(--sp-8) 5vw; }
.sign-in { display: grid; gap: var(--sp-4); justify-items: start; padding: var(--sp-8) 0; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 var(--sp-4); }
p { line-height: 1.6; }
button { border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-primary);
    padding: var(--sp-2) var(--sp-4); font: inherit; cursor: pointer; }
.shell-header button { background: transparent; color: var(--side-text); border-color: var(--side-line); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }