/* system7.css — the app screens in the landing page's look (Mac System 7, Raj 2026-09-28).
   Loaded last on every app page. It restyles through the existing tokens and classes, so the
   pages' markup and scripts do not change. No images and no web fonts. */
:root[data-look="mac7"] {
  --bg: #fff; --card: #fff; --ink: #000; --soft: #111; --mute: #333;
  --rule: #000; --chip: #ececec;
  --accent: #000; --accent-soft: #ececec; --accent-ink: #000;
  --good: #000; --good-soft: #f2f2f2;
  --radius: 0;
  --ui: "Chicago", "Charcoal", "Geneva", "Verdana", system-ui, sans-serif;
  --serif: var(--ui); --sans: var(--ui);
  color-scheme: light;
}
[data-look="mac7"] body { background: #fff; color: #000; font: 17px/1.55 var(--ui); padding: 40px 12px 24px; min-height: 100vh; position: relative; }
/* The desktop pattern, behind everything. */
[data-look="mac7"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: repeating-conic-gradient(#000 0 25%, #fff 0 50%); background-size: 2px 2px; }

/* The header becomes the menu bar. */
[data-look="mac7"] .bar { position: fixed; top: 0; left: 0; right: 0; z-index: 6; max-width: none; margin: 0; height: 30px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-bottom: 1px solid #000; }
[data-look="mac7"] .brand { display: flex; align-items: center; gap: 10px; color: #000; font: 700 14px/1 var(--ui); letter-spacing: 0; }
[data-look="mac7"] .brand::before { content: ""; width: 13px; height: 15px; background: #000; border-radius: 50% 50% 45% 45%; }
[data-look="mac7"] .progress { font: 700 13px/1 var(--ui); color: #000; }

/* Each screen is one window, with a striped title bar drawn from data-title. */
[data-look="mac7"] main { max-width: 720px; margin: 8px auto 0; background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 #000;
  padding: 44px 18px 22px; position: relative; }
[data-look="mac7"] main::before { content: attr(data-title); position: absolute; top: 0; left: 0; right: 0; height: 24px; border-bottom: 1px solid #000;
  display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--ui);
  background: linear-gradient(#fff, #fff) center / calc(var(--tw, 9ch) + 24px) 100% no-repeat,
    repeating-linear-gradient(#000 0 1px, #fff 1px 3px) 0 6px / 100% 11px no-repeat, #fff; }
[data-look="mac7"] main::after { content: ""; position: absolute; top: 5px; left: 10px; width: 12px; height: 12px; border: 1px solid #000; background: #fff; box-shadow: 0 0 0 2px #fff; }

[data-look="mac7"] h1, [data-look="mac7"] h2, [data-look="mac7"] h1.page { font-family: var(--ui); font-weight: 700; letter-spacing: -.01em; color: #000; }
[data-look="mac7"] h1.page, [data-look="mac7"] main > h1 { font-size: clamp(26px, 6.5vw, 36px); line-height: 1.12; }
[data-look="mac7"] .lede, [data-look="mac7"] .hint, [data-look="mac7"] .label, [data-look="mac7"] .small { color: #111; }
[data-look="mac7"] a, [data-look="mac7"] a.link { color: #000; text-decoration: underline; }

/* Buttons: rounded rectangles; the main action gets the thick outer ring of a default button. */
[data-look="mac7"] button { font: 700 16px/1.2 var(--ui); color: #000; background: #fff; border: 2px solid #000; border-radius: 10px; box-shadow: none; min-height: 44px; }
[data-look="mac7"] button:hover { background: #fff; text-decoration: underline; }
[data-look="mac7"] button:active { background: #000; color: #fff; }
[data-look="mac7"] button.cta, [data-look="mac7"] .gate .cta { background: #fff; color: #000; border: 2px solid #000; border-radius: 10px;
  outline: 3px solid #000; outline-offset: 3px; margin: 6px 0; font-size: 18px; }
[data-look="mac7"] button.cta:hover, [data-look="mac7"] .gate .cta:hover { background: #fff; color: #000; }
[data-look="mac7"] button.cta:active, [data-look="mac7"] .gate .cta:active { background: #000; color: #fff; }
[data-look="mac7"] .gate .cta.alt { outline: none; }
[data-look="mac7"] button:disabled { opacity: .45; }
[data-look="mac7"] :focus-visible { outline: 2px dotted #000; outline-offset: 3px; }

/* Fields: a plain inset box. */
[data-look="mac7"] textarea, [data-look="mac7"] input, [data-look="mac7"] select { font: 16px/1.5 var(--ui); color: #000; background: #fff;
  border: 1px solid #000; border-radius: 0; box-shadow: inset 1px 1px 0 #999; }
[data-look="mac7"] .jdbox { border: 1px solid #000; border-radius: 0; background: #fff; box-shadow: none; }
[data-look="mac7"] .jdbox textarea { border: 0; box-shadow: none; }
[data-look="mac7"] .screen .gate { padding: 16px; }
[data-look="mac7"] .otp-box { border: 1px solid #000; border-radius: 0; box-shadow: inset 1px 1px 0 #999; background: #fff; }
[data-look="mac7"] .otp-box.on { outline: 2px dotted #000; }
[data-look="mac7"] .otp input { border: 0; box-shadow: none; background: transparent; }

/* Panels and cards: black lines, no rounding, no soft shadows. */
[data-look="mac7"] .panel, [data-look="mac7"] .card, [data-look="mac7"] .skill, [data-look="mac7"] .question, [data-look="mac7"] .note, [data-look="mac7"] .strong,
[data-look="mac7"] .gate, [data-look="mac7"] .pattern, [data-look="mac7"] .finding, [data-look="mac7"] blockquote {
  border: 1px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; }
[data-look="mac7"] .pile.say .skill { background: #f2f2f2 !important; }
/* Inside a skill nothing is boxed again except the one answer to say (Raj, 2026-10-01: box in box looked cramped). */
[data-look="mac7"] .skill .question, [data-look="mac7"] .skill .note { border: 0 !important; background: transparent !important; }
[data-look="mac7"] .skill .question { border-top: 1px solid #000 !important; }
[data-look="mac7"] .skill blockquote { border: 0 !important; border-left: 2px solid #000 !important; }
[data-look="mac7"] .skill .finding { border: 0 !important; border-left: 3px solid #000 !important; background: transparent !important; padding: 2px 0 2px 14px; }
[data-look="mac7"] button.showall, [data-look="mac7"] button.misheard { border: 0; outline: 0; background: none; font-weight: 400; text-decoration: underline; min-height: 44px; }
[data-look="mac7"] .wave i { background: #000 !important; }
[data-look="mac7"] .turndot { border-color: #000; background: #000; }
[data-look="mac7"] [data-turn="you"] .turndot { background: #fff; }
[data-look="mac7"] .say { font-size: 20px; line-height: 1.45; color: #000; }
[data-look="mac7"] .error { color: #000; font-weight: 700; }
[data-look="mac7"] .error:not(:empty)::before { content: "⚠ "; }
[data-look="mac7"] mark, [data-look="mac7"] .term { background: #000; color: #fff; padding: 0 3px; }

@media (min-width: 760px) { [data-look="mac7"] main { padding: 48px 32px 30px; margin-top: 24px; } }

/* One size for the window: the full width up to 720px, whatever is inside it. With width: auto it
   shrank to its text, so the window jumped on every turn (filmed 2026-09-29). Never past the phone's edge. */
[data-look="mac7"] main, [data-look="mac7"] .screen { width: 100% !important; box-sizing: border-box; max-width: 720px; min-height: 0; }
/* The interview window fills the screen's height, so what arrives on your turn never moves the rest. */
[data-look="mac7"] body.app main#main { min-height: calc(100dvh - 72px); }
@media (min-width: 760px) { [data-look="mac7"] body.app main#main { min-height: calc(100dvh - 88px); } }
[data-look="mac7"] .verdict h1 { font-size: clamp(32px, 9vw, 48px); line-height: 1.05; color: #000 !important; }
[data-look="mac7"] .verdict .tally { font-size: 18px; }
[data-look="mac7"] .dev { display: none; }

/* A colour desktop on the landing, waiting and feedback screens; the interview keeps the plain grey one,
   because that is where you concentrate (Raj, 2026-10-01). A soft teal, as colour Macs offered. */
[data-look="mac7"][data-desk="teal"] body::before { background-image: repeating-conic-gradient(#137a7a 0 25%, #fff 0 50%); }
/* Inside an answer card nothing is boxed again. */
[data-look="mac7"] .card .note, [data-look="mac7"] .card blockquote { border: 0 !important; background: transparent !important; }
[data-look="mac7"] .card blockquote { border-left: 2px solid #000 !important; }
[data-look="mac7"] .card.good { background: #f4f4f4 !important; }

/* Reading text in the System 7 look: the readable face, black on white, square tags. */
[data-look="mac7"] .card, [data-look="mac7"] .verdict .tally, [data-look="mac7"] .verdict .rule, [data-look="mac7"] .pattern, [data-look="mac7"] .never { font-family: var(--read); }
[data-look="mac7"] .card .ask { color: #333; }
[data-look="mac7"] .card .label, [data-look="mac7"] .card-head .qn { color: #555; }
[data-look="mac7"] .card .right { border-left-color: #000; }
[data-look="mac7"] .chip { border: 1px solid #000; border-radius: 0; background: #fff; }
[data-look="mac7"] .card-head .status:not(.ok) { background: #000; color: #fff; padding: 2px 8px; }

/* The colour above survives the System 7 look (it was the black tag before). */
[data-look="mac7"] .card-head .status:not(.ok), [data-look="mac7"] .card-head .status { background: var(--miss); color: #fff; padding: 3px 9px; border-radius: 0; }
[data-look="mac7"] .card-head .status.ok { background: var(--hit); }
[data-look="mac7"] .strip .sq { border-radius: 0; border: 1px solid #000; }
[data-look="mac7"] button.chip { border: 1px solid #000; border-radius: 0; font-weight: 500; text-decoration: none; }
[data-look="mac7"] button.chip:hover { text-decoration: underline; }
[data-look="mac7"] button.chip[aria-expanded="true"] { background: var(--mark); }
/* Words in an answer that open their meaning: highlighted text, never a System 7 button. */
[data-look="mac7"] .term, [data-look="mac7"] .term:hover, [data-look="mac7"] .term:active { all: unset; cursor: pointer; font-weight: 700; color: #000;
  background: linear-gradient(transparent 52%, var(--mark) 52%); padding: 0 1px; text-decoration: underline dotted 1px; text-underline-offset: 3px; }
[data-look="mac7"] .term:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
[data-look="mac7"] button.linkish, [data-look="mac7"] button.linkish:active { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font: 400 14px/1.2 var(--read); color: #333; text-decoration: underline; }
[data-look="mac7"] button.linkish { border: 0; outline: 0; background: none; min-height: 44px; font-weight: 400; }
[data-look="mac7"] .report input { border: 1px solid #000; box-shadow: inset 1px 1px 0 #999; }