/* Desktop composition
   Mobile owns the base styles. This file only gives a computer-sized viewport
   the wider, denser club workspace it deserves. */
@media (min-width: 900px) {
  :root {
    --desktop-gutter: clamp(32px, 5vw, 76px);
    --desktop-measure: 1200px;
    --desktop-page-title-size: clamp(38px, 4vw, 58px);
  }

  /* Keep the desktop canvas continuous. Page-width guide rails looked like stray
     borders on every long screen and became especially distracting in chat. */
  body { background-image: none; }

  h1 {
    font-size: var(--desktop-page-title-size);
    line-height: .98;
    letter-spacing: -.025em;
  }

  h2 { font-size: 22px; }

  nav:not(.folder-tabs):not(.type-grid) {
    min-height: 68px;
    padding: 16px max(var(--desktop-gutter), calc((100vw - var(--desktop-measure)) / 2));
    border-bottom: 1px solid var(--hairline);
  }

  nav .nav-logo img { width: 36px; height: 36px; }
  nav .nav-links { gap: clamp(18px, 2.2vw, 32px); }
  nav a { font-size: 12px; }
  nav a:hover { color: var(--bone); }

  .container {
    width: min(100%, calc(var(--desktop-measure) + (var(--desktop-gutter) * 2)));
    max-width: none;
    padding: 52px var(--desktop-gutter) 72px;
  }

  .btn {
    min-height: 48px;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  }
  .btn:hover { background: var(--bone); border-color: var(--bone); color: var(--black); }
  .btn-ghost:hover { background: var(--ink); color: var(--bg); }
  .btn-red:hover { background: var(--black); border-color: var(--red); color: var(--white); }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
  }

  .user-identity {
    width: min(100%, var(--desktop-measure));
    margin: 12px auto 0;
    padding: 18px 0 28px;
    text-align: left;
  }

  /* Entry screens: the mark is a proper arrival panel, not an ornament above a
     phone form. The form remains a comfortable reading width. */
  body.entry {
    display: grid;
    min-height: 100vh;
    place-items: center;
    background:
      linear-gradient(90deg, var(--black) 0 34%, var(--white) 34% 100%);
  }
  body.entry .container {
    width: min(1040px, calc(100vw - 80px));
    padding: 56px 0 !important;
  }
  body.entry .card {
    display: grid;
    grid-template-columns: 300px minmax(320px, 460px);
    justify-content: space-between;
    column-gap: 76px;
    min-height: 540px;
    padding: 64px 72px;
    background: var(--bg);
  }
  body.entry .card > :not(.logo) { grid-column: 2; }
  body.entry .logo {
    grid-column: 1;
    grid-row: 1 / span 30;
    width: min(240px, 100%);
    margin: 0;
    align-self: center;
    justify-self: center;
    filter: drop-shadow(0 18px 34px rgb(0 0 0 / 35%));
  }
  body.entry h1 { margin-top: auto; }
  body.entry .card > :last-child { margin-bottom: auto; }
  body.entry p { max-width: 42ch; font-size: 16px; }
  body.entry .user-identity { display: none; }

  /* Book room: shelves on desktop, one full-cover swipe on mobile. */
  .books-page.container { padding-top: 46px !important; }
  .books-page .books-header {
    align-items: flex-end;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: var(--border);
  }
  .books-page .sync-note { margin-left: 20px; }
  .books-page .books-deck {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 18px;
    margin-bottom: 36px;
  }
  .books-page .book-card {
    border: 0;
    background: transparent;
  }

  /* Newsroom: one lead story, then a compact broadsheet grid. Imagery carries
     the colour; the shell remains the club's flat black editorial canvas. */
  .news-page.container { padding-top: 48px; }
  .news-page .news-header {
    margin-bottom: 36px;
  }
  .news-page .news-header h1 { font-size: var(--desktop-page-title-size); }
  .news-page .news-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
  .news-page .news-card { display: block; padding: 0 0 20px; border-bottom: 1px solid var(--hairline); }
  .news-page .news-media { margin-bottom: 16px; }
  .news-page .news-card h2 { font-size: 23px; }
  .news-page .news-feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
    gap: 34px;
    padding-bottom: 34px;
  }
  .news-page .news-feature .news-media { aspect-ratio: 16 / 8; margin: 0; }
  .news-page .news-feature .news-copy { align-self: end; }
  .news-page .news-feature h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.02; }
  .news-page .news-feature p { display: block; margin-top: 16px; font-size: 16px; }
  .books-page .book-cover {
    border: var(--border);
    box-shadow: 8px 8px 0 var(--bone);
  }
  .books-page .book-info {
    min-height: 128px;
    padding: 18px 0 0;
  }
  .books-page .book-title { font-size: 20px; }
  .books-page .book-author { font-size: 14px; }
  .books-page .books-pagination {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 4px 0 36px;
    padding: 18px 0;
    border-top: var(--border);
    border-bottom: var(--border);
  }
  .books-page .books-pagination[hidden] { display: none; }
  .books-page .books-pagination button {
    min-width: 42px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--body);
    font: 700 12px/1 'Nunito Sans', sans-serif;
    cursor: pointer;
  }
  .books-page .books-pagination button:hover:not(:disabled),
  .books-page .books-pagination button[aria-current="page"] {
    border-color: var(--rule);
    background: var(--ink);
    color: var(--bg);
  }
  .books-page .books-pagination button:disabled { color: var(--muted-3); cursor: default; }
  .books-page .pagination-pages { display: flex; justify-content: center; gap: 6px; }
  .books-page .pagination-gap {
    display: inline-grid;
    min-width: 24px;
    place-items: center;
    color: var(--muted);
  }
  .books-page .pagination-summary {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
  }
  .books-page .pagination-direction { min-width: 112px !important; }
  .book-quote-band {
    min-height: 48px;
    padding-inline: var(--desktop-gutter);
    font-size: 12px;
  }

  /* Store: covers lead; the rules and typography carry the grouping. */
  .store-page .container { padding-top: 46px !important; }
  .store-page .store-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 34px;
    padding-bottom: 20px;
  }
  .store-page .store-header h1 { margin: 0; }
  .store-page .region-bar {
    max-width: 560px;
    justify-content: flex-end;
    padding-bottom: 4px;
    text-align: right;
  }
  .store-page .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 28px;
  }
  .store-page .product-card {
    padding: 0;
    border-bottom: 0;
  }
  .store-page .product-image { padding: 0; }
  .store-page .product-meta { padding-top: 16px; }
  .store-page .product-meta h2 { font-size: 21px; }
  .store-page .product-price { font-size: 18px; }
  .store-page .product-order:hover {
    border-color: var(--bone);
    background: var(--bone);
    color: var(--black);
  }

  .store-country-page .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    max-width: 980px;
  }
  .store-country-page .container > h1,
  .store-country-page .region-note { grid-column: 1 / -1; }
  .store-country-page .container > h1 {
    margin: 0 !important;
    padding-bottom: 22px;
    border-bottom: var(--border);
  }
  .store-country-page .region-note {
    max-width: 58ch;
    margin: 0 0 18px;
    font-size: 16px;
  }
  .store-country-page .region-choice {
    min-height: 130px;
    margin: 0;
    padding: 28px;
    font-size: 27px;
  }

  /* Order details: physical book on the left, decisions on the right. */
  .order-page .container { max-width: 1160px; padding-top: 46px !important; }
  .order-page .order-card {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(460px, 1.2fr);
    align-items: start;
    gap: 42px;
    padding: 0;
    border: 0;
    overflow: visible;
  }
  .order-page .order-product {
    position: sticky;
    top: 94px;
    margin: 0;
    padding: 0 42px 0 0;
    border-right: 1px solid var(--hairline);
    border-bottom: 0;
    background: transparent;
  }
  .order-page .order-product-media {
    margin-bottom: 20px;
    padding: 0;
    border: 1px solid var(--hairline);
  }
  .order-page .order-product h1 { font-size: 30px; }
  .order-page .order-details { min-width: 0; padding: 4px 0 0; }
  .order-page .order-details input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { font-size: 15px; }
  .order-page .buyer-fields { gap: 24px; }
  .order-page .receipt-field { margin-bottom: 22px; }
  .order-page .quantity-field { max-width: 180px; }
  .order-page .picker-grid { grid-template-columns: repeat(3, 1fr); }
  .order-page .picker-option { min-height: 48px; }
  .order-page .chapter-known { margin-top: 4px; }
  .order-page #submit-btn { margin-top: 24px; }

  /* Payment screens keep the payment provider inside the club's visual frame. */
  .checkout-page .checkout-shell { max-width: 1100px; padding-top: 52px; }
  .checkout-page .checkout-grid { grid-template-columns: minmax(320px, .9fr) minmax(440px, 1.1fr); }
  .checkout-page .checkout-summary,
  .checkout-page .checkout-payment { padding: 44px; }
  .checkout-page .checkout-cover { width: 190px; box-shadow: 9px 9px 0 var(--bone); }
  .checkout-page .checkout-title { font-size: 42px; }
  .checkout-page .checkout-payment h2 { font-size: 32px; }
  .zeffy-page .zeffy-payment { padding: 44px; }
  .zeffy-page .zeffy-frame { min-height: 720px; }

  .order-status-page .container { max-width: 900px; padding-top: 88px !important; }
  .order-status-page .card {
    position: relative;
    min-height: 360px;
    padding: 72px 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left !important;
  }
  .order-status-page .card::before {
    content: "TGBC / ORDERS";
    position: absolute;
    top: 26px;
    left: 30px;
    color: var(--label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
  }
  .order-status-page .card h1 { max-width: 680px; }
  .order-status-page .card p { max-width: 54ch; font-size: 17px; }
  .order-status-page .card .btn { width: auto; align-self: flex-start; padding-inline: 30px; }

  /* Dispatches: a full-width correspondence desk with independent panes. */
  .comms-page {
    --comms-shell-width: 100vw;
    --comms-shell-gutter: clamp(8px, 1vw, 16px);
    --comms-folder-pane-width: 292px;
    --comms-column-gap: 12px;
  }
  .comms-page nav.comms-nav { padding-left: var(--comms-shell-gutter); }
  .comms-page .comms-nav .nav-logo { justify-content: flex-start; }
  .conversation-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .conversation-page > .user-identity,
  .conversation-page > .chat-footer-quote { display: none; }
  .comms-page .comms-shell {
    width: min(100%, var(--comms-shell-width));
    max-width: none;
    padding: 28px var(--comms-shell-gutter) 64px;
  }
  .conversation-page .comms-shell {
    min-height: 0;
    flex: 1 1 0;
    padding-block: 0;
    overflow: hidden;
  }
  .comms-page .chat-footer-quote {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin: 8px calc(max(0px, (100vw - var(--comms-shell-width)) / 2) + var(--comms-shell-gutter)) 0 calc(max(0px, (100vw - var(--comms-shell-width)) / 2) + var(--comms-shell-gutter) + var(--comms-folder-pane-width) + var(--comms-column-gap));
    padding-block: 7px;
  }
  .conversation-page .chat-footer-quote { display: none; }
  .comms-page .comms-head {
    align-items: flex-end;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: var(--border);
  }
  .comms-page .comms-actions .btn { min-width: 132px; }
  .comms-page .comms-workspace {
    --folder-pane-width: var(--comms-folder-pane-width);
    display: grid;
    grid-template-columns: var(--folder-pane-width) minmax(0, 1fr);
    align-items: stretch;
    column-gap: var(--comms-column-gap);
    min-width: 0;
    border-bottom: var(--border);
  }
  .conversation-page .conversation-workspace {
    height: 100%;
    min-height: 0;
  }
  .comms-page .chat-sidebar {
    position: sticky;
    top: 16px;
    align-self: start;
    width: auto;
    height: calc(100dvh - 32px);
    min-height: 0;
    max-height: calc(100dvh - 32px);
    background: rgb(255 255 255 / 2%);
    overflow: hidden;
  }
  /* Conversation panes share one viewport-height workspace. Each pane owns its
     scroll position while the navigation, heading and composer remain fixed. */
  .conversation-page .chat-sidebar {
    position: relative;
    top: auto;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 0;
    border-right: 1px solid var(--hairline);
    background: var(--black);
    overflow: hidden;
  }
  .conversation-page .comms-workspace { border-bottom: 0; }
  .conversation-page .comms-content {
    display: flex;
    height: 100%;
    min-height: 0;
    padding-block: 0;
    flex-direction: column;
    overflow: hidden;
  }
  .conversation-page #chat-root {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
  }
  .conversation-page .chat-sidebar > .community-rail-content {
    position: static;
    width: auto;
    height: 100%;
    padding: 24px 18px 28px;
    border-right: 1px solid var(--hairline);
    background: var(--black);
    overflow: hidden;
  }
  .comms-page .community-rail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }
  .comms-page .chat-unisearch { min-width: 0; padding: 0 0 8px; }
  .chat-unisearch-rail { display: block; padding: 0 0 8px; }
  .comms-page .rail-create-actions { min-height: 44px; margin: 0; }
  .comms-page .rail-create-actions:empty { display: none; }
  .chat-unisearch-main { display: none; }
  .comms-page .folder-tabs {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100dvh - 32px);
    margin: 0;
    padding: 22px 14px;
    border: 0;
    background: transparent;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .comms-page .folder-tabs a {
    justify-content: space-between;
    min-width: 0;
    margin: 0;
    padding: 13px 12px;
    border: 0;
    border-top: 1px solid var(--hairline);
    text-align: left;
    box-shadow: none;
  }
  .comms-page .folder-tabs a:last-child { border-bottom: 1px solid var(--hairline); }
  .comms-page .folder-tabs a.active {
    padding-left: 9px;
    border-left: 3px solid var(--red);
    background: var(--hover);
    box-shadow: none;
  }
  .comms-page .comms-content { min-width: 0; padding: 22px 24px 28px; }
  .comms-page .comms-content > .comms-head { margin-bottom: 8px; }
  .conversation-page .comms-content > .comms-head { flex: 0 0 auto; }
  .conversation-page .message-thread-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .conversation-page .message-list { margin-bottom: 0; }
  .conversation-page .comms-head h1 {
    min-width: 0;
    overflow: hidden;
    font-size: var(--desktop-page-title-size);
    line-height: .98;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .challenges-page .challenge-index-title,
  .comms-page .dispatch-row {
    grid-template-columns: minmax(150px, .8fr) minmax(0, 1.5fr) 86px minmax(92px, auto);
    align-items: baseline;
    gap: 20px;
    padding: 18px 12px;
  }
  .comms-page .dispatch-title,
  .comms-page .dispatch-preview { grid-row: 1; }
  .comms-page .dispatch-preview { grid-column: 2; }
  .comms-page .dispatch-kind { grid-column: 3; grid-row: 1; }
  .comms-page .dispatch-time { grid-column: 4; grid-row: 1; text-align: right; }
  .comms-page .comms-form,
  .comms-page .broadcast-confirm { padding: 34px; }
  .conversation-page #message-composer {
    margin-top: auto;
    padding: 14px 16px 12px;
    border: 0;
    border-top: 1px solid var(--hairline);
  }
  .conversation-page #message-composer textarea {
    min-height: 88px;
    margin-bottom: 8px;
    padding: 9px 11px;
  }
  .conversation-page #message-composer .composer-reply,
  .conversation-page #message-composer .composer-edit { margin: 0 0 8px; }
  .conversation-page #message-composer .attachment-selection { margin: 0 0 8px; padding-block: 6px; }
  .conversation-page #message-composer .composer-actions { gap: 8px; }
  .conversation-page #message-composer .composer-actions .btn { min-width: 96px; }
  .comms-page .message-list,
  .comms-page .comms-form {
    border-left: 0;
    border-right: 0;
  }
  .conversation-page .message-list {
    --message-surface-odd: var(--black);
    --message-surface-even: var(--black);
    border-bottom: 0;
  }
  .comms-page .message { padding: 19px 22px; }
  .comms-page .message-body { max-width: 74ch; }
  .comms-page .broadcast-body { max-width: 74ch; font-size: 17px; }
  .comms-page .member-manager { max-width: 760px; }

  /* Admin owns its desktop composition in admin.css. Keeping the ledger rules
     in one stylesheet prevents the navigation rail from becoming an overlay. */
  .admin-page { background-image: none; }
}

@media (min-width: 900px) and (max-width: 1120px) {
  body.entry .card { grid-template-columns: 220px minmax(320px, 430px); column-gap: 48px; padding-inline: 52px; }
  .books-page .books-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-page .order-card { grid-template-columns: minmax(270px, .75fr) minmax(390px, 1.25fr); }
  .comms-page .dispatch-row { grid-template-columns: minmax(140px, .8fr) minmax(0, 1.4fr) 78px minmax(88px, auto); gap: 14px; }
}

@media (min-width: 1200px) {
  .comms-page .conversation-workspace:not(.challenges-workspace) { grid-template-columns: var(--folder-pane-width) minmax(520px, 1fr) 280px; }
  .comms-page .conversation-workspace.details-collapsed:not(.challenges-workspace) { grid-template-columns: var(--folder-pane-width) minmax(520px, 1fr) 44px; }
  .comms-page .chat-details {
    position: relative;
    display: block;
    min-width: 0;
    background: rgb(255 255 255 / 2%);
  }
  .comms-page .challenges-workspace .chat-details { display: none; }
  .comms-page .chat-details-inner {
    position: sticky;
    top: 16px;
    max-height: calc(100dvh - 32px);
    padding: 54px 22px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .comms-page .chat-details-toggle { position: absolute; z-index: 2; top: 10px; left: 8px; display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
  .comms-page .chat-details-toggle:hover { background: var(--hover); color: var(--white); }
  .comms-page .chat-details-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
  .comms-page .details-collapsed .chat-details-inner { display: none; }
  .comms-page .details-collapsed .chat-details-toggle { left: 6px; }
  .comms-page .details-collapsed .chat-details-toggle svg { transform: rotate(180deg); }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}