/* ============================================================
   mdm.tools -- shared base layer (issue #28)

   Extracted from the byte-identical (or single-value-divergent)
   reset / token / nav-links / header / footer-text rules that were
   duplicated verbatim across serve/{about,dockbuilder,extension-
   attributes,firewall,jamf-api,loginwindow,notifications,pppc,
   smartgroups,swiftdialog}/style.css. Linked with an absolute path
   (like /favicon.svg) on all 11 pages, BEFORE each page's local
   style.css, so local rules win by source order for anything that
   legitimately differs per tool (max-width, per-tool badge colors,
   the --analysis-* tokens, etc).

   Deliberately NOT included here, even though they share a class
   name with the tool-page family: .site-nav, .site-nav-inner,
   .nav-brand, .nav-hamburger, .theme-toggle, .site-footer, body.
   serve/index.html (the homepage) reuses those exact class names
   for a genuinely redesigned navbar/footer/theme-toggle (sticky
   blurred nav, extra design tokens, different button chrome) whose
   property set does not fully overlap the tool-page version -- a
   property-by-property audit showed the homepage would leak
   layout-affecting declarations (display, height, padding,
   backgrounds) it never asked for. Sharing those specific selectors
   would require either renaming the homepage's chrome classes
   (which fights the "textually uniform chrome" goal recorded for
   the future tool-page generator in docs/TRACKING.md) or hand-
   patching every gap (fragile, easy to silently regress). Given
   this ticket is tech-debt priority, the safe subset below is
   the correct scope; the nav shell stays duplicated for now.
   ============================================================ */

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

/* ---------- Accessibility ---------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 999;
    text-decoration: none;
}
.skip-link:focus { top: 8px; }
*:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* ---------- Design tokens ---------- */
:root {
    --bg: #0B2038;
    --surface: #0E2742;
    --surface2: #14385C;
    --accent: #3DA9FC;
    --accent2: #1B4E7D;
    --text: #F5F8FC;
    --text-dim: #A9C0D6;
    --green: #3DA9FC;
    --yellow: #E7B152;
    --radius: 8px;
    --mono: "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;
}
[data-theme="light"] {
    --bg: #EDF2F8;
    --surface: #ffffff;
    --surface2: #D6E2EE;
    --accent: #1E7FD0;
    --accent2: #1E7FD0;
    --text: #0E2742;
    --text-dim: #4A6885;
    --green: #1E7FD0;
    --yellow: #B77C1A;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #EDF2F8;
        --surface: #ffffff;
        --surface2: #D6E2EE;
        --accent: #1E7FD0;
        --accent2: #1E7FD0;
        --text: #0E2742;
        --text-dim: #4A6885;
        --green: #1E7FD0;
        --yellow: #B77C1A;
    }
    :root:not([data-theme="dark"]) .radio-pill:checked + label {
        background: rgba(30, 127, 208, 0.1);
        color: #1668B0;
    }
}

/* ---------- Page header (tool pages + about; unused on the
   homepage and on loginwindow, which uses .tool-header) ---------- */
.header {
    text-align: center;
    padding: 20px 0 8px;
}
.header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.version {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-family: var(--mono);
}
.header-sub {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-top: 6px;
}

/* ---------- Primary nav links (the <ul> contents; the wrapping
   <nav>/.site-nav-inner/.nav-brand/.theme-toggle/.nav-hamburger
   chrome stays local -- see note above) ---------- */
.nav-links {
    display: flex;
    gap: 6px;
    row-gap: 2px;
    list-style: none;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.nav-links a {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface2); }
.nav-links a.active {
    color: var(--green);
    background: rgba(61, 169, 252, 0.08);
}

/* ---------- Builder shell (width/max-width and bottom padding
   stay local per tool) ---------- */
.app {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- Footer copy line (issue #32): every page's footer
   carries a .footer-copy paragraph with this text; pages that
   generate an Apple/Jamf/vendor profile additionally carry a
   .footer-disclaimer paragraph with their own tool-specific
   non-affiliation wording (kept local -- it names a different
   vendor per tool, so it is not shareable base content). ---------- */
.footer-copy {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-dim);
    opacity: 0.7;
}
.footer-disclaimer {
    font-size: 0.72rem;
    color: var(--text-dim);
    opacity: 0.85;
}

/* ---------- "How encrypted sharing works" pointer that sits under
   every builder's share control (issue #169). Shared here rather
   than per tool because the markup is identical on all nine. ---------- */
.share-help {
    max-width: 760px;
    margin: 0 auto 12px;
    padding: 0 16px;
    font-size: 0.72rem;
    color: var(--text-dim);
}
.share-help a { color: var(--green); }

/* ---------- Static tool guidance (issue #123) ---------- */
.tool-explainer {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    gap: 10px;
    line-height: 1.55;
    background: var(--surface);
    border: 1px solid var(--surface2);
    border-radius: var(--radius);
}
.tool-explainer h2 {
    font-size: 1rem;
    line-height: 1.3;
}
.tool-explainer h2:not(:first-child) { margin-top: 8px; }
.tool-explainer p,
.tool-explainer li {
    color: var(--text-dim);
    font-size: 0.85rem;
}
.tool-explainer ul {
    padding-left: 20px;
    display: grid;
    gap: 4px;
}
.tool-explainer pre {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px;
    overflow-x: auto;
    background: var(--bg);
    border-radius: 6px;
}
.tool-explainer code {
    font-family: var(--mono);
    font-size: 0.78rem;
    white-space: pre;
}
.tool-explainer + noscript > p {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 12px;
    color: var(--text-dim);
    font-size: 0.8rem;
    border: 1px solid var(--yellow);
    border-radius: var(--radius);
}

/* ---------- Tool changelog headings (issue #126) ---------- */
.changelog-title {
    width: 100%;
    max-width: 760px;
    margin: 20px auto 8px;
    font-size: 1rem;
    line-height: 1.3;
}