/* Page arrangement per style. Variables live in styles.css; style 1 is app.css as-is.
   Everything here is scoped to 640 px and up so phones always get one column. */

.decor, [data-decor] { display: none; }

@keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

@media (min-width: 640px) {
  /* Framed vertical-menu styles: header becomes a column holding brand, links, and the style button. */
  [data-style="2"] .page, [data-style="14"] .page { max-width: var(--frame-width); margin: 0 auto; }
  [data-style="2"] main, [data-style="14"] main { max-width: none; margin: 0; }
  [data-style="2"] .top, [data-style="14"] .top {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-self: start; gap: 8px;
  }
  [data-style="2"] .top nav, [data-style="14"] .top nav { flex-direction: column; flex-wrap: nowrap; }
  [data-style="2"] #style-button, [data-style="14"] #style-button { margin-left: 0; }
  [data-style="2"] .top nav a::before { content: var(--nav-marker); }
}

/* Bar styles: the header spans the page; content is held to --frame-width. */
[data-style="3"] .top, [data-style="4"] .top, [data-style="6"] .top, [data-style="7"] .top, [data-style="9"] .top, [data-style="10"] .top,
[data-style="11"] .top, [data-style="12"] .top, [data-style="13"] .top, [data-style="15"] .top {
  padding-inline: max(var(--space), calc((100% - var(--frame-width)) / 2));
}
[data-style="3"] main, [data-style="4"] main, [data-style="6"] main, [data-style="7"] main, [data-style="9"] main, [data-style="10"] main,
[data-style="11"] main, [data-style="12"] main, [data-style="13"] main, [data-style="15"] main {
  max-width: var(--frame-width); margin: 0 auto;
}
/* Rail styles: a vertical menu beside the content, collapsing to one column on phones. */
@media (min-width: 640px) {
  [data-style="5"] .top, [data-style="8"] .top {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-self: start; gap: 8px;
  }
  [data-style="5"] .top nav, [data-style="8"] .top nav { flex-direction: column; flex-wrap: nowrap; }
  [data-style="5"] #style-button, [data-style="8"] #style-button { margin-left: 0; }
  [data-style="5"] .page, [data-style="8"] .page { display: grid; margin: 0 auto; }
  [data-style="5"] main, [data-style="8"] main { max-width: none; margin: 0; min-width: 0; }
}

/* 2: Geocities Homepage */
[data-style="2"] body { padding: 12px 8px; }
[data-style="2"] .page { background: var(--surface); border: 6px ridge var(--border); }
[data-style="2"] h1 { text-align: center; color: var(--accent); }
[data-style="2"] .card, [data-style="2"] ul.plain li, [data-style="2"] .top { border-style: outset; }
[data-style="2"] .top nav a { color: var(--accent); text-decoration: underline; }
[data-style="2"] .top nav a[aria-current="page"] { color: var(--accent-text); text-decoration: none; }
@media (min-width: 640px) {
  [data-style="2"] .page {
    display: grid; grid-template-columns: 190px 1fr;
    grid-template-areas: "marquee marquee" "top main" "counter counter" "badges badges";
  }
  [data-style="2"] .top { grid-area: top; }
  [data-style="2"] main { grid-area: main; }
  [data-style="2"] .decor { display: contents; }
  [data-style="2"] [data-decor="marquee"] {
    display: block; grid-area: marquee; overflow: hidden; background: #000000; color: #ffff00; padding: 6px 0;
    border-bottom: 3px ridge var(--border);
  }
  [data-style="2"] [data-decor="marquee"] span { display: inline-block; white-space: nowrap; animation: marquee 16s linear infinite; }
  [data-style="2"] [data-decor="counter"] {
    display: block; grid-area: counter; justify-self: center; margin: 12px; padding: 4px 12px;
    background: #000000; color: #00ff00; font-family: ui-monospace, Menlo, Consolas, monospace; border: 3px inset var(--border);
  }
  [data-style="2"] [data-decor="badges"] { display: flex; grid-area: badges; justify-content: center; gap: 8px; padding: 0 12px 12px; }
  [data-style="2"] [data-decor="badges"] span { padding: 4px 10px; border: 3px outset var(--border); background: var(--bg); color: var(--text); font-size: .8rem; }
}

/* 3: Punch Through-inspired (header, eyebrow badge, and CTA button follow a screenshot of punchthrough.com) */
[data-style="3"] .top { background: var(--surface); border-bottom: 0; box-shadow: 0 2px 10px color-mix(in srgb, var(--text) 15%, transparent); position: sticky; top: 0; z-index: 10; }
[data-style="3"] .brand { color: var(--text); font-weight: 700; font-size: 1.2rem; }
[data-style="3"] .top nav { margin-left: auto; }
[data-style="3"] .top nav a { color: var(--text); font: 600 .95rem var(--font-heading); border-radius: 0; border-bottom: 3px solid transparent; }
[data-style="3"] .top nav a[aria-current="page"] { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }
[data-style="3"] #style-button { margin-left: 0; box-shadow: none; font-family: var(--font-heading); }
[data-style="3"] h1 { font: 500 2.2rem/1.15 var(--font-body); color: color-mix(in srgb, var(--accent) 45%, black); }
[data-style="3"] h2 { display: inline-block; font: 700 .8rem var(--font-heading); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 4px 12px; }
[data-style="3"] .card, [data-style="3"] ul.plain li { border-width: 0; }

/* 4: Facebook-inspired */
[data-style="4"] .top { background: var(--accent); border-bottom: 0; box-shadow: var(--shadow); }
[data-style="4"] .brand { color: var(--accent-text); font-size: 1.35rem; font-weight: 800; }
[data-style="4"] .top nav a { color: var(--accent-text); font-weight: 600; border-radius: var(--radius); }
[data-style="4"] .top nav a[aria-current="page"] { background: color-mix(in srgb, var(--accent-text) 25%, transparent); }
[data-style="4"] #style-button { background: var(--surface); color: var(--accent); border-color: var(--surface); border-radius: 999px; box-shadow: none; }
[data-style="4"] h1 { font-size: 1.25rem; }
[data-style="4"] button, [data-style="4"] .button { font-weight: 600; border-radius: 999px; box-shadow: none; }
[data-style="4"] input[type=search], [data-style="4"] input[type=date] { border-radius: 12px; }

/* 5: X-inspired */
[data-style="5"] .top { background: var(--bg); }
[data-style="5"] .brand { font-weight: 800; font-size: 1.25rem; }
[data-style="5"] .top nav a { border-radius: 999px; font-weight: 700; font-size: 1.1rem; }
[data-style="5"] .top nav a[aria-current="page"] { background: transparent; color: var(--accent); }
[data-style="5"] #style-button { border-radius: 999px; box-shadow: none; }
[data-style="5"] button, [data-style="5"] .button { border-radius: 999px; font-weight: 700; }
[data-style="5"] h1 { font-size: 1.25rem; font-weight: 800; }
[data-style="5"] .card, [data-style="5"] ul.plain li { border-width: 0 0 1px; border-radius: 0; background: transparent; padding-inline: 0; }
@media (min-width: 640px) {
  [data-style="5"] .page { grid-template-columns: 240px minmax(0, 600px); justify-content: center; }
  [data-style="5"] .top { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--border); }
  [data-style="5"] main { border-right: 1px solid var(--border); min-height: 100vh; }
}

/* 6: Reddit-inspired */
[data-style="6"] .top { border-bottom: 1px solid var(--border); }
[data-style="6"] .brand { color: var(--accent); font-weight: 700; font-size: 1.2rem; }
[data-style="6"] .top nav a { border-radius: 999px; font-weight: 600; font-size: .9rem; }
[data-style="6"] .top nav a[aria-current="page"] { background: var(--bg); color: var(--accent); }
[data-style="6"] #style-button { background: var(--surface); color: var(--accent); border-radius: 999px; box-shadow: none; }
[data-style="6"] main { padding-top: 16px; }
[data-style="6"] h1 { font-size: 1.2rem; font-weight: 600; }
[data-style="6"] h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
[data-style="6"] .card, [data-style="6"] ul.plain li { border-left: 32px solid var(--border); padding: 8px 12px; }
[data-style="6"] button, [data-style="6"] .button { border-radius: 999px; font-weight: 700; }

/* 7: YouTube-inspired */
[data-style="7"] .top { background: var(--surface); border-bottom: 1px solid var(--border); }
[data-style="7"] .brand { font-weight: 700; font-size: 1.2rem; letter-spacing: -.04em; }
[data-style="7"] .top nav a { border-radius: 999px; background: var(--bg); font-size: .9rem; min-height: 44px; }
[data-style="7"] .top nav a[aria-current="page"] { background: var(--text); color: var(--surface); font-weight: 700; }
[data-style="7"] #style-button { background: var(--bg); color: var(--text); border-color: var(--border); border-radius: 999px; box-shadow: none; }
[data-style="7"] h1 { font-size: 1.3rem; font-weight: 700; }
[data-style="7"] .card, [data-style="7"] ul.plain li { border-color: transparent; background: var(--surface); }
[data-style="7"] button, [data-style="7"] .button { border-radius: 999px; font-weight: 600; }
@media (min-width: 900px) {
  [data-style="7"] main { column-count: 2; column-gap: 16px; }
  [data-style="7"] main h1, [data-style="7"] main h2, [data-style="7"] main .banner, [data-style="7"] main .state, [data-style="7"] main form.search { column-span: all; }
  [data-style="7"] main .card, [data-style="7"] main ul.plain li { break-inside: avoid; }
  [data-style="7"] main h3 { break-after: avoid; }
}

/* 8: Wikipedia-inspired */
[data-style="8"] .top { background: transparent; border-bottom: 0; }
[data-style="8"] .brand { font: 400 1.3rem var(--font-heading); }
[data-style="8"] .top nav a { color: var(--accent); padding: 4px 8px; min-height: 44px; border-radius: 0; font-size: .85rem; }
[data-style="8"] .top nav a[aria-current="page"] { background: transparent; color: var(--text); font-weight: 700; }
[data-style="8"] #style-button { background: var(--surface); color: var(--accent); border-color: var(--border); box-shadow: none; }
[data-style="8"] main { background: var(--surface); border: 1px solid var(--border); font-size: .95rem; }
[data-style="8"] h1, [data-style="8"] h2 { font-weight: 400; border-bottom: 1px solid var(--border); }
[data-style="8"] h1 { font-size: 1.8rem; }
[data-style="8"] .card, [data-style="8"] ul.plain li { background: var(--bg); border-radius: 0; box-shadow: none; }
@media (min-width: 640px) {
  [data-style="8"] .page { grid-template-columns: 176px minmax(0, 1fr); max-width: var(--frame-width); }
}

/* 9: Craigslist-inspired */
[data-style="9"] .top { flex-direction: column; align-items: center; text-align: center; background: var(--surface); border-bottom: 1px solid var(--border); }
[data-style="9"] .brand { font: 400 1.6rem var(--font-heading); }
[data-style="9"] .top nav { justify-content: center; }
[data-style="9"] .top nav a { color: var(--accent); text-decoration: underline; border-radius: 0; min-height: 44px; }
[data-style="9"] .top nav a[aria-current="page"] { background: transparent; color: var(--text); font-weight: 700; text-decoration: none; }
[data-style="9"] main a:visited { color: #551a8b; }
[data-style="9"] #style-button { margin-left: 0; background: #efefef; color: #000000; border: 1px solid #767676; box-shadow: none; }
[data-style="9"] button, [data-style="9"] .button { background: #efefef; color: #000000; border: 1px solid #767676; font-weight: 400; }
[data-style="9"] h1, [data-style="9"] h2 { font-size: 1.1rem; font-weight: 700; }
[data-style="9"] .card, [data-style="9"] ul.plain li { border-width: 0; background: transparent; padding: 2px 0; margin: 0 0 2px; box-shadow: none; }
@media (min-width: 900px) {
  [data-style="9"] main { column-count: 3; column-gap: 24px; }
  [data-style="9"] main h1, [data-style="9"] main h2, [data-style="9"] main .banner, [data-style="9"] main .state, [data-style="9"] main form.search { column-span: all; }
  [data-style="9"] main .card, [data-style="9"] main ul.plain li { break-inside: avoid; }
  [data-style="9"] main h3 { break-after: avoid; }
}

/* 10: Hacker News-inspired (bar orange is decorative; text on it is black) */
[data-style="10"] body { font-size: 13px; line-height: 1.25; }
[data-style="10"] .top { background: #ff6600; border-bottom: 0; padding-block: 2px; }
[data-style="10"] .brand { color: var(--text); font-size: 1rem; }
[data-style="10"] .top nav a { color: var(--text); padding: 4px 8px; border-radius: 0; }
[data-style="10"] .top nav a[aria-current="page"] { background: transparent; color: var(--text); font-weight: 700; text-decoration: underline; }
[data-style="10"] #style-button { background: transparent; color: var(--text); border-color: var(--text); border-radius: 0; font-size: .8rem; box-shadow: none; }
[data-style="10"] main { background: var(--bg); }
[data-style="10"] h1, [data-style="10"] h2 { font-size: 1rem; margin: 8px 0 4px; }
[data-style="10"] ul.plain { counter-reset: row; }
[data-style="10"] .card, [data-style="10"] ul.plain li { background: transparent; border-width: 0; padding: 2px 0; margin: 0 0 4px; }
[data-style="10"] ul.plain li { counter-increment: row; }
[data-style="10"] ul.plain li::before { content: counter(row) ". "; color: var(--text-muted); }

/* 11: MySpace-inspired */
[data-style="11"] .top { background: var(--accent); border-bottom: 4px solid var(--border); }
[data-style="11"] .brand { color: var(--accent-text); font-size: 1.3rem; font-weight: 700; }
[data-style="11"] .top nav a { color: var(--accent-text); border-radius: 0; font-weight: 700; }
[data-style="11"] .top nav a[aria-current="page"] { background: var(--surface); color: var(--accent); }
[data-style="11"] #style-button { background: var(--surface); color: var(--accent); border-color: var(--surface); box-shadow: none; }
[data-style="11"] h1, [data-style="11"] h2 { background: var(--border); color: var(--text); padding: 4px 10px; font-size: 1rem; margin: 12px 0 8px; }
[data-style="11"] .card, [data-style="11"] ul.plain li { border: 1px solid var(--border); }
@media (min-width: 900px) {
  [data-style="11"] main { column-count: 2; column-gap: 16px; }
  [data-style="11"] main h1, [data-style="11"] main h2, [data-style="11"] main .banner, [data-style="11"] main .state, [data-style="11"] main form.search { column-span: all; }
  [data-style="11"] main .card, [data-style="11"] main ul.plain li { break-inside: avoid; }
  [data-style="11"] main h3 { break-after: avoid; }
}

/* 12: Windows 95-inspired (bevels from light/dark border pairs; teal desktop comes from --page-bg) */
[data-style="12"] .top { background: var(--bg); border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; }
[data-style="12"] .brand { background: var(--accent); color: #ffffff; padding: 2px 8px; font-weight: 700; }
[data-style="12"] .top nav a { color: var(--text); border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; background: var(--bg); border-radius: 0; }
[data-style="12"] .top nav a[aria-current="page"] { border-color: #404040 #ffffff #ffffff #404040; background: var(--surface); font-weight: 700; }
[data-style="12"] button, [data-style="12"] .button, [data-style="12"] #style-button {
  background: var(--bg); color: #000000; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; box-shadow: none; border-radius: 0;
}
[data-style="12"] button:active, [data-style="12"] .button:active { border-color: #404040 #ffffff #ffffff #404040; }
[data-style="12"] main { margin-top: 16px; background: var(--surface); border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; }
[data-style="12"] h1 { background: var(--accent); color: #ffffff; padding: 2px 8px; font-size: 1rem; }
[data-style="12"] h2 { font-size: 1rem; border-bottom: 2px groove var(--border); }
[data-style="12"] .card, [data-style="12"] ul.plain li { background: #ffffff; border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; }
[data-style="12"] input[type=search], [data-style="12"] input[type=date] { background: #ffffff; color: #000000; border-radius: 0; border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; }

/* 13: WSJ-inspired */
[data-style="13"] .top { flex-direction: column; align-items: center; text-align: center; border-bottom: 1px solid var(--text); }
[data-style="13"] .brand { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 400; line-height: 1.1; }
[data-style="13"] .top nav { justify-content: center; width: 100%; border-top: 1px solid var(--border); }
[data-style="13"] .top nav a { font: 600 .8rem var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--text); border-radius: 0; }
[data-style="13"] .top nav a[aria-current="page"] { background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
[data-style="13"] #style-button { margin-left: 0; background: transparent; color: var(--accent); border-color: var(--border); border-radius: 0; box-shadow: none; }
[data-style="13"] h1, [data-style="13"] h2 { font-weight: 400; border-bottom: 1px solid var(--border); }
[data-style="13"] h2 { font: 600 .75rem var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--fail); }
[data-style="13"] .card, [data-style="13"] ul.plain li { border-width: 0 0 1px; background: transparent; padding-inline: 0; }
@media (min-width: 900px) {
  [data-style="13"] main { column-count: 3; column-gap: 28px; column-rule: 1px solid var(--border); }
  [data-style="13"] main h1, [data-style="13"] main h2, [data-style="13"] main .banner, [data-style="13"] main .state, [data-style="13"] main form.search { column-span: all; }
  [data-style="13"] main .card, [data-style="13"] main ul.plain li { break-inside: avoid; }
  [data-style="13"] main h3 { break-after: avoid; }
}

/* 14: Terminal / BBS */
[data-style="14"] .page { border: 1px solid var(--border); }
[data-style="14"] h1::before { content: var(--nav-marker); }
[data-style="14"] .top { background: var(--bg); }
[data-style="14"] .top nav { counter-reset: menu; }
[data-style="14"] .top nav a { counter-increment: menu; color: var(--text); }
[data-style="14"] .top nav a::before { content: counter(menu) ". "; }
[data-style="14"] .top nav a[aria-current="page"] { color: var(--accent-text); }
@media (min-width: 640px) {
  [data-style="14"] .page { display: grid; grid-template-columns: 220px 1fr; }
  [data-style="14"] .top { border-bottom: 0; border-right: var(--border-width) solid var(--border); min-height: 100%; }
}

/* 15: Axios-inspired */
[data-style="15"] .top { border-bottom: 1px solid var(--text); }
[data-style="15"] .brand { color: var(--text); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 800; }
[data-style="15"] .top nav a { font-weight: 700; font-size: .9rem; border-radius: 0; border-bottom: 3px solid transparent; }
[data-style="15"] .top nav a[aria-current="page"] { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }
[data-style="15"] #style-button { background: transparent; color: var(--accent); }
[data-style="15"] h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.1; }
[data-style="15"] h2 { font: 800 .75rem var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
[data-style="15"] .card, [data-style="15"] ul.plain li { background: transparent; border-width: 0 0 1px; padding-inline: 0; }

/* Rows: the link carries the padding, so flat and dense styles trim it there. */
[data-style="5"] .row-link, [data-style="13"] .row-link, [data-style="15"] .row-link { padding-inline: 0; }
[data-style="9"] .row-link, [data-style="10"] .row-link { padding: 2px 0; }
[data-style="9"] .row-main, [data-style="10"] .row-main { font-size: 1rem; }
[data-style="10"] ul.plain li.game { display: flex; align-items: baseline; gap: 4px; }
[data-style="10"] ul.plain li.game .row-link { flex: 1; min-width: 0; }