/* ==========================================================================
   MCS shared UI
   The design system introduced on the Events page, generalised so every public
   page can adopt it. Every selector is namespaced .mcs-ui-* and lives under a
   .mcs-ui wrapper, so this file cannot reach the admin back-office even though
   cMaster.tpl loads it site-wide.

   events.css keeps its own .mcs-ev-* tokens; the values here are identical, so
   the two read as one system.
   ========================================================================== */

.mcs-ui {
    --mcs-bg:     #F5EFE5;
    --mcs-card:   #FFFDFA;
    --mcs-ink:    #2E1B14;
    --mcs-dark:   #4A2822;
    --mcs-accent: #C05A2A;
    --mcs-muted:  #8A7059;
    --mcs-line:   #E6DCCC;
    --mcs-chip:   #EFE6D8;
    --mcs-body:   #5C4638;

    --mcs-r-lg: 18px;
    --mcs-r-md: 14px;
    --mcs-r-sm: 10px;

    /* Lato-Bold/Regular are the site's own @font-face families (main.css). Each
       face is declared font-weight:normal, so display text asks for 400 and lets
       the bold face do the work — requesting 700 would smear it with a synthetic
       embolden on top of an already-bold outline. */
    --mcs-display: "Lato-Bold", "Lato-Regular", Helvetica, Arial, sans-serif;
    --mcs-sans:    "Lato-Regular", Helvetica, Arial, sans-serif;

    font-family: var(--mcs-sans);
    color: var(--mcs-ink);
    -webkit-font-smoothing: antialiased;
}

.mcs-ui {
    background: var(--mcs-bg);
    /* body is #fff (main.css:188); without this the cream stops where the
       content does and leaves a white band above the footer on short pages. */
    min-height: 100vh;
    padding-bottom: 80px;
}

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

.mcs-ui-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.mcs-ui-narrow { max-width: 820px; }

/* Fixed-navbar clearance. A .mcs-ui-hero carries its own 132px top padding and
   is meant to tuck under the bar; every other page opens straight into a plain
   container that would otherwise start underneath the fixed nav and lose its
   breadcrumb / heading. Pad only those. */
.mcs-ui > .mcs-ui-container:first-child:not(:has(> .mcs-ui-hero)) { padding-top: 104px; }
@media (max-width: 767px) {
    .mcs-ui > .mcs-ui-container:first-child:not(:has(> .mcs-ui-hero)) { padding-top: 84px; }
}

/* ---------- hero ---------------------------------------------------------- */

/* The nav is position:fixed, so the first section has to clear it. 132px is a
   pre-paint fallback only: mcsFitHero() measures the real navbar and overwrites
   it, because the bar grows a second row when a user is signed in. */
.mcs-ui-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 132px 0 0;
}

.mcs-ui-hero-copy { flex: 1 1 auto; min-width: 0; }
.mcs-ui-hero-cta  { flex: 0 0 auto; text-align: right; padding-bottom: 4px; }
.mcs-ui-hero-cta p { font-size: 13px; color: var(--mcs-muted); margin: 0 0 10px; }

.mcs-ui-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mcs-accent);
    margin: 0 0 14px;
}

.mcs-ui h1.mcs-ui-h1 {
    font-family: var(--mcs-display);
    font-size: 44px;
    line-height: 1.15;
    font-weight: normal;
    color: var(--mcs-ink);
    margin: 0 0 16px;
    letter-spacing: -0.2px;
    max-width: 17em;
    text-transform: none;
}

.mcs-ui-lede {
    font-size: 16px;
    line-height: 1.6;
    color: var(--mcs-muted);
    margin: 0;
    max-width: 46em;
}

/* main.css:58 gives every hr width:50%; left:25% plus a gradient background,
   which renders as a short floating dash. */
.mcs-ui hr.mcs-ui-rule {
    width: 100%;
    left: 0;
    position: static;
    height: 1px;
    background: var(--mcs-line);
    background-image: none;
    border: 0;
    margin: 32px 0 26px;
}

/* ---------- breadcrumb ---------------------------------------------------- */

.mcs-ui-crumbs {
    font-size: 12.5px;
    color: var(--mcs-muted);
    letter-spacing: .3px;
    margin: 0 0 18px;
}
.mcs-ui-crumbs a,
.mcs-ui-crumbs .mcs-ui-crumb-link {
    color: var(--mcs-muted);
    cursor: pointer;
    text-decoration: none;
}
.mcs-ui-crumbs a:hover,
.mcs-ui-crumbs .mcs-ui-crumb-link:hover { color: var(--mcs-accent); text-decoration: underline; }
.mcs-ui-crumbs .sep { margin: 0 8px; opacity: .55; }

/* ---------- toolbar / filters --------------------------------------------- */

.mcs-ui-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.mcs-ui-searchwrap {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
}

.mcs-ui-searchwrap .fa {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mcs-muted);
    font-size: 14px;
    pointer-events: none;
}

.mcs-ui input.mcs-ui-search,
.mcs-ui select.mcs-ui-select {
    height: 46px;
    border: 1px solid var(--mcs-line);
    background: #fff;
    border-radius: 999px;
    font-size: 15px;
    font-style: normal;
    color: var(--mcs-ink);
    font-family: var(--mcs-sans);
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mcs-ui input.mcs-ui-search { width: 100%; padding: 0 20px 0 44px; }

.mcs-ui select.mcs-ui-select {
    padding: 0 38px 0 18px;
    min-width: 172px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238A7059' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.mcs-ui input.mcs-ui-search:focus,
.mcs-ui select.mcs-ui-select:focus {
    border-color: var(--mcs-accent);
    box-shadow: 0 0 0 3px rgba(192, 90, 42, .12);
}

.mcs-ui input.mcs-ui-search::placeholder { color: #A89684; font-style: normal; }

/* The actions beside a card, a row or a form (Edit, Delete, Cancel, Report, Clear ...) are keys (css/keys.css) a size
   down from the main buttons; this is their size and type. Next to a main button (Cancel by Save, Clear by Search)
   they take the main size: add --lg. */
.mcs-ui-morelink {
    --pk-k: .85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    font-family: var(--mcs-sans, "Lato-Bold", Helvetica, Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.mcs-ui-morelink--lg {
    --pk-k: 1.1;
    min-height: 44px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- form fields --------------------------------------------------- */

.mcs-ui-field { min-width: 0; }

.mcs-ui-field label,
.mcs-ui-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--mcs-muted);
    margin: 0 0 7px;
}

/* Prado renders its own controls in here; normalise them. */
.mcs-ui-field input[type="text"],
.mcs-ui-field input[type="email"],
.mcs-ui-field input[type="password"],
.mcs-ui-field select,
.mcs-ui .mcs-ui-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-sm);
    background: #fff;
    font-size: 14px;
    font-style: normal;
    font-family: var(--mcs-sans);
    color: var(--mcs-ink);
    box-shadow: none;
    outline: none;
}
.mcs-ui-field input[type="text"]:focus,
.mcs-ui-field select:focus,
.mcs-ui .mcs-ui-input:focus {
    border-color: var(--mcs-accent);
    box-shadow: 0 0 0 3px rgba(192, 90, 42, .12);
}

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

/* Every button is a key (css/keys.css): the shape, colour, bevel and the press all come from there, and the tone
   from the class (-accent, -dark, -maroon; none is light, -ghost is light too). This is only its size and type. */
.mcs-ui .mcs-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 26px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--mcs-sans);
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* ---------- section heading ----------------------------------------------- */

.mcs-ui-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.mcs-ui-sechead .mcs-ui-morelink { align-self: center; }

/* the one quiet line above a list that a member's local roaster has reordered */
.mcs-ui-local-note { margin: -8px 0 18px; font-size: 13.5px; color: var(--mcs-body, #5C4638); }
.mcs-ui-local-note .fa { margin-right: 6px; color: var(--mcs-accent, #C05A2A); }
.mcs-ui-local-note a { margin-left: 4px; font-weight: 700; color: var(--mcs-accent, #C05A2A); }

.mcs-ui h2.mcs-ui-h2 {
    font-family: var(--mcs-display);
    font-size: 25px;
    line-height: 1.25;
    font-weight: normal;
    color: var(--mcs-ink);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.mcs-ui h3.mcs-ui-h3 {
    font-family: var(--mcs-display);
    font-size: 19px;
    line-height: 1.3;
    font-weight: normal;
    color: var(--mcs-ink);
    margin: 0 0 10px;
    text-transform: none;
    letter-spacing: 0;
}

.mcs-ui-count { font-size: 13px; color: var(--mcs-muted); }

.mcs-ui-prose {
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--mcs-body);
}
.mcs-ui-prose p { margin: 0 0 14px; }
.mcs-ui-nowrap { white-space: nowrap; }
.mcs-ui-official { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; }
.mcs-ui-official svg { flex: 0 0 auto; width: clamp(17px, .6em, 28px); height: clamp(17px, .6em, 28px); }
.mcs-ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mcs-ui-tag-unverified { background: var(--mcs-chip, #EFE6D8); color: var(--mcs-muted, #8A7059); }
.mcs-ui-not-endorsed { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--mcs-muted, #8A7059); }
.mcs-ui-hint { margin: 0 0 12px; font-size: 13px; color: var(--mcs-muted, #8A7059); }
form.mcs-ui-panel .mcs-ui-field { margin-bottom: 14px; }
form.mcs-ui-panel > .mcs-ui-btn[type="submit"] { width: 100%; box-sizing: border-box; }
.mcs-ev-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.mcs-ev-check input { flex: 0 0 auto; margin-top: 3px; }
.mcs-ev-minor-body { display: none; margin-top: 10px; }
.mcs-ev-minor:has(#ev-minor:checked) .mcs-ev-minor-body { display: block; }
/* the guardian notice: capitals, at least 5pt larger than the text around it (Event Terms, section 7) */
.mcs-ev-guardian-notice { margin: 12px 0; text-transform: uppercase; font-size: calc(1em + 5pt); line-height: 1.35; }
.mcs-ev-guardian-notice p { margin: 0 0 10px; }
.mcs-ui-lede + .mcs-ui-disclaimer { margin-top: 8px; }
.mcs-ui-disclaimer { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; font-style: italic; color: var(--mcs-muted, #8A7059); }
.mcs-ui-prose h2 { margin: 26px 0 10px; font-size: 20px; }
.mcs-ui-prose ul, .mcs-ui-prose ol { margin: 0 0 14px; padding-left: 24px; }
.mcs-ui-prose li { margin-bottom: 6px; }
.mcs-ui-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.mcs-ui-prose th, .mcs-ui-prose td { border: 1px solid var(--mcs-line, #E6DCCC); padding: 8px 10px; text-align: left; vertical-align: top; }
.mcs-ui-prose th { background: var(--mcs-chip, #EFE6D8); }
.mcs-ui-prose a { color: var(--mcs-accent); }

/* ---------- meta row ------------------------------------------------------ */

.mcs-ui-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--mcs-muted);
}
/* a row of small keys rather than of words: closer together */
.mcs-ui-meta--actions { gap: 8px; }
.mcs-ui-meta span { display: inline-flex; align-items: center; gap: 7px; }
.mcs-ui-meta .fa { font-size: 12px; opacity: .8; }

.mcs-ui-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--mcs-chip);
    color: var(--mcs-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.mcs-ui-tag-accent { background: rgba(192, 90, 42, .12); color: #8A3F1D; }

/* ---------- card grid ----------------------------------------------------- */

.mcs-ui-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* the card grids (coffees, settings, roasters): every card has the same parts in the same sizes (one settings
   line, a two-line name, three facts, one button), so the cards in a row are the same height and nothing is
   left empty. The rest is on the page you open from the card. */
.mcs-ui-grid-tight { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }

.mcs-ui-card {
    display: flex;
    flex-direction: column;
    background: var(--mcs-card);
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease;
}
.mcs-ui-card:hover {
    box-shadow: 0 14px 30px -20px rgba(46, 27, 20, .45);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.mcs-ui-card-link { cursor: pointer; }

/* Fixed-ratio well so wildly different logo and pack-shot dimensions still line
   the grid up. object-fit:contain keeps logos whole; .is-cover opts a card into
   filling the frame instead. */
.mcs-ui-card-media {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--mcs-line);
    overflow: hidden;
}
.mcs-ui-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.mcs-ui-card-media.is-cover img { object-fit: cover; padding: 0; }
/* A roaster's logo in a card: once its shape is known (mcs.js adds fit-wide or fit-tall as it loads) the picture is
   sized to exactly the logo, so the logo's own corners can be rounded: a square logo with a solid background
   used to show sharp corners inside a rounded card. Until then (or without JavaScript) it is the plain padded
   fit above. */
.mcs-ui-card-media.is-logo > img.fit-wide,
.mcs-ui-card-media.is-logo > img.fit-tall {
    inset: 0; margin: auto; padding: 0; border-radius: 14px;
}
.mcs-ui-card-media.is-logo > img.fit-wide { width: calc(100% - 28px); height: auto; max-height: calc(100% - 28px); }
.mcs-ui-card-media.is-logo > img.fit-tall { height: calc(100% - 28px); width: auto; max-width: calc(100% - 28px); }
/* no picture yet: the same tile as a photo, in the warm chip colour with the coffee's first letter */
.mcs-ui-card-media > .ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--mcs-chip); color: var(--mcs-muted);
    font-family: "Lato-Bold", sans-serif; font-size: 44px;
}
/* a small flag in the corner of a card's picture: the "Official" mark on a roaster. Opaque, so it
   reads over any logo, and out of the title so a long name can never clamp it away. */
.mcs-ui-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    background: var(--mcs-card);
    box-shadow: 0 0 0 1px rgba(192, 90, 42, .35), 0 3px 8px -3px rgba(46, 27, 20, .4);
}

.mcs-ui-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
    min-width: 0;
}

.mcs-ui-card-title {
    font-family: var(--mcs-display);
    font-size: 16.5px;
    line-height: 1.3;
    min-height: 2.6em;      /* two lines of room, whether the name uses one or two: every card the same */
    font-weight: normal;
    color: var(--mcs-ink);
    margin: 0 0 5px;
    /* Roaster and coffee names vary wildly in length; clamping keeps every card
       in the row the same height without truncating server-side. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mcs-ui-card:hover .mcs-ui-card-title { color: var(--mcs-accent); }

.mcs-ui-card-sub {
    font-size: 13px;
    line-height: 1.45;
    color: var(--mcs-muted);
    margin: 0;
}

.mcs-ui-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mcs-body);
    margin: 10px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcs-ui-card-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 12.5px;
    color: var(--mcs-muted);
}

.mcs-ui-empty {
    grid-column: 1 / -1;
    padding: 56px 24px;
    text-align: center;
    color: var(--mcs-muted);
    font-size: 15px;
    background: rgba(255, 253, 250, .6);
    border: 1px dashed var(--mcs-line);
    border-radius: var(--mcs-r-md);
}

/* select2 replaces the native <select> with its own container; give the
   replacement the same shell as .mcs-ui-field select so the two read alike. */
.mcs-ui .select2-container { width: 100% !important; }
.mcs-ui .select2-container .select2-choice,
.mcs-ui .select2-container .select2-selection--single {
    height: 42px;
    line-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-sm);
    background: #fff;
    background-image: none;
    box-shadow: none;
    font-size: 14px;
    color: var(--mcs-ink);
}

/* ---------- settings badge strip (coffee cards) --------------------------- */

.mcs-ui-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    letter-spacing: .3px;
    background: var(--mcs-chip);
    color: var(--mcs-ink);
    border-bottom: 1px solid var(--mcs-line);
}
.mcs-ui-badge img { height: 10px; width: auto; display: inline; vertical-align: baseline; }
.mcs-ui-badge-mine { background: var(--mcs-dark); color: #FFFDFA; border-bottom-color: var(--mcs-dark); }
.mcs-ui-badge-num {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    font-weight: 700;
}
.mcs-ui-badge-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mcs-ui-badge-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* two cards side by side on a small phone leave "Roaster Settings" a few pixels short: tighten the strip a little
   so the whole label shows (never "Roaster Setti…") */
@media (max-width: 400px) {
    .mcs-ui-badge { padding-left: 10px; padding-right: 10px; letter-spacing: 0; gap: 6px; }
    .mcs-ui-badge-label { gap: 4px; }
}
/* the settings line of a card with no settings yet: the same height as one with a count, quieter */
.mcs-ui-badge-none { color: var(--mcs-muted); }
.mcs-ui-badge-none .mcs-ui-badge-label span { font-style: italic; }

/* ---------- spec list (coffee cards) -------------------------------------- */

.mcs-ui-specs {
    margin: 10px 0 0;
    min-height: 5.25em;     /* three lines of room, whether the coffee has three facts or fewer */
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--mcs-ink);
}
.mcs-ui-specs dt {
    display: inline;
    font-weight: 400;
    color: var(--mcs-muted);
    letter-spacing: .4px;
}
.mcs-ui-specs dd { display: inline; margin: 0; }
/* a long value (a long roaster/origin/process name) would otherwise wrap to
   a second line and make just that one card taller than its neighbors;
   truncating keeps every spec row — and so the whole card — one consistent
   height regardless of how long any given value happens to be. */
.mcs-ui-specs .row-break {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcs-ui-notes {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    font-style: italic;
    color: var(--mcs-body);
    /* longer notes are clamped to 2 lines; a card with no notes has no notes row at all */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- panel --------------------------------------------------------- */

.mcs-ui-panel {
    background: var(--mcs-card);
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-md);
    padding: 24px 26px;
}
.mcs-ui-panel-quiet { background: rgba(255, 253, 250, .6); }

/* ---------- accordion (FAQ) ----------------------------------------------- */

/* The accordion script (mcs.js) finds its panels through the .panel/.panel-collapse
   classes that Bootstrap's stylesheet gives chrome to, so that chrome is stripped
   here rather than by removing the classes. */
.mcs-ui .panel,
.mcs-ui .panel-group .panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
}
.mcs-ui .panel-group .panel + .panel { margin-top: 0; }
.mcs-ui .panel-heading { background: transparent; border: 0; padding: 0; border-radius: 0; }
.mcs-ui .panel-title { margin: 0; padding: 0; font-size: inherit; }
.mcs-ui .panel-body { border: 0 !important; padding: 0; }

.mcs-ui-accordion { border-top: 1px solid var(--mcs-line); }

.mcs-ui-acc-item { border-bottom: 1px solid var(--mcs-line); }

.mcs-ui-acc-head a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 4px;
    font-family: var(--mcs-display);
    font-size: 17.5px;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--mcs-ink);
    text-decoration: none;
    cursor: pointer;
}
.mcs-ui-acc-head a:hover,
.mcs-ui-acc-head a:focus { color: var(--mcs-accent); text-decoration: none; }

.mcs-ui-acc-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mcs-chip);
    color: var(--mcs-ink);
    font-size: 11px;
    line-height: 26px;
    text-align: center;
    transition: background .15s ease, color .15s ease, transform .18s ease;
}
.mcs-ui-acc-head a:hover .mcs-ui-acc-icon { background: var(--mcs-accent); color: #fff; }
.mcs-ui-acc-head a[aria-expanded="true"] .mcs-ui-acc-icon {
    background: var(--mcs-accent); color: #fff; transform: rotate(180deg);
}

.mcs-ui-acc-body {
    padding: 0 40px 22px 4px;
    font-size: 15px;
    line-height: 1.68;
    color: var(--mcs-body);
}

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

@media (max-width: 991px) {
    .mcs-ui h1.mcs-ui-h1 { font-size: 36px; }
    .mcs-ui-hero { flex-direction: column; align-items: flex-start; gap: 22px; }
    .mcs-ui-hero-cta { text-align: left; padding-bottom: 0; }
    
    
    
}

@media (max-width: 767px) {
    .mcs-ui { padding-bottom: 48px; }
    .mcs-ui-container { padding: 0 16px; }
    .mcs-ui h1.mcs-ui-h1 { font-size: 29px; }
    .mcs-ui h2.mcs-ui-h2 { font-size: 21px; }
    .mcs-ui-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    
    .mcs-ui-grid-tight { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
    .mcs-ui-card-body { padding: 13px 14px 15px; }
    .mcs-ui-panel { padding: 18px; }
    .mcs-ui-acc-head a { font-size: 16px; padding: 17px 2px; }
    .mcs-ui-acc-body { padding-right: 8px; }
}

/* ==========================================================================
   Segmented toggle (Explore: Coffees | Roasters)
   ========================================================================== */

.mcs-ui-segbar {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 26px 0 0;
    background: var(--mcs-chip);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(46, 27, 20, .16);
}

/* each choice is a key (css/keys.css) sitting in the trough; the chosen one (.is-on) is pressed in */
.mcs-ui-segbar .mcs-ui-seg {
    --pk-k: .9;
    display: inline-block;
    padding: 8px 21px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* ==========================================================================
   Top bar
   Outside .mcs-ui (it is emitted by base.html), so it carries its own tokens. One row: the logo
   on the left (with its name; a signed-in person on a phone gets the globe alone), then on every
   page but the home page a round back arrow and, once signed in, a Menu button, and on the right
   Profile once signed in, or language / Login / Registration for visitors. There is no menu bar:
   signed-in people steer from the home hub (menu.css).
   ========================================================================== */

.mcs-nav {
    --mcs-bg:     #F5EFE5;   --mcs-card:   #FFFDFA;
    --mcs-ink:    #2E1B14;   --mcs-dark:   #4A2822;
    --mcs-accent: #C05A2A;   --mcs-muted:  #8A7059;
    --mcs-line:   #E6DCCC;   --mcs-chip:   #EFE6D8;

    font-family: "Lato-Regular", Helvetica, Arial, sans-serif;
    background: #F1E8DC;
    border: 0;
    border-bottom: 1px solid var(--mcs-line);
    border-radius: 0;
    margin: 0;
    min-height: 0;
    /* the legacy .navbar rules pad the top (15px on a phone, 10px and 8px on a tablet), which left
       the logo and buttons off-centre; the bar below carries that height itself instead, so the
       whole bar is the same height as before with everything in the middle of it */
    padding: 0;
    box-shadow: none;
}

.mcs-nav .mcs-nav-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1120px;       /* the same column as the page (.mcs-ui-container) and the footer */
    height: 90px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Bootstrap's .container, put on the same column as the page and the top bar (it is wider otherwise, and a
   different width at each screen size): used by the footer and the home page's closing box */
.container.mcs-col { width: auto; max-width: 1120px; padding-left: 24px; padding-right: 24px; }
.container.mcs-foot-main { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 767px) {
    .container.mcs-col { padding-left: 16px; padding-right: 16px; }
}
/* a forced line break that only suits a wide screen (the footer quote: on a phone it left "a great" alone) */
@media (max-width: 575px) { .mcs-br-wide { display: none; } }

/* ---- on/off switch: AI scanner & photo editor (_ai_tools_switch.html), and Private / Public on a setting or a
   coffee's settings (_ms_macros.html). Here, not in setting-editor.css, because every page loads this file. ---- */
.mcs-switch { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 0; cursor: pointer; }
.mcs-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }   /* hidden, still focusable */
.mcs-switch-track {
  flex: 0 0 auto; position: relative; width: 44px; height: 26px; margin-top: 1px;
  border-radius: 13px; background: #D9CDBD; transition: background .18s ease;
}
.mcs-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .18s ease;
}
.mcs-switch input:checked + .mcs-switch-track { background: var(--mcs-accent, #C05A2A); }
.mcs-switch input:checked + .mcs-switch-track::after { transform: translateX(18px); }
.mcs-switch input:focus-visible + .mcs-switch-track { outline: 2px solid var(--mcs-dark, #4A2822); outline-offset: 2px; }
.mcs-switch input:disabled + .mcs-switch-track { opacity: .6; }
.mcs-switch-text strong { display: block; font-size: 15px; color: var(--mcs-ink, #2E1B14); }
.mcs-switch-text small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--mcs-muted, #8A7059); }
.mcs-switch-text .mcs-switch-note:empty { display: none; }
.mcs-switch-text .mcs-switch-note { color: var(--mcs-accent, #C05A2A); }
/* the small one (Private / Public on a card or a row): a smaller track, the state in plain words beside it */
.mcs-switch--sm { align-items: center; gap: 10px; }
.mcs-switch--sm .mcs-switch-track { width: 36px; height: 22px; margin-top: 0; border-radius: 11px; }
.mcs-switch--sm .mcs-switch-track::after { top: 3px; left: 3px; width: 16px; height: 16px; }
.mcs-switch--sm input:checked + .mcs-switch-track::after { transform: translateX(14px); }
.mcs-switch--sm .mcs-switch-text strong { font-size: 13px; }
.mcs-switch--sm .mcs-switch-text small { font-size: 12px; margin-top: 1px; }
/* some of a coffee's settings public, some private: the knob rests in the middle */
.mcs-switch input:indeterminate + .mcs-switch-track { background: #B7A58F; }
.mcs-switch input:indeterminate + .mcs-switch-track::after { transform: translateX(9px); }
.mcs-switch--sm input:indeterminate + .mcs-switch-track::after { transform: translateX(7px); }
.ms-vis { margin: 0; }
.ms-vis-note { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--mcs-muted, #8A7059); }
.ms-badge-private[hidden] { display: none; }

.mcs-nav .mcs-nav-brand { flex: none; display: inline-flex; align-items: center; padding: 0; }
.mcs-nav .mcs-nav-logo { display: block; height: 34px; width: auto; }

/* the home page's heading: the name, in the middle of the bar between the logo and Profile (it floats
   free of the row, so it is centred on the screen whatever the two ends weigh) */
.mcs-nav .mcs-nav-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: var(--mcs-display);
    font-weight: normal;
    font-size: clamp(20px, 5.4vw, 28px);
    line-height: 1;
    letter-spacing: -.012em;
    white-space: nowrap;
    color: var(--mcs-ink);
}

.mcs-nav .mcs-nav-links { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; }

.mcs-nav .mcs-nav-link {
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mcs-body, #5C4638);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.mcs-nav .mcs-nav-link:hover,
.mcs-nav .mcs-nav-link:focus { background: rgba(46, 27, 20, .06); color: var(--mcs-ink); text-decoration: none; }

.mcs-nav .mcs-nav-actions { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* The round back arrow and Menu (the home hub) sit beside the logo; Profile is on the right. All of them are keys
   (css/keys.css); this is their size and type. The page you are on (.is-on) is the one pressed in. */
.mcs-nav .mcs-nav-go { flex: none; display: flex; align-items: center; gap: 8px; }
.mcs-nav .mcs-nav-arrow,
.mcs-nav .mcs-nav-home,
.mcs-nav .mcs-nav-settings,
.mcs-nav .mcs-nav-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
}
.mcs-nav .mcs-nav-arrow { flex: none; justify-content: center; width: 44px; padding: 0; }
.mcs-nav .mcs-nav-home,
.mcs-nav .mcs-nav-settings { padding: 0 15px 0 11px; }
.mcs-nav .mcs-nav-arrow svg,
.mcs-nav .mcs-nav-home svg,
.mcs-nav .mcs-nav-settings svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.mcs-nav .mcs-nav-arrow svg { width: 20px; height: 20px; }
.mcs-nav .mcs-nav-settings svg { width: 22px; height: 22px; stroke-width: 1.7; }
.mcs-nav .mcs-nav-profile { padding: 3px 15px 3px 3px; }
.mcs-nav .mcs-nav-profile img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }

/* visitors: Login / Registration and the language switch (keys: css/keys.css) */
.mcs-nav .mcs-nav-ghost,
.mcs-nav .mcs-nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 17px;
    font-size: 14px;
    font-weight: 700;
}

.mcs-nav .mcs-nav-lang { position: relative; }
.mcs-nav .mcs-nav-lang-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px;
    font-size: 13px; font-weight: 700;
}
.mcs-nav .mcs-nav-menu {
    min-width: 186px;
    margin-top: 10px;
    padding: 7px;
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-md, 14px);
    background: var(--mcs-card);
    box-shadow: 0 14px 34px rgba(46, 27, 20, .15);
}
.mcs-nav .mcs-nav-menu > li > a {
    padding: 9px 13px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mcs-body, #5C4638);
}
.mcs-nav .mcs-nav-menu > li > a:hover { background: var(--mcs-chip); color: var(--mcs-ink); }
.mcs-nav .mcs-nav-menu > li > a.is-on { color: var(--mcs-accent); }

.mcs-preview-banner {
    background: var(--mcs-accent, #B5542B); color: #fff; text-align: center;
    font-size: 13px; font-weight: 600; padding: 7px 12px;
}
.mcs-preview-banner a { color: #fff; text-decoration: underline; }

/* tablet and desktop show the logo with its name; on a phone a signed-in person gets the globe
   alone (the <picture> in _nav.html swaps the image), a visitor still gets the full logo, and the
   buttons trim to fit */
@media (max-width: 767px) {
    .mcs-nav .mcs-nav-links { display: none; }
    .mcs-nav .mcs-nav-bar { height: 76px; padding: 0 14px; gap: 10px; }
    .mcs-nav .mcs-nav-ghost,
    .mcs-nav .mcs-nav-cta { padding: 0 13px; font-size: 13px; }
}
@media (max-width: 599px) {
    .mcs-nav .mcs-nav-logo { height: 40px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-logo { height: 28px; }
    .mcs-nav .mcs-nav-profile { padding: 4px; }
    .mcs-nav .mcs-nav-profile span,
    .mcs-nav .mcs-nav-settings span { display: none; }
    .mcs-nav .mcs-nav-settings { width: 44px; padding: 0; justify-content: center; }
}
/* a visitor's bar (logo, back arrow, EN, Login, Registration) needs the tighter set up to 419px: at the 390px of
   an iPhone 12 to 16 the roomier one runs past the edge of the screen */
@media (max-width: 419px) {
    .mcs-nav.mcs-nav--visitor .mcs-nav-bar { gap: 8px; padding: 0 12px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-logo { height: 24px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-actions { gap: 4px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-lang-btn { padding: 0 8px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-ghost,
    .mcs-nav.mcs-nav--visitor .mcs-nav-cta { padding: 0 10px; font-size: 12.5px; }
}
/* the smallest phones (320px): logo, back arrow, EN, Login and Registration all still fit */
@media (max-width: 349px) {
    .mcs-nav.mcs-nav--visitor .mcs-nav-bar { gap: 4px; padding: 0 8px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-actions { gap: 2px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-lang-btn { padding: 0 6px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-ghost,
    .mcs-nav.mcs-nav--visitor .mcs-nav-cta { padding: 0 7px; }
}

/* ==========================================================================
   Photo grid
   Image-first tiles, tight gutters, no card chrome. Specs are not dropped —
   they surface in a hover overlay on pointer devices, and the always-on
   caption keeps the grid scannable on touch where hover never fires.
   ========================================================================== */

/* Take a photo / Upload a picture: a matched pair, two equal columns while there is room, then two equal full-width keys */
.cf-scan-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.mcs-ui .cf-scan-alt > .mcs-ui-btn { margin: 0; min-width: 0; box-sizing: border-box; height: auto; min-height: 44px;
    padding: 10px 16px; white-space: normal; line-height: 1.2; text-align: center; text-wrap: balance; }