/*
    The Account portal's one stylesheet (Accounts #6943).

    Plain CSS, written by hand. Nothing here comes from npm, there is no CSS framework and no build
    step: the repo's constraint is .NET only, and a stylesheet that needs Node to produce is a
    second toolchain for one file.

    Company theming comes later (it is last on every team's list, by the owner's own sequencing).
    This is deliberately quiet and legible rather than branded, so replacing it later is a matter of
    changing the custom properties below rather than rewriting the markup.
*/

:root {
    color-scheme: light dark;

    --ink: #16191d;
    --ink-muted: #5a6270;
    --paper: #ffffff;
    --ground: #f4f5f7;
    --line: #d9dde3;
    --accent: #1c5fd0;
    --accent-ink: #ffffff;
    --warn-ground: #fff6e6;
    --warn-line: #e6a94b;
    --ok-ground: #eef7ee;
    --ok-line: #5aa25f;
    --danger: #b4242c;
    --radius: 8px;
    --gap: 1rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e9ecf1;
        --ink-muted: #a2abb9;
        --paper: #1a1d22;
        --ground: #121418;
        --line: #333943;
        --accent: #6ea8ff;
        --accent-ink: #10131a;
        --warn-ground: #2e2618;
        --warn-line: #a97f2c;
        --ok-ground: #17251a;
        --ok-line: #4b8250;
        --danger: #ff8a8a;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1 { font-size: 1.8rem; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
p { margin: 0 0 .75rem; }

a { color: var(--accent); }

/* Keyboard users must always be able to see where they are. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

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

/* The first thing a keyboard or screen-reader user meets: a way past the navigation. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: var(--accent-ink);
    padding: .6rem 1rem;
    z-index: 10;
}
.skip-link:focus { left: 0; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: .75rem 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 600; }
.brand-mark {
    display: inline-grid; place-items: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: var(--radius);
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700;
}
.who { display: flex; align-items: center; gap: .75rem; font-size: .92rem; }
.who-name { color: var(--ink-muted); }
.link-plain { color: var(--accent); }

.shell-body { display: flex; flex: 1; align-items: flex-start; }

.shell-nav {
    flex: 0 0 15rem;
    padding: 1.25rem .75rem;
    position: sticky;
    top: 0;
}
.shell-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.shell-nav a {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem;
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}
.shell-nav a:hover { background: var(--paper); }
.shell-nav a.active { background: var(--paper); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { color: var(--ink-muted); }

.shell-main {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem 3rem;
    max-width: 62rem;
}

.shell-footer {
    padding: 1rem 1.5rem 2rem;
    color: var(--ink-muted);
    font-size: .85rem;
    border-top: 1px solid var(--line);
}
.shell-footer nav { display: flex; gap: .5rem; margin-bottom: .35rem; }

.breadcrumbs ol { list-style: none; display: flex; gap: .4rem; margin: 0 0 .75rem; padding: 0; font-size: .87rem; color: var(--ink-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }

.lede { color: var(--ink-muted); max-width: 44rem; }
.muted { color: var(--ink-muted); }
.fineprint { color: var(--ink-muted); font-size: .85rem; max-width: 46rem; }

.hero { padding: 2rem 0; max-width: 40rem; }

.button {
    display: inline-block;
    padding: .5rem .9rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.button:hover { border-color: var(--accent); }
.button[disabled] { opacity: .55; cursor: not-allowed; }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button-small { padding: .3rem .6rem; font-size: .87rem; }
.button-quiet { background: transparent; border-style: dashed; }
.button-danger { border-color: var(--danger); color: var(--danger); }

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--gap);
    margin: 1rem 0 2rem;
}
.tile {
    display: flex; flex-direction: column; gap: .2rem;
    padding: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}
.tile:hover { border-color: var(--accent); }
.tile-warn { border-color: var(--warn-line); background: var(--warn-ground); }
.tile-label { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.tile-value { font-size: 1.6rem; font-weight: 600; }
.tile-detail { font-size: .87rem; color: var(--ink-muted); }

.attention { margin: 1rem 0; }
.attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.attention-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
    padding: .75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--warn-line);
    background: var(--warn-ground);
}
.attention-item.severe { border-color: var(--danger); }

.notice { padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); margin: 0 0 1rem; }
.notice-warning { border-color: var(--warn-line); background: var(--warn-ground); }
.notice-ok { border-color: var(--ok-line); background: var(--ok-ground); }

.empty {
    padding: 1.5rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    max-width: 44rem;
}

.card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.card {
    display: flex; gap: var(--gap); justify-content: space-between; align-items: flex-start;
    padding: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.card-main { min-width: 16rem; flex: 1; }
.card-actions { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }

/* The per-product submenu on the products page (#7157). Links, not a tab widget - they scroll
   sideways on a narrow screen rather than wrapping into a block that pushes the page down. */
.product-menu { margin: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.product-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; overflow-x: auto; }
.product-menu-item {
    display: block; padding: .5rem .9rem; white-space: nowrap;
    color: var(--ink-muted); text-decoration: none;
    border-bottom: 3px solid transparent;
}
.product-menu-item:hover { color: inherit; background: var(--paper); }
.product-menu-item.active { color: inherit; font-weight: 600; border-bottom-color: var(--accent); }

.product { margin-bottom: 2.5rem; }
.product-devices { margin: .25rem 0 0; font-size: .87rem; }
.product-note { border-left: 3px solid var(--warn-line); padding-left: .75rem; }

.bundle-grid {
    list-style: none; margin: 1rem 0 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--gap);
}
.bundle {
    display: flex; flex-direction: column; gap: .4rem;
    padding: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.bundle-held { border-color: var(--ok-line); }
.bundle-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bundle-audience { font-size: .87rem; color: var(--ink-muted); margin: 0; }
.bundle-description { margin: 0; }
.bundle-price { margin: .3rem 0; }
.bundle-contents summary { cursor: pointer; font-size: .87rem; color: var(--ink-muted); }
.bundle-contents ul { margin: .4rem 0 0 1rem; padding: 0; }
.bundle-actions { margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.badge { font-size: .75rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.badge-held { border-color: var(--ok-line); background: var(--ok-ground); }
.badge-trial { border-color: var(--warn-line); background: var(--warn-ground); }
.badge-placeholder { border-color: var(--warn-line); background: var(--warn-ground); }
/* The yearly saving, beside the Subscribe yearly button (#7156). */
.badge-saving { border-color: var(--ok-line); background: var(--ok-ground); }

.big-number { font-size: 2.2rem; font-weight: 600; margin: .25rem 0; }
.balance-eur { font-size: 1rem; font-weight: 400; color: var(--ink-muted); }

.topups { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }

/* The credit terms §7 consent (#6992). Aligned to the top of its own text rather than centred:
   the label wraps to several lines and a centred box drifts into the middle of them. */
.consent { display: flex; align-items: flex-start; gap: .5rem; max-width: 46rem; margin-top: .75rem; font-size: .85rem; color: var(--ink-muted); }
.consent input { margin-top: .2rem; flex: none; }

/* Wide content scrolls inside its own region - the page itself never scrolls sideways. */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
table.data th, table.data td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); }
table.data thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
table.data tbody tr:last-child td { border-bottom: 0; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; }

.inline-field { display: inline-flex; align-items: center; gap: .4rem; }
.inline-field input, .inline-field select {
    font: inherit;
    padding: .35rem .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}

.allowance { font-size: 1.05rem; }
.plain-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }

@media (max-width: 45rem) {
    .shell-body { flex-direction: column; }
    .shell-nav { position: static; flex: none; width: 100%; padding: .5rem; }
    .shell-nav ul { flex-direction: row; overflow-x: auto; }
    .shell-main { padding: 1rem; }
}