/* NuVault UI baseline + responsive layer (#36).
 *
 * Mobile-first defaults, with a single max-width:640px breakpoint
 * for narrow viewports. We avoid extra breakpoints because the layout
 * is intentionally simple — one column of content under 960px wide.
 */
:root {
    --bg: #ffffff;
    --fg: #1a1a1a;
    --accent: #2563eb;
    --border: #e5e7eb;
    --muted-fg: #6b7280;
    --mono: ui-monospace, "SF Mono", "Menlo", monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html, body {
    /* Prevent horizontal scroll on phones when content is wider than
     * the viewport (e.g. long secret keys). Tables get their own
     * horizontal scroll via .table-wrap. */
    overflow-x: hidden;
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--fg);
    margin: 0;
    line-height: 1.5;
    /* Better text rendering on small high-DPI screens. */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code, pre {
    font-family: var(--mono);
    /* On mobile, very long key names should wrap rather than overflow. */
    word-break: break-word;
}

img, table {
    max-width: 100%;
}

/* Topnav (base.html). Flex-wrap so the links flow to a second line
 * on narrow viewports rather than overflow the right edge. */
.topnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    font-size: 0.9375rem;
}

.topnav a {
    color: var(--fg);
    /* Larger tap targets — without explicit padding, the anchor's
     * clickable area is only as tall as a line of text, well under
     * the ~44px touch-target floor. */
    padding: 8px 6px;
    border-radius: 4px;
}

.topnav a:hover {
    color: var(--accent);
    background: #f3f4f6;
    text-decoration: none;
}

/* Page-meta line under most h1's (orgs/team/project/secrets pages). */
.meta {
    color: var(--muted-fg);
    font-size: 0.9375rem;
    margin-top: -4px;
}

/* Org → team → project tree on /orgs. Indentation tightens on
 * mobile via the breakpoint at the bottom of this file. */
ul.hierarchy {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
}

ul.hierarchy ul {
    list-style: none;
    padding-left: 20px;
    margin: 4px 0;
    border-left: 2px solid var(--border);
}

ul.hierarchy li {
    padding: 4px 0;
}

/* Inheritance-level badges on the project-secrets page (#34). */
.level {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.level-project { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.level-team    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.level-org     { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

/* Wrap tables in an overflow container so very long descriptions
 * scroll horizontally on phones rather than blow out the layout.
 * Currently used implicitly: when the table is wider than its
 * parent, the parent (e.g. <main>) clips and the user can swipe. */
table.secrets {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    /* min-width keeps columns readable and forces horizontal scroll
     * on very narrow phones rather than crushing every cell. */
    min-width: 480px;
}

table.secrets th, table.secrets td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

table.secrets th {
    font-weight: 600;
    background: #f9fafb;
}

/* Provides horizontal-scroll fallback for the table on narrow
 * viewports. Templates that need it can wrap <table class="secrets">
 * in a <div class="table-wrap">. Project-secrets page leaves the
 * table bare today; this rule is here so templates can opt in. */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.new-secret form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin: 12px 0;
}

.new-secret label {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    flex: 1 1 200px;
}

.new-secret input {
    margin-top: 4px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    /* Pin font-size to 1rem (≥16px) — iOS Safari force-zooms the
     * page when a focused input has font-size < 16px, which makes
     * every "add secret" tap on an iPhone jump and require a
     * pinch-to-restore. Inheriting from .new-secret label (0.875rem)
     * would trigger this. Setting font (rather than just font-size)
     * also keeps the form font-family consistent. */
    font: inherit;
    font-size: 1rem;
    /* Make sure inputs don't push their flex parent wider than the
     * viewport on mobile. */
    min-width: 0;
    width: 100%;
}

button {
    padding: 6px 14px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    /* Ensure tap targets meet the 44px-ish accessibility floor on
     * touch devices without bloating desktop buttons. */
    min-height: 36px;
}

button.danger {
    background: #fff;
    color: #b91c1c;
    border-color: #fca5a5;
}

button.danger:hover {
    background: #fee2e2;
}

/* Inline anchors styled to read as buttons (Edit / Cancel on the
 * secrets page). */
.button-link {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.2;
    min-height: 36px;
}

.button-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.muted {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.875rem;
}

.breadcrumbs {
    font-size: 0.875rem;
    color: var(--muted-fg);
    margin-bottom: 16px;
    /* Wrap to the next line on phones when the path is long
     * (Org / Team / Project / secrets). */
    overflow-wrap: anywhere;
}

.breadcrumbs a, .breadcrumbs strong, .breadcrumbs .org {
    color: var(--fg);
}

/* ----------------------------------------------------------------
 * Mobile breakpoint.
 *
 * One narrow-viewport rule set; below 640px we tighten padding,
 * make form labels span the full width, and let the secrets table
 * scroll horizontally inside its parent rather than shrink columns
 * to unreadable widths.
 * ---------------------------------------------------------------- */
@media (max-width: 640px) {
    main {
        padding: 16px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    .topnav {
        font-size: 1rem;
    }

    /* Each form field gets its own line — easier to tap, no awkward
     * two-column layout on a 360px-wide phone. */
    .new-secret label {
        flex: 1 1 100%;
    }

    /* Buttons span the row on mobile so they're easy to tap. */
    .new-secret button,
    .new-secret .button-link {
        width: 100%;
        text-align: center;
    }

    /* Allow the secrets table to scroll horizontally inside <main>
     * rather than overflow it. */
    table.secrets {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    ul.hierarchy ul {
        padding-left: 14px;
    }
}