/* ============================================================================
   sv-ui.css - stitts-vegas.com UI layer
   Styles the EXISTING class contract emitted by Framework.Web server controls
   (#headernav, table.quicktable, .dvcontainer, ul.dv, .buttons, .contentblock)
   so that no shared framework code had to change. New sv-* classes are additive.
   Requires sv-theme.css to be loaded first.
   ========================================================================= */

/* ---------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, form,
fieldset, blockquote, figure, table, th, td {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--sv-bg);
    background-image:
        radial-gradient(ellipse at 50% -10%, var(--sv-accent-soft) 0%, transparent 60%),
        repeating-linear-gradient(135deg, var(--sv-bg-pattern) 0 2px, transparent 2px 6px);
    background-attachment: fixed;
    color: var(--sv-text);
    font-family: var(--sv-font);
    font-size: var(--sv-fs-base);
    line-height: 1.55;
    min-height: 100vh;
    margin: 0;
}

img { border: 0; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 { color: var(--sv-heading); font-weight: 650; line-height: 1.25; }
h1 { font-size: var(--sv-fs-2xl); }
h2 { font-size: var(--sv-fs-xl); }
h3 { font-size: var(--sv-fs-lg); }

p { margin-bottom: var(--sv-space-3); }
p:last-child { margin-bottom: 0; }

ol { list-style: decimal; margin-left: 1.4em; }
ul { list-style: square; margin-left: 1.4em; }

a { color: var(--sv-link); text-decoration: none; transition: color var(--sv-transition); }
a:hover { color: var(--sv-link-hover); text-decoration: underline; }
a:visited { color: var(--sv-link-visited); }

hr { border: 0; border-top: 1px solid var(--sv-border); margin: var(--sv-space-5) 0; }

strong, b { font-weight: 650; }

/* visible, consistent keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--sv-accent);
    outline-offset: 2px;
    border-radius: var(--sv-radius-sm);
}

::selection { background: var(--sv-accent-soft); }

/* --------------------------------------------------------------- layout --- */

#top { position: absolute; }

#container {
    width: 100%;
    max-width: var(--sv-shell-max);
    margin: 0 auto;
    padding: var(--sv-space-4);
    display: grid;
    grid-template-columns: var(--sv-sidebar-w) minmax(0, 1fr);
    grid-template-areas:
        "header  header"
        "sidebar content";
    gap: var(--sv-space-4);
    align-items: start;
}

/* DetailView / Mobile masters have no sidebar - collapse to one column.
   Driven by an explicit class on #container (set in the master page) rather
   than :has(), so the layout is correct on older browsers too. */
#container.sv-nosidebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "content";
}

.header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: var(--sv-space-4);
    flex-wrap: wrap;
    min-height: 0;
    position: relative;
    width: auto;
    padding: var(--sv-space-2) 0 var(--sv-space-4) 0;
    border-bottom: 1px solid var(--sv-border);
}

.header img {
    float: none;
    margin: 0;
    max-height: 54px;
    width: auto;
    border-radius: var(--sv-radius-sm);
}

/* ----------------------------------------------------------------- logo --- */

.sv-logo-link { display: block; flex: 0 0 auto; line-height: 0; text-decoration: none; }
.sv-logo-link:hover { text-decoration: none; }
.sv-logo-link:hover .sv-logo-notch { fill: var(--sv-accent-hover); }

.sv-logo { width: 268px; height: auto; max-width: 100%; overflow: visible; }

/* CSS variables are ignored in SVG presentation attributes, so the logo's
   colours all come from these classes - see UserControls/SvLogo.ascx */
.sv-logo-chip   { fill: var(--sv-surface-2); stroke: var(--sv-accent); stroke-width: 2; }
.sv-logo-inner  { fill: none; stroke: var(--sv-accent); stroke-width: 1; opacity: 0.45; }
.sv-logo-notch  { fill: var(--sv-accent); transition: fill var(--sv-transition); }

/* red suits stay red in both themes; black suits follow the text colour, so
   they are dark on parchment and light on felt */
.sv-logo-red    { fill: var(--sv-danger); }
.sv-logo-dark   { fill: var(--sv-text); }

.sv-logo-kicker {
    fill: var(--sv-text-muted);
    font-family: var(--sv-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.6px;
}
.sv-logo-word {
    fill: var(--sv-heading);
    font-family: var(--sv-font-display);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: var(--sv-space-4);
    float: none;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow: visible;
    color: var(--sv-text);
    font-size: var(--sv-fs-base);
}

.content {
    grid-area: content;
    float: none;
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: visible;
    background: none;
    border: 0;
    font-size: var(--sv-fs-base);
}

.content span.h {
    display: block;
    color: var(--sv-heading);
    font-size: var(--sv-fs-lg);
    font-variant: normal;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-bottom: var(--sv-space-2);
}

#footer-spacer { display: none; }

#footer {
    width: 100%;
    max-width: var(--sv-shell-max);
    height: auto;
    margin: var(--sv-space-5) auto 0 auto;
    padding: var(--sv-space-4);
    border-top: 1px solid var(--sv-border);
    color: var(--sv-text-faint);
    font-size: var(--sv-fs-xs);
    text-align: center;
}
#footer a { color: var(--sv-text-muted); }

/* ------------------------------------------------------------------ nav --- */

/* HeaderLinkBar renders: <span><ul id="headernav"><li><span><a>..</a></span></li></ul></span> */
#headernav {
    position: static;
    right: auto;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sv-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

#headernav li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    background: none;
}

#headernav span { display: block; float: none; margin: 0; padding: 0; background: none; }

#headernav a {
    display: block;
    float: none;
    height: auto;
    line-height: 1.2;
    margin: 0;
    padding: var(--sv-space-2) var(--sv-space-3);
    border: 1px solid transparent;
    border-radius: var(--sv-radius-pill);
    color: var(--sv-text-muted);
    font-size: var(--sv-fs-base);
    font-weight: 550;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    transition: background-color var(--sv-transition), color var(--sv-transition), border-color var(--sv-transition);
}

/* Clear the old sprite backgrounds from the <li>/<span> wrappers only. Do NOT
   include "span a" here: that selector is more specific than the .current rule
   below, and it silently cancelled the amber fill - leaving near-black label
   text on dark felt, i.e. an invisible "home" link. */
#headernav li:hover,
#headernav li:hover span,
#headernav li.current,
#headernav li.current span { background: none; }

#headernav li span a:hover {
    background-color: var(--sv-surface-2);
    border-color: var(--sv-border);
    color: var(--sv-text);
    text-decoration: none;
}

#headernav li.current span a {
    background-color: var(--sv-accent);
    border-color: var(--sv-accent);
    color: var(--sv-accent-ink);
    font-weight: 650;
}
#headernav li.current span a:hover {
    background-color: var(--sv-accent-hover);
    border-color: var(--sv-accent-hover);
    color: var(--sv-accent-ink);
}

/* HeaderLinkBar's own wrapper span (CssClass="sv-nav") - push nav right */
.header .sv-nav { display: block; margin-left: auto; }

/* ------------------------------------------------------- theme toggle --- */

.sv-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sv-space-2);
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-pill);
    box-shadow: var(--sv-shadow-1);
    color: var(--sv-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--sv-fs-md);
    line-height: 1;
    transition: background-color var(--sv-transition), color var(--sv-transition),
                border-color var(--sv-transition), transform var(--sv-transition);
}
.sv-theme-toggle:hover {
    background-color: var(--sv-surface-2);
    border-color: var(--sv-border-strong);
    color: var(--sv-accent);
    transform: translateY(-1px);
}
.sv-theme-toggle:active { transform: translateY(0); }
/* Dark is the default, so the toggle offers "switch to light" (sun) unless the
   visitor has already opted into light, when it offers dark (moon). */
.sv-theme-toggle .sv-icon-sun  { display: block; }
.sv-theme-toggle .sv-icon-moon { display: none; }
:root[data-theme="light"] .sv-theme-toggle .sv-icon-sun  { display: none; }
:root[data-theme="light"] .sv-theme-toggle .sv-icon-moon { display: block; }

/* ---------------------------------------------------------------- cards --- */

/* .contentblock is the workhorse content card across every page */
.contentblock,
.sv-card {
    background-color: var(--sv-surface);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 120px);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-1);
    color: var(--sv-text);
    margin: 0 0 var(--sv-space-4) 0;
    padding: var(--sv-space-5);
    overflow: hidden;
}
.contentblock:last-child, .sv-card:last-child { margin-bottom: 0; }
.contentblock p { padding-bottom: 0; margin-bottom: var(--sv-space-3); }
.contentblock a, .contentblock a:active { color: var(--sv-link); }
.contentblock a:visited { color: var(--sv-link-visited); }

/* felt surface - used for the calendar and chart cards */
.sv-felt {
    background-color: var(--sv-felt);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 70%),
        repeating-linear-gradient(45deg, var(--sv-bg-pattern) 0 3px, transparent 3px 8px);
    border: 1px solid var(--sv-border);
    box-shadow: var(--sv-shadow-2), inset 0 0 0 1px var(--sv-felt-edge);
}

.sv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sv-space-3);
    flex-wrap: wrap;
    margin: 0 0 var(--sv-space-4) 0;
    padding-bottom: var(--sv-space-3);
    border-bottom: 1px solid var(--sv-border);
}
.sv-card-head h2, .sv-card-head h3 { margin: 0; }
.sv-card-sub { color: var(--sv-text-muted); font-size: var(--sv-fs-sm); }

.sidebarcontent {
    display: block;
    width: auto;
    margin: 0;
    padding: var(--sv-space-4);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-1);
    font-size: var(--sv-fs-base);
}
.sidebarcontent a {
    color: var(--sv-link);
    font-variant: normal;
    font-weight: 550;
    text-decoration: none;
}
.sidebarcontent a:hover { color: var(--sv-link-hover); text-decoration: underline; }
/* the empty 323px spacer block in Site.Master no longer needs to prop the layout */
.sidebarcontent:empty { display: none; }

.dvcontainer {
    grid-area: content;
    display: block;
    float: none;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    font-size: var(--sv-fs-base);
}
.dvcontainer span.valerr { color: var(--sv-danger); font-weight: 600; }
.dvcontainer table { margin: 0 auto var(--sv-space-4) auto; }

.dvoptions {
    display: flex;
    align-items: center;
    gap: var(--sv-space-3);
    flex-wrap: wrap;
    min-height: 0;
    margin: 0 0 var(--sv-space-4) 0;
    padding: var(--sv-space-3) var(--sv-space-4);
    background-color: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    overflow: visible;
}
.dvoptions .title {
    float: none;
    order: -1;
    margin-right: auto;
    padding-top: 0;
    color: var(--sv-heading);
    font-size: var(--sv-fs-lg);
    font-weight: 650;
}

/* -------------------------------------------------------------- buttons --- */

.buttons { display: flex; align-items: center; gap: var(--sv-space-2); flex-wrap: wrap; }

.buttons a,
.buttons button,
.sv-btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sv-space-2);
    width: auto;
    margin: 0;
    padding: var(--sv-space-2) var(--sv-space-4);
    background-color: var(--sv-surface-2);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-1), var(--sv-inset);
    color: var(--sv-text);
    cursor: pointer;
    font-family: var(--sv-font);
    font-size: var(--sv-fs-base);
    font-weight: 600;
    line-height: 1.4;
    overflow: visible;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--sv-transition), border-color var(--sv-transition),
                color var(--sv-transition), transform var(--sv-transition),
                box-shadow var(--sv-transition);
}

.buttons a:hover,
.buttons button:hover,
.sv-btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: var(--sv-surface-3);
    border-color: var(--sv-accent);
    color: var(--sv-text);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--sv-shadow-2), var(--sv-inset);
}

.buttons a:active,
.buttons button:active,
.sv-btn:active,
input[type="submit"]:active,
input[type="button"]:active {
    background-color: var(--sv-surface-3);
    border-color: var(--sv-accent);
    transform: translateY(0);
    box-shadow: var(--sv-shadow-1);
}

.buttons a[disabled], .buttons button:disabled,
input[type="submit"]:disabled, input[type="button"]:disabled, .sv-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.buttons button img, .buttons a img, .sv-btn img {
    border: 0;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    padding: 0;
    flex: 0 0 auto;
}

/* Framework.Web's ButtonControl renders <button><span><img/>Text</span></button>,
   so the icon and label sit inline inside that span - baseline-aligned and with
   no gap. Making the span a flex row centres the icon against the text properly. */
.buttons button > span,
.sv-btn > span {
    display: inline-flex;
    align-items: center;
    gap: var(--sv-space-2);
    min-width: 0;
}

/* primary - amber fill, the main call to action.
   NOTE: the input[...] variants are required, not redundant. The base rule
   above matches input[type="submit"] at specificity (0,1,1), which outranks a
   bare .sv-btn-primary at (0,1,0) - so an asp:Button would silently render as
   a secondary button without these. */
.buttons a.mainbtn, .buttons button.mainbtn,
button.mainbtn, .sv-btn-primary,
input[type="submit"].mainbtn,
input[type="submit"].sv-btn-primary,
input[type="button"].sv-btn-primary {
    background-color: var(--sv-accent);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
    border-color: var(--sv-accent);
    color: var(--sv-accent-ink);
}
.buttons a.mainbtn:hover, .buttons button.mainbtn:hover,
button.mainbtn:hover, .sv-btn-primary:hover,
input[type="submit"].mainbtn:hover,
input[type="submit"].sv-btn-primary:hover,
input[type="button"].sv-btn-primary:hover {
    background-color: var(--sv-accent-hover);
    border-color: var(--sv-accent-hover);
    color: var(--sv-accent-ink);
}

/* destructive */
.buttons a.negative, .buttons button.negative,
button.negative, .sv-btn-danger {
    background-color: var(--sv-danger-soft);
    border-color: var(--sv-danger);
    color: var(--sv-danger);
}
.buttons a.negative:hover, .buttons button.negative:hover,
button.negative:hover, .sv-btn-danger:hover {
    background-color: var(--sv-danger);
    border-color: var(--sv-danger);
    color: var(--sv-accent-ink);
}

/* quiet / secondary */
.buttons a.regular, .buttons button.regular, button.regular, .sv-btn-quiet {
    background: none;
    border-color: transparent;
    box-shadow: none;
    color: var(--sv-link);
}
.buttons a.regular:hover, .buttons button.regular:hover,
button.regular:hover, .sv-btn-quiet:hover {
    background-color: var(--sv-surface-2);
    border-color: var(--sv-border);
    box-shadow: none;
}

/* wide attendance buttons on Event.aspx - let them breathe instead of 325px */
.buttons button.eventattendance {
    width: 100%;
    max-width: 340px;
    justify-content: flex-start;
    padding: var(--sv-space-3) var(--sv-space-4);
}

.javaimagelink {
    display: inline-flex;
    align-items: center;
    gap: var(--sv-space-2);
    margin-top: var(--sv-space-2);
    padding: var(--sv-space-2) var(--sv-space-3);
    background-color: var(--sv-surface-2);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius);
    color: var(--sv-text);
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--sv-transition), border-color var(--sv-transition);
}
.javaimagelink:hover { background-color: var(--sv-surface-3); border-color: var(--sv-accent); text-decoration: none; }

/* ---------------------------------------------------------------- chips --- */

.sv-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sv-space-1);
    padding: 2px var(--sv-space-2);
    border: 1px solid transparent;
    border-radius: var(--sv-radius-pill);
    font-size: var(--sv-fs-xs);
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
}
.sv-chip-yes       { background: var(--sv-success-soft); border-color: var(--sv-success); color: var(--sv-success); }
.sv-chip-maybe     { background: var(--sv-warn-soft);    border-color: var(--sv-warn);    color: var(--sv-warn); }
.sv-chip-no        { background: var(--sv-danger-soft);  border-color: var(--sv-danger);  color: var(--sv-danger); }
.sv-chip-undecided { background: var(--sv-surface-3);    border-color: var(--sv-border-strong); color: var(--sv-text-muted); }
.sv-chip-attended  { background: var(--sv-info-soft);    border-color: var(--sv-info);    color: var(--sv-info); }
.sv-chip-full      { background: var(--sv-accent-soft);  border-color: var(--sv-accent);  color: var(--sv-accent); }

/* --------------------------------------------------------------- tables --- */

table.quicktable {
    width: 100%;
    border: 1px solid var(--sv-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--sv-radius);
    background-color: var(--sv-surface);
    box-shadow: var(--sv-shadow-1);
    font-size: var(--sv-fs-sm);
    margin-bottom: var(--sv-space-4);
    overflow: hidden;
}

table.quicktable th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--sv-space-3);
    background-color: var(--sv-surface-3);
    border: 0;
    border-bottom: 1px solid var(--sv-border-strong);
    color: var(--sv-heading);
    font-size: var(--sv-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

table.quicktable td.even,
table.quicktable td.odd,
table.quicktable td {
    padding: var(--sv-space-2) var(--sv-space-3);
    border: 0;
    border-bottom: 1px solid var(--sv-border);
    background-color: transparent;
    vertical-align: middle;
}
table.quicktable td.even { background-color: var(--sv-surface-2); }
table.quicktable tr:last-child td { border-bottom: 0; }
table.quicktable tbody tr:hover td,
table.quicktable tr:hover td.even,
table.quicktable tr:hover td.odd { background-color: var(--sv-accent-soft); }

table.quicktable a { color: var(--sv-link); text-decoration: none; }
table.quicktable a:hover { text-decoration: underline; }

table.quicktable td.title {
    padding: var(--sv-space-3) var(--sv-space-4);
    background-color: var(--sv-surface-3);
    border-bottom: 1px solid var(--sv-border-strong);
}
table.quicktable td.title li {
    display: inline;
    list-style: none;
    color: var(--sv-heading);
    font-size: var(--sv-fs-md);
    font-variant: normal;
    font-weight: 650;
}
table.quicktable td.title li a { float: right; font-variant: normal; font-weight: 600; }

table.quicktable td.nodata {
    padding: var(--sv-space-4);
    background-color: var(--sv-surface-2);
    border-top: 1px solid var(--sv-border);
    color: var(--sv-text-muted);
    font-style: italic;
    text-align: center;
}

/* Numeric columns read better right-aligned and tabular. Applied by wrapper
   class rather than a per-cell class, because QuickTable only stripes cells
   whose CssClass is empty - see Stats.aspx.cs. First column is the name. */
.sv-stats-table table.quicktable td:not(:first-child),
.sv-stats-table table.quicktable th:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table.quicktable td.sv-num, table.quicktable th.sv-num { text-align: right; font-variant-numeric: tabular-nums; }
.sv-money-pos { color: var(--sv-success); font-weight: 650; font-variant-numeric: tabular-nums; }
.sv-money-neg { color: var(--sv-danger);  font-weight: 650; font-variant-numeric: tabular-nums; }

/* Completed-event results table, sharing a card with the winnings chart.
   Headers are allowed to wrap here (the global th rule is nowrap), which with
   the explicit column widths keeps the table inside its card instead of
   overflowing into a horizontal scrollbar. */
/* chart beside the table; stacks on narrower viewports */
.sv-results-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sv-space-5);
    align-items: start;
}
.sv-results-split > .sv-results-table { margin-top: 0; }

@media (max-width: 1000px) {
    .sv-results-split { grid-template-columns: minmax(0, 1fr); }
}

.sv-results-table { margin-top: var(--sv-space-4); }
.sv-results-table table.quicktable { margin-bottom: 0; }
.sv-results-table table.quicktable th { white-space: normal; }
.sv-results-table table.quicktable td:not(:first-child),
.sv-results-table table.quicktable th:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Event.aspx completed-event result rows. Data attribute rather than a class
   so QuickTable's even/odd striping still applies underneath (it only stripes
   cells whose CssClass is empty). */
table.quicktable td[data-sv-result="win"]  { background-color: var(--sv-success-soft); color: var(--sv-text); }
table.quicktable td[data-sv-result="loss"] { background-color: var(--sv-danger-soft);  color: var(--sv-text); }
table.quicktable td[data-sv-result="even"] { background-color: var(--sv-warn-soft);    color: var(--sv-text); }
table.quicktable tr:hover td[data-sv-result] { filter: brightness(1.12); }
/* the Net Winnings column is the last cell - make the number carry the weight */
table.quicktable td[data-sv-result]:last-child { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }

/* any wide table can scroll inside its card rather than blowing out the page */
.sv-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------- forms --- */

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
select, textarea {
    width: 100%;
    max-width: 100%;
    padding: var(--sv-space-2) var(--sv-space-3);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    color: var(--sv-text);
    font-family: var(--sv-font);
    font-size: var(--sv-fs-base);
    line-height: 1.4;
    transition: border-color var(--sv-transition), box-shadow var(--sv-transition);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
    border-color: var(--sv-accent);
    box-shadow: 0 0 0 3px var(--sv-accent-ring);
    outline: none;
}
input::placeholder, textarea::placeholder { color: var(--sv-text-faint); }
textarea { min-height: 120px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sv-accent); width: auto; }
label { color: var(--sv-text-muted); font-weight: 550; }

/* ul.dv is the Framework detail-view form grid */
ul.dv {
    list-style: none;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
}
ul.dv li {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: var(--sv-space-3);
    width: auto;
    height: auto;
    min-height: 40px;
    list-style: none;
    padding: var(--sv-space-1) 0;
}
ul.dv li span {
    float: none;
    width: auto;
    padding-top: 0;
    color: var(--sv-text-muted);
    font-weight: 550;
    list-style: none;
}
ul.dv li input, ul.dv li select { float: none; width: 100%; font-family: var(--sv-font); font-size: var(--sv-fs-base); }
ul.dv li input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0; padding: 0;
    position: static; top: auto; vertical-align: middle; justify-self: start;
}
ul.dv li img { margin-top: 0; }

ul.dv li.wide, ul.dv li.twoline, ul.dv li.htmleditor {
    display: block;
    height: auto;
    margin-top: var(--sv-space-3);
}
ul.dv li.wide > span, ul.dv li.twoline > span {
    display: block;
    float: none;
    width: 100%;
    padding-top: 0;
    margin-bottom: var(--sv-space-1);
}
ul.dv li.wide textarea, ul.dv li.twoline textarea {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    min-height: 200px;
    padding: var(--sv-space-3);
    font-family: var(--sv-font);
    font-size: var(--sv-fs-base);
}
ul.dv li.wide input.stylebutton, ul.dv li.twoline input.stylebutton {
    width: auto;
    background-color: var(--sv-accent-soft);
    border: 1px solid var(--sv-accent);
    border-radius: var(--sv-radius-sm);
    color: var(--sv-accent);
    font: 650 var(--sv-fs-sm) var(--sv-font);
}
ul.dv li table.cblist { display: block; float: none; width: 100%; font-size: var(--sv-fs-sm); }
ul.dv li table.cblist td { padding: var(--sv-space-1) var(--sv-space-2); }

/* ------------------------------------------------------ notices / login --- */

.errorbox, .loginbox {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: var(--sv-space-7) auto;
    padding: var(--sv-space-5);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-2);
}
.errorbox {
    max-width: 640px;
    border-left: 4px solid var(--sv-danger);
}
.errorbox img, .loginbox img { margin-right: var(--sv-space-3); vertical-align: middle; }
.loginbox table { margin: 0 auto; }
.loginbox ul { float: none; list-style: none; margin: var(--sv-space-3) 0 0 0; }
.loginbox span.err { color: var(--sv-danger); font-weight: 650; }

.errsummary {
    display: block;
    margin: 0 0 var(--sv-space-4) 0;
    padding: var(--sv-space-3) var(--sv-space-4);
    background-color: var(--sv-danger-soft);
    border: 1px solid var(--sv-danger);
    border-left-width: 4px;
    border-radius: var(--sv-radius);
    color: var(--sv-danger);
    font-weight: 600;
}
.errsummary li { list-style: none; color: var(--sv-danger); font-weight: 600; }

#login, #logout {
    height: auto;
    max-height: none;
    min-height: 0;
    max-width: none;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--sv-space-2);
}
#login li, #logout li { list-style: none; }
/* With allowPublicSignup="False" the Sign Up link renders nothing, leaving an
   empty <li class="links"> that would still draw its divider rule. */
#login li:empty, #logout li:empty { display: none; }
#login li span { text-align: left; }
#login li label { color: var(--sv-text-muted); font-weight: 550; }
#login li input.text { width: 100%; font-size: var(--sv-fs-base); }
/* asp:CheckBox with Text renders <span class="check"><input><label for></span> */
#login li span.check {
    display: flex;
    align-items: center;
    gap: var(--sv-space-2);
    position: static;
    top: auto;
    margin: 0;
}
#login li span.check input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
#login li span.check label { color: var(--sv-text-muted); font-size: var(--sv-fs-sm); cursor: pointer; }
#login li input.submit { float: none; margin: var(--sv-space-1) 0 0 0; width: 100%; }
#login li.links {
    display: flex;
    justify-content: center;
    gap: var(--sv-space-3);
    flex-wrap: wrap;
    float: none;
    width: auto;
    margin: var(--sv-space-2) 0 0 0;
    padding-top: var(--sv-space-2);
    border-top: 1px solid var(--sv-border);
    font-size: var(--sv-fs-xs);
    text-align: center;
}
#logout { line-height: 1.7; }
#logout ul { width: 100%; list-style: none; margin: 0; }

ul.dashboardimg {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sv-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.dashboardimg img { border: 0; padding: 0; }
ul.dashboardimg a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sv-space-2);
    float: none;
    padding: var(--sv-space-4);
    background-color: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    color: var(--sv-text);
    font-variant: normal;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--sv-transition), border-color var(--sv-transition), transform var(--sv-transition);
}
ul.dashboardimg a:hover {
    background-color: var(--sv-surface-3);
    border-color: var(--sv-accent);
    font-weight: 600;
    transform: translateY(-2px);
    text-decoration: none;
}

/* ------------------------------------------------------------- calendar --- */

.sv-cal-wrap { margin: 0; }

.sv-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sv-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--sv-space-4);
}
.sv-cal-title {
    flex: 1 1 auto;
    color: var(--sv-heading);
    font-size: var(--sv-fs-xl);
    font-weight: 650;
    text-align: center;
    letter-spacing: -0.01em;
}

table.calendar, table.sv-cal {
    width: 100%;
    border: 1px solid var(--sv-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--sv-radius);
    font-size: var(--sv-fs-sm);
    overflow: hidden;
    table-layout: fixed;
}

table.calendar th, table.sv-cal th {
    height: auto;
    padding: var(--sv-space-2) var(--sv-space-2);
    background-color: var(--sv-surface-3);
    border: 0;
    border-bottom: 1px solid var(--sv-border-strong);
    color: var(--sv-text-muted);
    font-size: var(--sv-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

table.calendar td, table.sv-cal td {
    height: 104px;
    padding: var(--sv-space-1);
    background-color: var(--sv-surface);
    border: 0;
    border-right: 1px solid var(--sv-border);
    border-bottom: 1px solid var(--sv-border);
    vertical-align: top;
}
table.calendar tr td:last-child, table.sv-cal tr td:last-child { border-right: 0; }
table.calendar tr:last-child td, table.sv-cal tr:last-child td { border-bottom: 0; }

table.calendar td.othermonth, table.sv-cal td.othermonth {
    height: 104px;
    padding: var(--sv-space-1);
    background-color: var(--sv-surface-2);
    color: var(--sv-text-faint);
    opacity: 0.72;
}
table.calendar td.day, table.sv-cal td.day { height: auto; }
table.calendar td.today, table.sv-cal td.today {
    background-color: var(--sv-accent-soft);
    border: 0;
    border-right: 1px solid var(--sv-border);
    border-bottom: 1px solid var(--sv-border);
    box-shadow: inset 0 0 0 2px var(--sv-accent);
}

.sv-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-bottom: var(--sv-space-1);
    border-radius: var(--sv-radius-pill);
    color: var(--sv-text-muted);
    font-size: var(--sv-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
td.today .sv-day-num { background-color: var(--sv-accent); color: var(--sv-accent-ink); }
td.othermonth .sv-day-num { color: var(--sv-text-faint); }

/* event chip inside a calendar day */
.sv-evt {
    display: block;
    margin-bottom: 3px;
    padding: 3px var(--sv-space-2);
    background-color: var(--sv-surface-3);
    border: 1px solid var(--sv-border-strong);
    border-left-width: 3px;
    border-radius: var(--sv-radius-sm);
    color: var(--sv-text);
    font-size: var(--sv-fs-xs);
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: background-color var(--sv-transition), transform var(--sv-transition);
}
.sv-evt:hover { background-color: var(--sv-accent-soft); color: var(--sv-text); text-decoration: none; transform: translateX(1px); }
.sv-evt:visited { color: var(--sv-text); }
.sv-evt-time { display: block; color: var(--sv-text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; }
.sv-evt-meta { display: block; color: var(--sv-text-muted); font-size: 10px; font-weight: 600; }

.sv-evt.is-open     { border-left-color: var(--sv-success); }
.sv-evt.is-full     { border-left-color: var(--sv-accent); }
.sv-evt.is-canceled { border-left-color: var(--sv-danger); opacity: 0.72; }
.sv-evt.is-canceled .sv-evt-title { text-decoration: line-through; }
.sv-evt.is-past     { border-left-color: var(--sv-info); }

.sv-cal-legend {
    display: flex;
    gap: var(--sv-space-4);
    flex-wrap: wrap;
    margin-top: var(--sv-space-4);
    padding-top: var(--sv-space-3);
    border-top: 1px solid var(--sv-border);
    color: var(--sv-text-muted);
    font-size: var(--sv-fs-xs);
}
.sv-cal-legend span { display: inline-flex; align-items: center; gap: var(--sv-space-2); }
.sv-cal-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.sv-cal-actions {
    display: flex;
    gap: var(--sv-space-2);
    flex-wrap: wrap;
    margin-top: var(--sv-space-4);
}

/* ---------------------------------------------------------- modal dialog --- */

/* Built by js/sv-modal.js. Replaces the old absolutely-positioned #framediv,
   which was centred by a jQuery .center() plugin the page never loaded. */
.sv-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sv-space-4);
    background-color: rgba(6, 18, 14, 0.62);
    -webkit-backdrop-filter: blur(7px) saturate(115%);
    backdrop-filter: blur(7px) saturate(115%);
    opacity: 0;
    transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-theme="light"] .sv-overlay { background-color: rgba(40, 34, 20, 0.42); }
.sv-overlay.is-open { opacity: 1; }

/* REQUIRED. The `hidden` attribute only hides an element because the UA
   stylesheet says [hidden]{display:none}, and the `display:flex` above is an
   author rule, so it wins. Without this the closed overlay stays in the layout
   at opacity 0 - invisible but still covering the viewport and eating every
   click on the page. */
.sv-overlay[hidden] { display: none !important; }

.sv-dialog {
    --sv-dialog-w: 760px;
    --sv-dialog-h: 660px;
    display: flex;
    flex-direction: column;
    width: var(--sv-dialog-w);
    height: var(--sv-dialog-h);
    max-width: 100%;
    max-height: 100%;
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-3);
    overflow: hidden;
    transform: translateY(10px) scale(0.985);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sv-dialog:focus { outline: none; }
.sv-overlay.is-open .sv-dialog { transform: none; }

.sv-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sv-space-3);
    flex: 0 0 auto;
    padding: var(--sv-space-3) var(--sv-space-4);
    background-color: var(--sv-surface-2);
    border-bottom: 1px solid var(--sv-border);
}
.sv-dialog-title {
    margin: 0;
    color: var(--sv-heading);
    font-size: var(--sv-fs-lg);
    font-weight: 650;
}
.sv-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--sv-radius-pill);
    color: var(--sv-text-muted);
    cursor: pointer;
    font-family: var(--sv-font);
    font-size: 22px;
    line-height: 1;
    transition: background-color var(--sv-transition), color var(--sv-transition), border-color var(--sv-transition);
}
.sv-dialog-close:hover {
    background-color: var(--sv-danger-soft);
    border-color: var(--sv-danger);
    color: var(--sv-danger);
}

.sv-dialog-body { flex: 1 1 auto; min-height: 0; }
.sv-dialog-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

/* ------------------------------------------------------------ form grid --- */

/* used by the Create Event dialog; general enough for other forms */
.sv-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sv-space-5);
    align-items: stretch;
}
/* a column of stacked fields, so one side can hold several fields while the
   other holds a single field that grows to match (e.g. the notes box) */
.sv-form-col {
    display: flex;
    flex-direction: column;
    gap: var(--sv-space-4);
    min-width: 0;
}
.sv-field { display: flex; flex-direction: column; gap: var(--sv-space-1); min-width: 0; }
.sv-field-full { grid-column: 1 / -1; }

/* fills the remaining column height - kills the dead space under the form */
.sv-field-grow { flex: 1 1 auto; min-height: 0; }
.sv-field-grow textarea {
    flex: 1 1 auto;
    height: 100%;
    min-height: 150px;
    resize: vertical;
}

/* small numeric / short inputs should not stretch across the column */
.sv-field-narrow input,
.sv-field-narrow select { max-width: 140px; }
.sv-field > label,
.sv-field-label {
    color: var(--sv-heading);
    font-size: var(--sv-fs-sm);
    font-weight: 650;
}
.sv-optional {
    margin-left: var(--sv-space-1);
    color: var(--sv-text-faint);
    font-size: var(--sv-fs-xs);
    font-weight: 500;
}
.sv-hint { margin: 0; color: var(--sv-text-muted); font-size: var(--sv-fs-xs); }
.sv-hint strong { color: var(--sv-accent); font-weight: 650; }

/* the year / month / day trio. width:auto lets each select size to its own
   widest option, so nothing stretches and the month name is never clipped
   regardless of how the month labels are worded. */
.sv-date-row { display: flex; gap: var(--sv-space-2); flex-wrap: wrap; align-items: center; }
.sv-date-row select { flex: 0 0 auto; width: auto; min-width: 0; }

/* -------------------------------------------------------- busy overlay --- */

.sv-busy {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(6, 18, 14, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: progress;
}
:root[data-theme="light"] .sv-busy { background-color: rgba(40, 34, 20, 0.38); }

/* Same trap as .sv-overlay: the `hidden` attribute loses to the display:flex
   above, so without this the overlay never goes away and silently eats clicks. */
.sv-busy[hidden] { display: none !important; }

.sv-busy-inner {
    display: flex;
    align-items: center;
    gap: var(--sv-space-4);
    padding: var(--sv-space-4) var(--sv-space-5);
    background-color: var(--sv-surface);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
    border: 1px solid var(--sv-border-strong);
    border-left: 3px solid var(--sv-accent);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-3);
    color: var(--sv-text);
    font-size: var(--sv-fs-base);
    font-weight: 600;
}

/* ---------------------------------------------------------- spinner ------ */

/* Replaces i/spinner.gif, which was a fixed grey/white bitmap that looked
   pasted-on in both themes. Built from borders (not conic-gradient/mask) so it
   renders identically on older browsers, and coloured from the theme tokens. */
.sv-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 3px solid var(--sv-surface-3);
    border-top-color: var(--sv-accent);
    border-right-color: var(--sv-accent);
    border-radius: 50%;
    animation: sv-spin 650ms linear infinite;
}

.sv-spinner-lg { width: 30px; height: 30px; border-width: 4px; }

@keyframes sv-spin {
    to { transform: rotate(360deg); }
}

/* A frozen arc reads as a broken image, so drop it entirely when the visitor
   has asked for no motion - the accompanying text still says what is happening.
   (The global prefers-reduced-motion rule below neutralises the animation with
   !important, which is why hiding is the right fallback rather than restyling.) */
@media (prefers-reduced-motion: reduce) {
    .sv-spinner { display: none; }
}

/* toolbar above a grid (e.g. the Send Invites "Invite all" toggle) */
.sv-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sv-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--sv-space-2);
}
.sv-check-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--sv-space-2);
    color: var(--sv-heading);
    cursor: pointer;
    font-size: var(--sv-fs-sm);
    font-weight: 650;
}
.sv-check-inline input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }

.sv-form-actions {
    display: flex;
    align-items: center;
    gap: var(--sv-space-3);
    flex-wrap: wrap;
    margin-top: var(--sv-space-5);
    padding-top: var(--sv-space-4);
    border-top: 1px solid var(--sv-border);
}
.sv-form-actions .sv-spacer { margin-left: auto; }
.sv-form-status { color: var(--sv-danger); font-size: var(--sv-fs-sm); font-weight: 600; }

@media (max-width: 620px) {
    .sv-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- event page --- */

/* details beside attendance; stacks on narrow screens. Replaces the old
   <table width="100%"> two-column layout. */
.sv-event-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sv-space-5);
    align-items: start;
}

/* the details list should sit flush left in its card, not centred */
.sv-details-card ul.dv { max-width: none; margin: 0; }
.sv-details-card .sv-card-head,
.sv-attend-card .sv-card-head { margin-bottom: var(--sv-space-3); }

/* the framed attendance panel */
.sv-attend-card {
    padding: var(--sv-space-4);
    background-color: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-2);
}

.sv-attend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sv-space-3);
}

.sv-attend-group {
    min-width: 0;
    padding: var(--sv-space-3);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-top: 3px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    box-shadow: var(--sv-shadow-1);
}
.sv-attend-group.is-yes       { border-top-color: var(--sv-success); }
.sv-attend-group.is-waiting   { border-top-color: var(--sv-info); }
.sv-attend-group.is-maybe     { border-top-color: var(--sv-warn); }
.sv-attend-group.is-no        { border-top-color: var(--sv-danger); }
.sv-attend-group.is-invited   { border-top-color: var(--sv-border-strong); }
.sv-attend-group.is-attended  { border-top-color: var(--sv-info); }

.sv-attend-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sv-space-2);
    margin-bottom: var(--sv-space-2);
    padding-bottom: var(--sv-space-2);
    border-bottom: 1px solid var(--sv-border);
}
.sv-attend-label {
    color: var(--sv-text-muted);
    font-size: var(--sv-fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sv-attend-count {
    color: var(--sv-heading);
    font-size: var(--sv-fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.sv-attend-list { list-style: none; margin: 0; padding: 0; }

/* flex row so the "host" pill stays on the same line as the name instead of
   wrapping onto its own line in these narrow columns */
.sv-attend-list li {
    display: flex;
    align-items: center;
    gap: var(--sv-space-1);
    padding: 2px 0;
    color: var(--sv-text);
    font-size: var(--sv-fs-sm);
    line-height: 1.45;
}
.sv-attend-name { min-width: 0; overflow-wrap: break-word; }

/* compact solid pill: amber fill, text knocked out in the page ground colour */
.sv-chip-host {
    flex: 0 0 auto;
    padding: 0 5px;
    background-color: var(--sv-host-chip-bg);
    border: 0;
    border-radius: var(--sv-radius-pill);
    color: var(--sv-bg);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 15px;
    text-transform: uppercase;
}
.sv-attend-empty { margin: 0; color: var(--sv-text-faint); font-size: var(--sv-fs-sm); }

.sv-attend-actions {
    display: flex;
    gap: var(--sv-space-2);
    flex-wrap: wrap;
    margin-top: var(--sv-space-4);
    padding-top: var(--sv-space-3);
    border-top: 1px solid var(--sv-border);
}

/* "Your current response is ..." plus the change-response buttons */
.sv-response {
    margin-top: var(--sv-space-5);
    padding: var(--sv-space-5);
    background-color: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-1);
    text-align: center;
}
.sv-response-label { margin: 0; color: var(--sv-text-muted); font-size: var(--sv-fs-sm); }
.sv-response-value {
    margin: var(--sv-space-1) 0 var(--sv-space-4) 0;
    color: var(--sv-heading);
    font-size: var(--sv-fs-lg);
    font-weight: 700;
}
.sv-response-value.is-yes   { color: var(--sv-success); }
.sv-response-value.is-maybe { color: var(--sv-warn); }
.sv-response-value.is-no    { color: var(--sv-danger); }

/* centre the response / host buttons - they used to be left-aligned and
   separated by <br/> tags */
.sv-response .buttons,
.sv-response-actions {
    justify-content: center;
}
.sv-response hr { margin: var(--sv-space-5) 0 var(--sv-space-4) 0; }

/* the wide attendance buttons should not be full-bleed when centred */
.sv-response .buttons button.eventattendance {
    width: auto;
    min-width: 260px;
    justify-content: center;
}

.sv-note-block { margin-top: var(--sv-space-4); }
.sv-note-label {
    display: block;
    margin-bottom: var(--sv-space-1);
    color: var(--sv-text-muted);
    font-size: var(--sv-fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sv-note-block ul { margin: var(--sv-space-1) 0 0 1.2em; }

@media (max-width: 860px) {
    .sv-event-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- charts --- */

.sv-chart-card { margin-bottom: var(--sv-space-4); padding: var(--sv-space-5); border-radius: var(--sv-radius-lg); }

.sv-chart-tabs {
    display: flex;
    gap: var(--sv-space-1);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sv-chart-tab {
    padding: var(--sv-space-1) var(--sv-space-3);
    background: none;
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-pill);
    color: var(--sv-text-muted);
    cursor: pointer;
    font-family: var(--sv-font);
    font-size: var(--sv-fs-xs);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--sv-transition), color var(--sv-transition), border-color var(--sv-transition);
}
.sv-chart-tab:hover { background-color: var(--sv-surface-2); color: var(--sv-text); }
.sv-chart-tab[aria-selected="true"] {
    background-color: var(--sv-accent);
    border-color: var(--sv-accent);
    color: var(--sv-accent-ink);
}

.sv-chart { width: 100%; position: relative; }
.sv-chart svg { width: 100%; height: auto; overflow: visible; }
.sv-chart-empty { padding: var(--sv-space-6); color: var(--sv-text-muted); font-style: italic; text-align: center; }

.sv-chart-legend {
    display: flex;
    gap: var(--sv-space-4);
    flex-wrap: wrap;
    margin-top: var(--sv-space-3);
    color: var(--sv-text-muted);
    font-size: var(--sv-fs-xs);
}
.sv-chart-legend span { display: inline-flex; align-items: center; gap: var(--sv-space-2); }
.sv-chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.sv-bar { transition: opacity var(--sv-transition); }
.sv-chart:hover .sv-bar:not(:hover) { opacity: 0.65; }

.sv-tooltip {
    position: absolute;
    z-index: 20;
    max-width: 240px;
    padding: var(--sv-space-2) var(--sv-space-3);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    box-shadow: var(--sv-shadow-3);
    color: var(--sv-text);
    font-size: var(--sv-fs-xs);
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity var(--sv-transition);
    white-space: nowrap;
}
.sv-tooltip.is-visible { opacity: 1; }
.sv-tooltip b { color: var(--sv-heading); }

/* ------------------------------------------- standalone / embedded pages --- */

/* Login.aspx and Error.aspx have no master - give the toggle somewhere to sit */
.sv-standalone-bar {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: var(--sv-shell-max);
    margin: 0 auto;
    padding: var(--sv-space-4) var(--sv-space-4) 0 var(--sv-space-4);
}

/* CreateEvent.aspx / SendInvites.aspx render inside a modal iframe - they
   previously used style="background: url()" to defeat the body image */
body.sv-embedded {
    background: transparent;
    padding: var(--sv-space-4);
}
body.sv-embedded > form > div { max-width: 100%; }

/* ------------------------------------------------------------- a11y ----- */

.sv-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
    #container {
        grid-template-columns: minmax(0, 1fr);
        /* Sidebar above content when stacked: it is the small "welcome / logout / my account"
           card, so it costs almost no scroll, and this keeps the visual order the same as the
           source order in Site.Master (sidebar then content) - which is what the tab and
           screen-reader order follows too. */
        grid-template-areas:
            "header"
            "sidebar"
            "content";
        padding: var(--sv-space-3);
        gap: var(--sv-space-3);
    }
    .header { padding-bottom: var(--sv-space-3); }
    .header .sv-nav { margin-left: 0; width: 100%; }
    #headernav { justify-content: flex-start; }
    .contentblock, .sv-card, .sv-chart-card { padding: var(--sv-space-4); border-radius: var(--sv-radius); }
    ul.dv li { grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-1); }
    ul.dv li span { margin-bottom: 0; }
    table.calendar td, table.sv-cal td,
    table.calendar td.othermonth, table.sv-cal td.othermonth { height: 84px; }
}

@media (max-width: 640px) {
    :root { --sv-fs-base: 0.9375rem; }
    .header { justify-content: center; text-align: center; }
    .header img { max-height: 44px; }
    .sv-logo { width: 208px; }
    table.quicktable { font-size: var(--sv-fs-xs); }
    table.quicktable th, table.quicktable td { padding: var(--sv-space-2); }
    /* calendar becomes a compact agenda-style grid rather than 7 tiny columns */
    table.calendar td, table.sv-cal td,
    table.calendar td.othermonth, table.sv-cal td.othermonth { height: 64px; padding: 2px; }
    .sv-evt { font-size: 10px; padding: 2px 4px; }
    .sv-evt-time, .sv-evt-meta { display: none; }
    .sv-cal-title { font-size: var(--sv-fs-lg); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .buttons a:hover, .buttons button:hover, .sv-btn:hover,
    ul.dashboardimg a:hover, .sv-theme-toggle:hover { transform: none; }
}

@media print {
    body { background: #fff; color: #000; }
    .sidebar, #headernav, .sv-theme-toggle, .sv-chart-tabs, #footer { display: none !important; }
    #container { display: block; max-width: none; padding: 0; }
    .contentblock, .sv-card, table.quicktable { border-color: #999; box-shadow: none; }
}