/* Shared, site-wide styles — linked by every page via includes/head.php.
   Only rules that genuinely apply everywhere belong here; anything
   specific to one page's own markup stays in that page's own <style>
   block. */

:root {
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --text: #1A1A1A;
    --text-muted: #5F6368;
    --border: #E3E3E3;
    --accent: #3B4FE0;
    --accent-contrast: #FFFFFF;

    /* Logo mark facets, top-to-bottom / left-to-right as drawn. */
    --logo-top-left: #9AA6F5;
    --logo-top-main: #6C7CF0;
    --logo-top-right-bar: #2A38A8;
    --logo-top-right: #3B4FE0;
    --logo-stem-left: #3B4FE0;
    --logo-stem-right: #2A38A8;
    --logo-foot-left: #6C7CF0;
    --logo-foot-right: #1C2570;
    --logo-stroke: #1C2570;
}

:root[data-theme='dark'] {
    --bg: #121212;
    --surface: #1A1A1A;
    --text: #F5F5F5;
    --text-muted: #A0A0A0;
    --border: #2C2C2C;
    --accent: #6C7CF0;
    --accent-contrast: #121212;

    --logo-top-left: #9AA6F5;
    --logo-top-main: #8792F5;
    --logo-top-right-bar: #5566E8;
    --logo-top-right: #6C7CF0;
    --logo-stem-left: #6C7CF0;
    --logo-stem-right: #4756D6;
    --logo-foot-left: #8792F5;
    --logo-foot-right: #3B4FE0;
    --logo-stroke: #0B0F3F;
}

body {
    font-family: 'Source Sans 3', sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1, h2, h3, h4 {
    font-family: 'Space Grotesk', sans-serif;
}

h1 {
    font-weight: 700;
}

h2, h3, h4 {
    font-weight: 500;
}

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

/* Shared bordered/surfaced panel — settings sections, feature highlights,
   and other boxed content across pages. Page-specific sizing (e.g. a
   max-width) stays in that page's own <style> block alongside this class. */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* "Getting started" tip box — see includes/getting_started_box.php. A
   distinct class from .card (even though visually similar) so it can be
   restyled independently later without affecting generic content cards. */
.getting-started-box {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 40px 12px 16px;
    margin-bottom: 16px;
}

.getting-started-box h2 {
    margin-top: 0;
    font-size: 1.1em;
}

.getting-started-dismiss {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.3em;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--text-muted);
}

.getting-started-dismiss:hover {
    color: var(--text);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 8px 0 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.site-nav a.current {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.site-footer {
    margin-top: 32px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9em;
}

/* The logo lockup: T mark + "odario", read as one link/word (see
   includes/logo.php for the accessibility reasoning). */
.logo-lockup {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    vertical-align: middle;
}

.logo-mark {
    display: block;
}

.logo-mark polygon {
    stroke: var(--logo-stroke);
    stroke-width: 0.7;
}

.logo-fill-1 { fill: var(--logo-top-left); }
.logo-fill-2 { fill: var(--logo-top-main); }
.logo-fill-3 { fill: var(--logo-top-right-bar); }
.logo-fill-4 { fill: var(--logo-top-right); }
.logo-fill-5 { fill: var(--logo-stem-left); }
.logo-fill-6 { fill: var(--logo-stem-right); }
.logo-fill-7 { fill: var(--logo-foot-left); }
.logo-fill-8 { fill: var(--logo-foot-right); }

.logo-wordmark {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--text);
    margin-left: 2px;
}

/* The folder-color swatch button, identical between jumpgo/index.php's
   color-popup and edit_folder.php's form — .swatches itself (the
   container) isn't shared since its max-width differs between the two. */
.swatch {
    font: inherit;
    padding: 5px 10px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

/* The "Default" swatch clears both color columns to NULL rather than
   choosing a bg/text pair, so — unlike every other swatch — it has no
   inline background/color of its own. Theme tokens plus a dashed border
   mark it as "no color chosen" rather than a swatch that failed to pick
   up a background. */
.swatch-default {
    background: var(--surface);
    color: var(--text);
    border-style: dashed;
    border-color: var(--border);
}

/* Global form-control baseline, theme-token driven. Scoped away from
   checkbox/radio/hidden/file inputs, whose native rendering (and, for
   checkbox/radio, inline layout next to their label) this would break —
   those keep the browser default. Anything with a more specific selector
   of its own (.icon-btn, .tab-button, .swatch, .getting-started-dismiss,
   etc.) overrides this by ordinary class-vs-type-selector specificity,
   regardless of source order, so this only ever styles plain, otherwise
   unstyled controls (Save/Create/Log in buttons, text/url/email/password
   inputs, <select>s). */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select {
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
}

button,
.btn-primary {
    font: inherit;
    padding: 8px 14px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
}

/* .btn-primary is the same primary-button look as <button>, applied to an
   <a> — for actions that navigate (an internal link, an external link
   like the Chrome Web Store) rather than submit or run a click handler,
   where a real anchor is the correct element but should still read as a
   primary call-to-action. */
.btn-primary {
    display: inline-block;
    text-decoration: none;
}

/* The de-emphasized counterpart to .btn-primary/<button> — a "Cancel"
   next to a form's submit, styled as a plain bordered control (like
   .icon-btn's neutral surface look) rather than the accent-filled
   primary, so the two are visually ranked without either one looking
   disabled. Always an <a> in practice (Cancel navigates away without
   submitting), never a <button>, so unlike .btn-primary this doesn't
   need to share a selector with the button element rule. */
.btn-secondary {
    display: inline-block;
    font: inherit;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

button:hover,
.btn-primary:hover {
    filter: brightness(0.92);
}

.btn-secondary:hover {
    background: var(--bg);
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

@media (max-width: 600px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    select {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Touch devices have no hover state to reveal small controls, and finger
   input needs a bigger target than a mouse pointer — 44px follows the
   commonly cited minimum comfortable tap size. */
@media (hover: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    button,
    .btn-primary,
    .btn-secondary {
        min-height: 44px;
    }

    /* .btn-primary/.btn-secondary are inline-block <a>s, not <button>s —
       they need their own rule to actually center their label within
       that taller min-height (a <button>'s UA-default content-centering
       already does this). */
    .btn-primary,
    .btn-secondary {
        display: inline-flex;
        align-items: center;
    }
}