/* ==========================================================================
   OwnYourStack — mobile front end (loaded after site.css)
   Light / dark mode: follows the phone setting, or the visitor's choice
   (data-theme attribute on <html>, set by theme.js).
   Light values of every token live in site.css :root; only the dark
   overrides are here.
   ========================================================================== */

/* ---------- Dark theme: overrides the site.css tokens ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand-dark: #f1f5f9;      /* headings: light text */
        --brand: #5fd0d9;
        --brand-bright: #3cc4cf;
        --brand-light: #7fd6dd;
        --brand-pale: #12323d;
        --brand-wash: #0f1d2c;
        --ink: #d6e4ea;
        --ink-soft: #a9bccb;
        --ink-light: #7f93a8;
        --bg: #0b1420;
        --bg-alt: #122033;
        --line: #22344a;
        --logo-shield: #1d4268;
        --danger-bg: #2a1214;
        --danger-line: #5c2427;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
        --shadow-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .35);
        --m-header-bg: rgba(11, 20, 32, .92);
        --m-dark-bg: #07101b;
        --m-bar-color: #0b1420;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --brand-dark: #f1f5f9;      /* headings: light text */
    --brand: #5fd0d9;
    --brand-bright: #3cc4cf;
    --brand-light: #7fd6dd;
    --brand-pale: #12323d;
    --brand-wash: #0f1d2c;
    --ink: #d6e4ea;
    --ink-soft: #a9bccb;
    --ink-light: #7f93a8;
    --bg: #0b1420;
    --bg-alt: #122033;
    --line: #22344a;
    --logo-shield: #1d4268;
    --danger-bg: #2a1214;
    --danger-line: #5c2427;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .35);
    --m-header-bg: rgba(11, 20, 32, .92);
    --m-dark-bg: #07101b;
    --m-bar-color: #0b1420;
    color-scheme: dark;
}
:root { --m-gutter: 16px; }

/* site.css elements that use --brand-dark as a background: fixed colours */
.mobile .badge, .mobile .badge--guide { background: var(--brand-dark-fixed); color: var(--on-brand); }
.mobile .badge--review { background: var(--brand-fixed); }
.mobile .badge--feature { background: var(--brand-dark-fixed); color: var(--accent); }
.mobile .badge--comparison { background: var(--accent); color: var(--accent-ink); }
.mobile .newsletter-form input[type="text"], .mobile .newsletter-form input[type="email"] { background: var(--bg); color: var(--ink); }
.mobile .pill { background: color-mix(in srgb, var(--tint) 16%, var(--bg)); }
.mobile .errors { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); border-color: color-mix(in srgb, var(--danger) 35%, var(--bg)); color: var(--danger-bright); }
.mobile .page-header { background: linear-gradient(180deg, var(--brand-pale), var(--bg-alt)); }
.mobile .reading { background: var(--bg-alt); }

/* ---------- General layout ---------- */
.mobile body {
    font-size: 16px;
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-tap-highlight-color: transparent;
}
.mobile .container { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
.mobile .main { min-height: 70vh; padding-bottom: 1.5rem; }

/* ---------- Header: site name + tabs ---------- */
.m-header {
    position: sticky; top: 0; z-index: 50;
    padding-top: env(safe-area-inset-top);
    background: var(--m-header-bg);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.m-header__top {
    display: flex; align-items: center; justify-content: space-between;
    padding: .55rem var(--m-gutter) .1rem;
}
.m-logo { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; color: var(--brand-dark); text-decoration: none; }
.m-logo .logo__text { font-size: inherit; }
.m-header::after { content: ""; display: block; height: 3px; background: var(--header-stripe); }
.m-logo .logo__text b { font-weight: 850; color: var(--brand-bright); }
.m-logo .logo__mark { width: 28px; height: 28px; }
.m-header__actions { display: flex; gap: .25rem; }

.m-icon-button {
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.m-icon-button:active { background: var(--brand-pale); }
.m-icon-button[hidden] { display: none; }
/* Theme button icon: moon in light mode, sun in dark mode */
.m-icon-sun { display: none; }
:root[data-theme="dark"] .m-icon-moon { display: none; }
:root[data-theme="dark"] .m-icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .m-icon-moon { display: none; }
    :root:not([data-theme="light"]) .m-icon-sun { display: block; }
}

.m-tabs {
    display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none;
    padding: .2rem calc(var(--m-gutter) - .55rem) 0;
    scroll-snap-type: x proximity;
}
.m-tabs::-webkit-scrollbar { display: none; }
.m-tabs a {
    --tint: var(--brand-bright);
    flex: none; scroll-snap-align: start;
    padding: .45rem .55rem .55rem; font-size: .88rem; font-weight: 600; white-space: nowrap;
    color: var(--ink-light); text-decoration: none; border-bottom: 3px solid transparent;
}
.m-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--tint); }

/* iOS install tip */
.m-ios-tip {
    display: flex; align-items: center; gap: .5rem; margin: .6rem var(--m-gutter) 0; padding: .6rem .5rem .6rem .9rem;
    border-radius: 12px; background: var(--brand-pale); color: var(--ink); font-size: .88rem;
}
.m-ios-tip[hidden] { display: none; }
.m-ios-tip p { margin: 0; flex: 1; }

/* ---------- Feed: lead article (home), full-width image ---------- */
.m-lead { border-bottom: 6px solid var(--brand-wash); }
.m-lead__link { display: block; color: var(--ink); text-decoration: none; }
.m-lead__link:active { background: var(--brand-wash); }
.m-lead__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background-color: var(--brand-pale); }
.m-lead__image.card__placeholder { display: grid; min-height: 0; }
.m-lead__image svg { width: 18%; }
.m-lead__text { display: flex; flex-direction: column; gap: .35rem; padding: .8rem var(--m-gutter) 1rem; }
.m-lead__title { font-size: 1.3rem; font-weight: 800; line-height: 1.22; color: var(--brand-dark); }
.m-lead__standfirst {
    font-size: .95rem; line-height: 1.45; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Feed: list of the latest articles ---------- */
.m-feed { --tint: var(--brand-bright); padding: .4rem 0 0; }
.m-list { list-style: none; margin: 0; padding: 0; }
.m-list li + li { border-top: 1px solid var(--line); }
.m-item {
    --row-line: 1.32em;
    display: flex; align-items: center; gap: .9rem;
    padding: .85rem var(--m-gutter);
    color: var(--ink); text-decoration: none;
}
.m-item:active { background: var(--brand-wash); }
.m-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.m-item__meta { font-size: .74rem; color: var(--ink-light); text-transform: uppercase; letter-spacing: .03em; }
/* Category colour mixed with the text colour: readable in light and dark mode */
.m-item__category { --tint: var(--brand-bright); color: color-mix(in srgb, var(--tint) 65%, var(--ink)); font-weight: 700; }
.m-item__type { font-weight: 700; color: var(--ink-soft); }
.m-item__title {
    font-size: 1rem; font-weight: 700; line-height: var(--row-line); color: var(--brand-dark);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Image: as tall as 3 lines of title */
.m-item__image {
    flex: none; width: calc(3 * var(--row-line) * 4 / 3); height: calc(3 * var(--row-line));
    font-size: 1rem; border-radius: 8px; object-fit: cover; background-color: var(--brand-pale);
}
.m-item__image.card__placeholder { min-height: 0; }
.m-item__image svg { width: 40%; }

.m-more { margin: .4rem 0 0; padding: 0 var(--m-gutter); text-align: right; }
.m-more a { display: inline-block; padding: .5rem 0; font-weight: 700; font-size: .92rem; text-decoration: none; color: color-mix(in srgb, var(--tint) 65%, var(--ink)); }

/* ---------- Feed: latest guides, 2 per row ---------- */
.m-guides { margin-top: 1.2rem; padding: 1.2rem var(--m-gutter) 0; border-top: 6px solid var(--brand-wash); }
.m-subtitle {
    font-family: var(--font-body);
    display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem;
    font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; color: color-mix(in srgb, var(--tint) 65%, var(--ink));
}
.m-subtitle::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.m-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem .8rem; }
.m-guide { display: flex; flex-direction: column; gap: .35rem; color: var(--ink); text-decoration: none; min-width: 0; }
.m-guide__image { width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 10px; object-fit: cover; background-color: var(--brand-pale); }
.m-guide__image.card__placeholder { min-height: 0; }
.m-guide__image svg { width: 26%; }
.m-guide__title {
    font-size: .92rem; font-weight: 700; line-height: 1.3; color: var(--brand-dark);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.m-guides .m-more { padding: 0; }

/* ---------- Footer ---------- */
.m-footer { margin-top: 1rem; padding: 1.2rem var(--m-gutter) calc(1.2rem + env(safe-area-inset-bottom)); background: var(--m-dark-bg); color: var(--m-footer-ink); font-size: .9rem; }
.m-footer a { color: var(--on-brand); }
.m-footer__newsletter { margin-bottom: 1rem; }
.m-footer__newsletter summary { cursor: pointer; font-weight: 700; color: var(--on-brand); padding: .4rem 0; }
.m-footer__newsletter .newsletter-form { margin-top: .6rem; }
.m-footer .newsletter-form label > span, .m-footer .newsletter-form__consent { color: var(--m-footer-ink); }
.mobile .m-footer .newsletter-form input[type="text"], .mobile .m-footer .newsletter-form input[type="email"] { background: var(--on-brand); color: var(--brand-dark-fixed); }
.m-footer .newsletter-form .button { background: var(--accent); color: var(--accent-ink); }
.m-footer__links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .6rem 0; border-top: 1px solid var(--footer-line); }
.m-footer__links a { text-decoration: none; color: var(--m-footer-ink); }
.m-footer__bottom { margin: .6rem 0 0; font-size: .78rem; color: var(--m-footer-ink-light); }

/* ---------- Shared pages (article, archive…) in the mobile version ---------- */
.mobile .reading__header { padding-top: 1.2rem; }
.mobile .reading__image { padding: 0; }
.mobile .reading__image img { border-radius: 0; }
.mobile .reading__image figcaption { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
.mobile .prose { font-size: 1.05rem; }
.mobile .page-header { padding: 1.3rem 0 1.1rem; margin-bottom: 1.2rem; }
.mobile .archive__filters { box-shadow: none; border: 1px solid var(--line); }