.hidden {
    display: none;
}

.attachment-list {
    margin: 0 0 1rem;
}

.attachment-list-item {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.attachment-remove {
    height: auto;
    line-height: 1.6;
    margin: 0;
    padding: 0 1rem;
}

/* Hide progressively less important columns */

#sailing .race-type {
    display: none;
}

@media (min-width: 640px) and (max-width: 1250px) {
    #sailing .race-type-name {
        display: none;
    }

    #sailing .race-type {
        display: table-cell;
    }

}

@media (min-width: 640px) and (max-width: 1240px) {
    #sailing .other {
        display: none;
    }
}
@media (min-width: 640px) and (max-width: 1072px) {
    #sailing .galley {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 912px) {
    #sailing .rescue-crew {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 800px) {
    #sailing .rescue-helm {
        display: none;
    }
}

.container-wide {
    overflow: hidden;
    max-width: none;
}

/* SortBox cell: sortable <th> links do this job on desktop, so the box only
   needs to show up once the table has collapsed into cards on mobile. */
.sort-box {
    display: none;
}


@media (max-width: 640px) {

    /* Two-column label/value tables (e.g. the member-details table on
       Members/view) have no header row to hide, so the .index card
       transform below doesn't apply -- just keep them as ordinary
       tables and let text wrap instead of Milligram's default mobile
       table CSS, which turns every table into a horizontally-scrolling,
       nowrap flex row. */
    .definition-table table {
        display: table !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .definition-table thead {
        display: table-header-group !important;
    }

    .definition-table tbody {
        display: table-row-group !important;
        overflow-x: revert;
        white-space: normal;
    }

    .definition-table tr {
        display: table-row !important;
    }

.definition-table th,
.definition-table td {
    display: table-cell !important;
    width: auto;
    white-space: normal;
    word-wrap: break-word;
    box-sizing: border-box;
    padding: 0.5em;
    vertical-align: top;
}
/* Mobile card layout -- applies to the #sailing race/duty listing cell and
   to any index page (its root content div carries the `index` class). */
    #sailing table,
    #sailing tbody,
    #sailing tr,
    .index table,
    .index tbody,
    .index tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #sailing thead,
    .index thead {
        display: none;
    }

    #sailing tr,
    .index tr {
        position: relative;
        margin-bottom: 1rem;
        padding: .75rem;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

    /* Anchor the cancelled-badge to the whole card instead of just the
       title cell's thin strip, and size it up to match. */
    #sailing td.cancelled,
    .index td.cancelled {
        position: static;
    }

    #sailing .cancelled-badge,
    .index .cancelled-badge {
        font-size: 1.2rem;
        padding: 0.35em 1.2em;
    }

    #sailing td,
    .index td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        padding: .25rem 0;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    #sailing td:last-child,
    .index td:last-child {
        border-bottom: none;
    }

    #sailing td::before,
    .index td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 1rem;
        white-space: nowrap;
    }

    /* The identifying column (membership type, boat size) acts as the
       card's title instead of a labelled field - just the value itself,
       no "Membership Type: " prefix. */
    #sailing td.card-title::before,
    .index td.card-title::before {
        content: none;
    }

    #sailing td.card-title,
    .index td.card-title {
        font-weight: bold;
        font-size: 1.1em;
    }

    .optional {
        display: none;
    }

    .event_description {
        white-space: normal;
        overflow: hidden;
        max-height: 20em;
        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    }

    .sort-box {
        display: block;
        margin-bottom: 1.5rem;
    }

    .sort-box select {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 640px) {
    /* Article tables are freeform/editor-authored and can be any shape (a
       few records, or a wide reference table like a boat/yardstick lookup)
       -- we can't guess which, so never restructure them. Just cancel
       Milligram's flex/card mobile scheme and let the table scroll
       horizontally instead, keeping its original rows/columns intact.

       !important throughout: editor-pasted content (e.g. Word/LibreOffice
       exports) routinely carries inline style="width:...pt"/"height:...pt"
       / border attributes on the table and its cells, which would
       otherwise beat these rules regardless of selector specificity. */
    .article-body table {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        border-spacing: 0;
    }

    .article-body thead {
        display: table-header-group !important;
        border-right: none;
    }

    .article-body tbody {
        display: table-row-group !important;
        overflow-x: visible;
        white-space: normal;
    }

    .article-body tr {
        display: table-row !important;
        height: auto !important;
    }

    .article-body td,
    .article-body th {
        display: table-cell !important;
        white-space: normal !important;
        height: auto !important;
        padding: 1.2rem 1.5rem;
        text-align: left;
    }
}

#blogo {
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: auto;
    opacity: 0.05;
        pointer-events:none;
     z-index: -1;
}

.page_title {
  font-size: calc((.4em + 1vmin) + (.4em + 1vmax));
  height: auto;
  margin: 10px;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
}

tr:nth-child(odd) {background-color: #f2f2f2;}

.navigation_list {
  border-bottom: solid 1px #ccc;
  padding: 20px 10px;
  text-align: center;
}
.navigation_item {
  display: inline;
  list-style: none;
  margin: 0 20px;
}

.event_past {
    opacity: 0.5;
}

.notconfirmed {
    opacity: 0.5;
}

.cancelled {
    position: relative;
    text-decoration: line-through;;
}

.cancelled-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    background-color: rgba(200, 0, 0, 0.9);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 0.2em 0.9em;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

.expired {
    opacity: 0.5;
}

.current {
    font-weight: bold;
}

.noflex {
    display: block;
 }

.attrtable {
    display: table;
    border-collapse: collapse;
    width: 100%;
 }

.attrtable tr{
    display: table-row;
 }
.attrtable tbody{
    display: table-row-group;
 }
.attrtable td{
    display: table-cell;
 }

.attrtable th{
    display: table-cell;
 }

/* Tints each of Adults/Juniors/Boats on the join/renew form so the three
   stand out from each other as well as from Address/Rules/Cost around them
   - adjacent sections sharing one colour would just blur into a single
   block. Each colour is one already established sitewide for exactly this
   "gentle status tint" purpose (cake.css's .message.error/.message/
   .message.success), not a new palette invented for this form. Applied as
   a backdrop behind the existing white tab-group card rather than a colour
   on the card itself. Sits behind the card, not on it: the "no-tabs"
   collapsed state (a membership type with a single fixed adult, or no
   juniors/boats at all) already sets the card's own background to none, so
   this shows straight through with no extra rule needed there. */
.section-highlight {
    border-radius: 0.4rem;
    padding: 1.5rem 1.5rem 0.1rem;
    margin-bottom: 1.5rem;
}

.section-highlight-mem {
    background: #fcebea;
}

.section-highlight-jun {
    background: #eff8ff;
}

.section-highlight-boat {
    background: #e3fcec;
}

/* Adults/Juniors/Boats on the join/renew form (templates/Groups/add.php):
   one tab per active row, switched client-side by group_add.js's
   selectTab() - keeps a multi-adult/multi-boat application from turning
   into one very long scroll of repeated field blocks. The tab strip and the
   single panel it's showing sit inside one bordered card, styled like a
   real folder tab poking up out of the card it belongs to: the selected
   tab is cut from the same white as the panel below it and its dividing
   line disappears into that panel, while the rest sit dimmed on a
   recessed strip. Every colour/radius here is one already used elsewhere
   on the site (table borders, the .content card, the brand red) rather
   than a new palette invented for this one widget. Milligram's default
   button styling (solid red, uppercase) is reset throughout, since a strip
   of tabs reads as navigation, not a row of call-to-action buttons. */
.tab-group {
    border: 0.1rem solid #e1e1e1;
    border-radius: 0.4rem;
    background: #fff;
    margin: 0 0 1.5rem;
    overflow: hidden;
}

.tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.2rem;
    background: #f5f7fa;
    border-bottom: 0.1rem solid #e1e1e1;
    padding: 0.6rem 0.6rem 0;
}

/* One tab, e.g. "Jamie Smith", plus its own small Remove button - grouped so
   the pair reads and highlights as one tab, the way a browser tab and its
   close button do, rather than two independent controls sitting side by
   side. Emergency-contact tabs use the same wrapper with no .tab-remove
   inside (they still share one "Remove Contact" button above the strip),
   so refreshTabs() can treat every tab strip identically. */
.tab-item {
    display: flex;
    align-items: stretch;
    border: 0.1rem solid transparent;
    border-bottom: none;
    border-radius: 0.3rem 0.3rem 0 0;
    margin-bottom: -0.1rem;
}

.tab-button {
    background: none;
    border: none;
    color: #7d8794;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    height: auto;
    line-height: normal;
    padding: 0.8rem 0.6rem 0.8rem 1.6rem;
    cursor: pointer;
}

.tab-item:not(:has(.tab-remove)) .tab-button {
    padding-right: 1.6rem;
}

.tab-button:hover {
    background: none;
    color: #2f85ae;
}

/* Colour alone isn't a strong enough signal for someone tabbing through the
   form with a keyboard - the button-level :focus/:hover reset above strips
   Milligram's default outline, so give it back explicitly here rather than
   leaving keyboard focus invisible. */
.tab-button:focus-visible {
    color: #2f85ae;
    outline: 0.2rem solid #2f85ae;
    outline-offset: -0.1rem;
}

.tab-item.tab-current {
    background: #fff;
    border-color: #e1e1e1;
    border-bottom-color: #fff;
}

.tab-item.tab-current .tab-button {
    color: #d33c43;
    font-weight: 700;
}

/* Small and muted at rest - a tab's own Remove button shouldn't compete
   with the tab label for attention, only the brand-red hover confirms
   what it's about to do. */
.tab-remove {
    background: none;
    border: none;
    color: #b7bec9;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 1.2rem 0 0.2rem;
    cursor: pointer;
}

.tab-item.tab-current .tab-remove {
    color: #d9a9ad;
}

.tab-remove:hover {
    background: none;
    color: #d33c43;
}

.tab-remove:focus-visible {
    outline: 0.2rem solid #2f85ae;
    outline-offset: -0.1rem;
}

/* Careful not to let a disabled Remove button (the minimum's been reached)
   look interactive - opacity dims it regardless of colour, and the hover
   colour is switched off entirely rather than just faded, so mousing over
   it doesn't flash brand red for an action that won't fire. */
.tab-remove:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.tab-remove:disabled:hover {
    color: #b7bec9;
}

.tab-item.tab-current .tab-remove:disabled:hover {
    color: #d9a9ad;
}

.tab-panel {
    padding: 1.8rem 1.8rem 0.4rem;
}

/* Applied by group_add.js's refreshTabs() when a section can only ever hold
   one slot (e.g. a "Single" membership's one adult, or a membership type
   with no juniors at all) - a tab strip offering a choice of exactly one is
   just clutter, so hide it and the card around it, and let the one panel sit
   flush the way it did before this section had tabs at all. */
.tab-group.no-tabs {
    border: none;
    border-radius: 0;
    background: none;
    overflow: visible;
}

/* Direct-child combinators, not plain descendant selectors: an adult's
   panel can itself contain a *nested* tab-group for their emergency
   contacts, and that one's own strip/panel must stay exactly as collapsed
   or expanded as its own contact count says, regardless of whether the
   Adults tab-group around it happens to be collapsed. */
.tab-group.no-tabs > .tab-strip {
    display: none;
}

.tab-group.no-tabs > .tab-panel {
    padding: 0;
}

/* The Add/Remove Adult/Junior/Boat/Contact buttons above. Milligram swaps
   every button to solid grey on :hover and :focus, which (a) makes an
   enabled button look disabled the instant the cursor lands on it, and
   (b) keeps looking that way after a click, since the cursor is still
   sitting on the button and a completed click doesn't move the mouse away.
   Keep these red at rest, hovered, and focused alike - only [disabled]
   (Milligram's existing faded-opacity treatment, untouched here) should
   ever look different. Keyboard focus gets an explicit ring instead of the
   colour swap, so it's still visible without borrowing the disabled look. */
.toggle-button:hover,
.toggle-button:focus {
    background-color: #d33c43;
    border-color: #d33c43;
    color: #fff;
}

/* A mouse click focuses the button too, but Chromium only matches
   :focus-visible for keyboard-driven focus - so this ring only ever shows
   up for someone tabbing through the form, on top of the plain :focus rule
   above that already keeps the colour red either way. */
.toggle-button:focus-visible {
    outline: 0.2rem solid #2f85ae;
    outline-offset: 0.1rem;
}

.button-group {
    margin-right: 1rem;
}

.button-group .button-current {
    background-color: #aaa;
    border-color: #aaa;
    cursor: default;
}

/* Groups a set of related filter buttons (e.g. Bills' Status/Season
   filters) in a labelled box, so it's clear at a glance which buttons
   belong together when several filter groups sit side by side. */
.filter-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-group {
    border: 0.1rem solid #d1d1d1;
    border-radius: .4rem;
    padding: 0.8rem 1rem 0.4rem;
}

.filter-group-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05rem;
    color: #606c76;
    margin-bottom: 0.5rem;
}

.filter-group .button-group {
    margin-right: 0;
}

.ok_button {
    background-color: transparent;
    border: 0.1rem solid transparent;
    border-radius: .4rem;
    color: #3aa655;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    height: 3.8rem;
    letter-spacing: .1rem;
    line-height: 3.8rem;
    padding: 0 3.0rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.event-title-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem;
}

.event-title-row h3 {
    margin-bottom: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-widget {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: .75rem;
    font-size: 1.4rem;
}

.weather-icon {
    display: flex;
    flex-shrink: 0;
    color: #3a8ac9;
}

.weather-icon svg {
    width: 28px;
    height: 28px;
}

.weather-temps {
    font-weight: 700;
}

.weather-wind {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.weather-wind svg {
    width: 16px;
    height: 16px;
}

.weather-precip {
    color: #3a8ac9;
}

.event-tide-tools {
    margin: -1rem 0 1.5rem;
}

.event-tide-note {
    font-size: 1.3rem;
    margin: 0.8rem 0;
}

.event-tide-preview table {
    font-size: 1.4rem;
}

.event-tide-preview th,
.event-tide-preview td {
    padding: 0.5rem 1rem;
}

.event-tide-preview tr.event-tide-in-window {
    background-color: #eaf6ed;
}

.event-tide-preview .event-tide-use {
    height: auto;
    padding: 0.2rem 1.2rem;
    font-size: 1rem;
}























/* Section heading with its action button alongside (e.g. Members/info's
   Boats and Emergency Contact sections); wraps cleanly on narrow screens. */
.section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.section-header h4,
.section-header .button {
    margin-bottom: 0;
}

/* A role and the pages it grants access to (Members/info). */
.role-block {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 0.1rem solid #d1d1d1;
}

.role-block h5 {
    margin-bottom: 0.25rem;
}

.role-block h6 {
    margin: 1.5rem 0 0.5rem;
}

.role-block h6 small {
    font-weight: normal;
    margin-left: 0.5rem;
}

.role-block summary {
    cursor: pointer;
    font-weight: bold;
}

.priv-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.priv-links li {
    margin: 0;
}

svg.chart-pie {
    width: 100%;
    max-width: 640px;
}

/* Seasons add/edit: one row per membership type / boat size, matching the
   Seasons/view page's Fees & Boats tables. Wrapped in .index so it gets the
   same mobile card treatment as every other listing table (see the
   .index/#sailing table rules above) instead of Milligram's default
   horizontally-scrolling, sideways-looking mobile table. */
.fee-table .input {
    margin-bottom: 0;
}
.fee-table input {
    margin-bottom: 0;
}
.no-discount-note {
    margin: 0;
    font-size: 1.3rem;
    font-style: italic;
    color: #5a6a78;
}

/* PDFs embedded in articles: inline viewer plus download link */
.pdf-viewer {
    margin: 1em 0;
}

.pdf-viewer iframe {
    width: 100%;
    height: 80vh;
    min-height: 480px;
    border: 1px solid #ccc;
}