/* ==========================================================================
   Site polish (Oct 2026) - loaded last on every public page.

   One file for the round of layout fixes the club asked for, so each one is
   written down where it is made instead of being scattered as overrides
   through style.css, atmosphere.css and glass-cards.css:

     1. A phone uses the whole width of the screen.
     2. No big card behind groups of small cards - only the small cards.
     3. Mission & Vision cards never cut a line of text in half.
     4. Running text: centred, and even on both edges.
     5. Photo and event sliders: dots under the picture, no ‹ › arrows.
     6. Event Highlights: four cards to a row on a desktop.
     7. The footer sits flush with the bottom of the page.
     8. The Member Portal's guide and reset boxes are readable.
     9. An error is shown where it happened (common.js showInlineError).
   ========================================================================== */

/* ---------- 1. A phone uses the whole width ----------
   main kept 46px each side for the two side tabs, so on a 375px phone the
   content was 283px wide - a narrow column floating in the middle. The
   Join and Donate tabs stay where they always were, at the two edges. */
@media (max-width: 700px) {
  :root { --fab-room: 10px; --gutter: 10px; }
  main { padding-left: 10px; padding-right: 10px; }
  .page-hero { margin-left: 0 !important; margin-right: 0 !important;
               padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---------- 2. Only the small cards ----------
   A section like Executive Committee was a large framed card with the member
   cards sitting on it. Now it is the heading and the cards on the page itself,
   the way the Committee page has always looked. A form keeps its card - that
   one is the form, not a frame around other cards. */
:root[data-surface][data-theme] .panel:not(.form-page),
:root .panel:not(.form-page) {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
:root[data-surface][data-theme] .panel:not(.form-page)::before,
:root[data-surface][data-theme] .panel:not(.form-page)::after,
:root .panel:not(.form-page)::before,
:root .panel:not(.form-page)::after { display: none !important; }
:root[data-surface][data-theme] .panel:not(.form-page):hover { transform: none !important; }

/* ---------- 3. Mission & Vision: whole lines only ----------
   The card had a fixed height, and in a column flexbox the paragraph was the
   part that gave way - so the last visible line was sliced through the middle
   ("promote health" half shown). The heading, picture and text now keep their
   own height (two lines of title, four of text), every card in the row grows
   to the tallest one, and "Tap to read" stays at the bottom of each. */
.mission-card { height: auto !important; }
.mission-card img,
.mission-card h3,
.mission-card p { flex-shrink: 0; }
.mission-card h3 { line-height: 1.25; }
.mission-card p { line-height: 1.6; color: #d7e3f1 !important; }
.mission-rail { align-items: stretch; }

/* ---------- 4. Running text: centred, both edges even ----------
   Every line runs edge to edge, and the last line - which cannot fill the
   width - sits in the middle instead of hanging to one side. Desktop and
   phone alike. */
.lead-justify,
.lead-italic {
  text-align: justify !important;
  text-align-last: center !important;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  /* On a phone everything in the page body is centred: headings, eyebrows,
     card text. Paragraphs are justified with their last line centred, as
     above. Forms, tables and chat keep their own alignment - a label or a
     column of figures centred would be harder to read, not easier. */
  main h1, main h2, main h3, main h4,
  main .eyebrow, main .section-title, main .panel-title,
  main .card, main .member-card, main .event-card, main .notice-item,
  main figcaption { text-align: center; }
  /* Long running paragraphs directly in a section: even edges, last line
     centred. Text inside a card - an address, a phone number, a caption - is
     simply centred: justifying a short line only opens gaps between words. */
  main > section > p:not([class*="chat"]),
  main > section > .center > p,
  main .lead-justify, main .lead-italic {
    text-align: justify;
    text-align-last: center;
  }
  main .card p, main .card li, main .card div,
  main .contact-card p, main .contact-card div {
    text-align: center;
    text-align-last: center;
  }
  /* And everything else in the page body that is not a form, a table, a chat
     or one of the portal's notice boxes: notices, the membership page's
     introduction, policy pages, the dashboard's own words. */
  main :is(p, li, h1, h2, h3, h4, h5, h6, div, figcaption, blockquote, dd, dt, small):not(form *):not(table *):not([class*="chat"]):not([class*="chat"] *):not(.portal-note):not(.portal-note *):not(.md-table *) {
    text-align: center;
  }
}

/* ---------- 5. Sliders: dots only ----------
   The ‹ › buttons on each side of a photo came off; the slide keeps moving by
   itself, the dots underneath show where it is and can be tapped, and a swipe
   or the arrow keys still work. */
.gshow-nav,
.event-nav { display: none !important; }

/* ---------- 6. Event Highlights: four to a row, the rest centred ----------
   Four cards across on a desktop (a phone in desktop mode included); a fifth
   starts the next row. A row that is not full - three and then one, say - has
   its cards in the middle, not huddled at the left. Flex rather than grid for
   exactly that: a grid cannot centre a short last row. */
.highlight-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px !important;
}
.highlight-grid > .highlight-card { flex: 0 0 calc((100% - 3 * 20px) / 4); min-width: 0; }
@media (max-width: 899px) {
  .highlight-grid > .highlight-card { flex-basis: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 700px) {
  .highlight-grid { gap: 12px !important; }
  .highlight-grid > .highlight-card { flex-basis: calc((100% - 12px) / 2); }
}

/* The "1 / 8" counter in the corner of every photo slideshow is gone; the
   dots underneath already show where the slideshow is. */
.gshow-count { display: none !important; }

/* ---------- 7. Footer flush with the bottom ----------
   The blurred haze behind the footer was scaled up by 6% from its middle, so
   it reached 17px below the footer and the page could scroll past the end -
   the footer looked lifted off the bottom. Scaled from the bottom edge it
   grows only upwards and sideways, where it belongs. */
#site-footer > .footer-sea-haze { transform-origin: 50% 100% !important; }

/* ---------- 8. Member Portal: the guide and the reset box ----------
   Both are `.portal-note` boxes on the cream sign-in card, and both had the
   dark site's pale text - pale blue on cream, which nobody could read. */
.portal-note,
:root[data-surface][data-theme] .portal-note {
  background: #fff4d6 !important;
  background-image: none !important;
  border: 1px solid #e3c36f !important;
  border-left: 5px solid #b8860b !important;
  border-radius: 12px !important;
  color: #3a2e12 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 14px 16px !important;
  text-align: left;
}
.portal-note strong { color: #8a5a00 !important; display: block; margin-bottom: 6px; }
.portal-note p, .portal-note span, .portal-note label { color: #3a2e12 !important; }
.portal-note a { color: #0b4a7a !important; font-weight: 700; }
.portal-note input {
  background: #ffffff !important;
  color: #1d2733 !important;
  border: 1px solid #c9b27a !important;
}
.portal-note .fp-btn { width: 100%; margin-top: 10px; }
.portal-forgot-panel { margin-top: 12px; }
.portal-forgot-panel .fp-step { margin-top: 12px; }
.portal-forgot-panel label { display: block; font-weight: 700; margin: 10px 0 6px; }
.portal-forgot-panel .portal-forgot-contacts a { display: block; margin-top: 6px; }

/* ---------- 9. An error where it happened ----------
   Shown directly under the button or field that was used, as well as in the
   red band at the top - so nobody has to look away from what they were doing
   to find out what went wrong. Added by common.js. */
.inline-error {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fde8e6;
  border: 1px solid #e0796d;
  border-left: 5px solid #c0392b;
  color: #7a1c12;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
  animation: inline-error-in 0.2s ease;
}
.inline-error::before { content: "⚠ "; }
@keyframes inline-error-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .inline-error { animation: none; } }

/* ---------- Member Portal: the welcome line ----------
   Only the greeting, centred, and nothing to tap (Oct 2026). */
.md-welcome { text-align: center !important; }
.md-welcome .md-notice-body {
  margin: 0;
  font-weight: 800;
  font-size: 1rem;
  color: #3a2e12 !important;
  cursor: default;
  text-align: center !important;
  text-align-last: center !important;
}

/* ---------- Member Portal: every history, on a phone ----------
   Each payment is one card, and each fact in it is a small label with its
   value on the line beneath - not a label squeezed against a value at the
   other end of the line. The months covered wrap as chips across the full
   width, and a reason for refusal sits in its own red box under them. The
   same for Monthly Fees, Annual Function Fees and every other record table
   in the portal (`.md-table.is-record`). */
@media (max-width: 620px) {
  .md-table.is-record td {
    display: block !important;
    padding: 10px 14px !important;
    text-align: left !important;
    text-align-last: auto !important;
  }
  .md-table.is-record td::before {
    display: block;
    margin-bottom: 5px;
  }
  .md-table.is-record td small,
  .md-table.is-record td .pay-how { display: block; margin-top: 2px; }
  .md-table.is-record td br { display: none; }
  .md-table.is-record .fee-hist-chips { justify-content: flex-start; }
  .md-table.is-record .fee-hist-chip { flex: 0 0 auto; line-height: 1.5; }
  .md-table.is-record .annual-history-reason {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(192, 57, 43, 0.12);
    border: 1px solid rgba(255, 143, 143, 0.35);
    font-size: 0.85rem;
  }
  .md-table.is-record .dash-amount { font-size: 1.05rem; font-weight: 800; }
  .md-table.is-record tr { padding: 0; }
}

/* ---------- Member Portal: one card, the width of the phone ----------
   A conversation sat inside three frames - the portal's card, the view's
   card and the chat's own card - each with its border and padding, so the
   messages themselves were a narrow strip in the middle of the screen. On a
   phone the portal's outer card goes, and inside Personal Messages and
   Message to Support the chat drops its own frame: one card, edge to edge,
   holding the conversation. The chat itself gets most of the screen's
   height. */
@media (max-width: 700px) {
  :root[data-surface][data-theme] .member-portal.dash-mode,
  .member-portal.dash-mode {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
  }
  :root[data-surface][data-theme] .member-portal.dash-mode::before,
  :root[data-surface][data-theme] .member-portal.dash-mode::after,
  .member-portal.dash-mode::before,
  .member-portal.dash-mode::after { display: none !important; }
  .member-portal.dash-mode .member-portal-form { padding: 0 !important; }
  .dash-view { padding-left: 10px !important; padding-right: 10px !important; }
}
:root[data-surface][data-theme] #view-messages .chat-panel,
#view-messages .chat-panel,
:root[data-surface][data-theme] #view-adminmail .am-thread-wrap,
#view-adminmail .am-thread-wrap {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
:root[data-surface][data-theme] #view-messages .chat-panel::before,
:root[data-surface][data-theme] #view-messages .chat-panel::after,
#view-messages .chat-panel::before,
#view-messages .chat-panel::after { display: none !important; }
@media (max-width: 700px) {
  #view-messages .chat-thread,
  #view-adminmail .chat-thread { min-height: 55vh; }
  #view-messages .chat-compose textarea,
  #view-adminmail .chat-compose textarea { font-size: 1rem; }
}

/* A message just sent, shown before the server has answered. */
.chat-msg.is-sending { opacity: 0.65; }
.chat-msg.is-sending .chat-meta { font-style: italic; }

/* The red band at the top was only as wide as half the screen on a phone:
   pinned at left 50%, a box that sizes itself to its text only has the other
   half to grow into, so a sentence came out five words to a line. It now
   takes the width its words need, up to the width of the screen. */
html .toast.show {
  width: max-content !important;
  max-width: min(680px, calc(100vw - 24px)) !important;
  box-sizing: border-box;
}

/* The portal's tiles, centred on a phone like the rest of the page. */
@media (max-width: 700px) {
  .dash-tile { text-align: center !important; align-items: center !important; }
  .dash-tile > * { text-align: center !important; }
}

/* ---------- Home: the Notice Board ticker on a phone ----------
   150px showed one and a half notices, so one was always sliced through the
   middle. On a phone it is tall enough for about three, and the notices fade
   in and out at its edges instead of being cut by a hard line. */
@media (max-width: 700px) {
  #home-notice-ticker.notice-scroller {
    height: 230px !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .notice-bar { height: auto !important; min-height: 0 !important; }
}

/* ---------- Search on a phone ----------
   The animated border (border-beam.css) makes whatever it decorates the
   positioning parent of its contents. On a phone that was the search
   wrapper - the 49px circle around the magnifier - so the field that is
   meant to drop down across the width of the header opened 49px wide and
   nothing could be typed into it. On a phone the wrapper steps back again,
   the field opens full width under the header, and the decorative ring
   (which would now trace the whole header) is left out. */
@media (max-width: 900px) {
  .nav-search[data-bb] { position: static !important; isolation: auto !important; }
  .nav-search > .bb-ring,
  .nav-search > .bb-glow { display: none !important; }
}
@media (max-width: 900px) {
  /* The results start under the dropped-down field, not behind it. */
  .nav-search.is-open ~ .search-panel,
  .site-header:has(.nav-search.is-open) .search-panel { top: calc(100% + 52px); }
}

/* ---------- Room above the footer on a phone ----------
   The footer's sea fades up over the last 110px of the page (atmosphere.css
   #site-footer::before), and on a phone the page ended only a few pixels
   above it - on the Notice Board the last notice ran straight into the water
   and the footer looked as if it had risen over the board. The page now
   ends with clear space before the footer begins. */
@media (max-width: 700px) {
  main { padding-bottom: 64px !important; }
  #site-footer { margin-top: 24px !important; }
}

/* ---------- Notice Board page on a phone ----------
   The board's frame faded out at its top and bottom edges - border and all -
   so on a phone it had no visible bottom: the last notice simply dissolved
   and the footer seemed to have risen up over the board. The frame keeps its
   whole outline now, and is sized to the screen it is on. */
@media (max-width: 700px) {
  .notice-board-frame {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    height: min(520px, 68vh) !important;
  }
}