/* ============================================================
   Seeff Area Profiles — design system
   Brand: navy #1B2A57, Seeff red #D81E2C (sparing accent), white.
   Fonts: Oswald (headings), Inter (body). Loaded via Google Fonts.
   ============================================================ */

:root {
    --navy: #1B2A57;
    --navy-700: #16224A;
    --navy-900: #0F1A35;   /* sidebar depth / hovers */
    --red: #D81E2C;
    --red-700: #B0182A;

    --ink: #2B3445;
    --muted: #6B7280;
    --line: #E3E8EF;
    --bg: #EEF1F5;
    --white: #FFFFFF;
    --link-blue: #1A63D8;  /* hover state for links in the editor; see the link rule at the end */

    --amber-bg: #FEF3C7; --amber-ink: #92400E;
    --green-bg: #DCFCE7; --green-ink: #166534;
    --red-bg: #FBE0E3;   --red-ink: #B0182A;
    --teal-bg: #CCF0EC;  --teal-ink: #0F766E;

    --radius: 12px;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3, h4, .display {
    font-family: "Oswald", "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--navy);
    margin: 0 0 .4em;
}
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); }

.muted { color: var(--muted); }
.right { margin-left: auto; }

/* --- Top bar --- */
.topbar {
    height: 64px;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 22px;
    gap: 18px;
}
.topbar .logo { display: flex; align-items: center; height: 64px; }
.topbar .logo img { height: 30px; display: block; }
.topbar .spacer { flex: 1; }

/* user menu (native <details> dropdown, no JS) */
.usermenu { position: relative; }
.usermenu > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    color: #fff; padding: 6px 8px; border-radius: 8px;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: rgba(255,255,255,.08); }
.usermenu .avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff;
    display: grid; place-items: center; font-weight: 600; font-size: 13px;
}
.usermenu .caret { color: #aebbd6; }
.usermenu .menu {
    position: absolute; right: 0; top: 52px; background: #fff; color: var(--ink);
    border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
    min-width: 200px; padding: 8px; z-index: 50;
}
.usermenu .menu .who { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.usermenu .menu button, .usermenu .menu a {
    width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px;
    border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); display: block;
}
.usermenu .menu button:hover, .usermenu .menu a:hover { background: var(--bg); color: var(--red); }

/* --- Shell: sidebar + main --- */
.shell { display: flex; min-height: calc(100vh - 64px); }

.sidebar {
    width: 248px; background: var(--navy-900); color: #c7d0e4; flex-shrink: 0;
    padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
}
.sidebar .seclabel {
    font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 1px;
    font-size: 11px; color: #6f7da0; padding: 14px 12px 6px;
}
.sidebar .nav-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px;
    color: #c7d0e4; font-weight: 500; border-left: 3px solid transparent;
}
.sidebar .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar .nav-item.active {
    background: rgba(216,30,44,.14); color: #fff; border-left-color: var(--red);
}
.sidebar .nav-item.disabled { opacity: .45; cursor: default; }
.sidebar .nav-item.disabled:hover { background: none; color: #c7d0e4; }
.sidebar .soon {
    margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
    background: rgba(255,255,255,.08); padding: 2px 7px; border-radius: 999px; color: #9fb0d6;
}
.sidebar .spacer { flex: 1; }
.sidebar .foot { font-size: 11px; color: #5d6c91; padding: 10px 12px; }

.main { flex: 1; min-width: 0; }
.breadcrumb {
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px 26px;
    display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px;
}
.breadcrumb .sep { color: #c3cbd9; }
.breadcrumb .here { color: var(--navy); font-weight: 600; }
.content { padding: 26px; max-width: 1180px; }
.page-title { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.page-title h1 { margin: 0; position: relative; padding-bottom: 8px; }
.page-title h1::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px;
    background: var(--red); border-radius: 2px;     /* the Seeff red underline motif */
}

/* --- Cards --- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.card-header {
    background: var(--navy); color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 10px;
    font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .3px; font-size: 16px;
}
.card-header .count { margin-left: 10px; background: rgba(255,255,255,.16); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-family: "Inter", sans-serif; }
.card-header .hr-right { margin-left: auto; }
.card-body { padding: 18px; }
.card.plain .card-body { padding: 18px; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px;
    border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
    font: 500 14px "Inter", sans-serif; text-decoration: none; transition: .12s;
}
.btn:hover { border-color: #cfd6e3; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-700); color: #fff; }
.btn-accent { background: var(--red); border-color: var(--red); color: #fff; }
.btn-accent:hover { background: var(--red-700); color: #fff; }
.btn-danger { background: #fff; border-color: #e7b3ba; color: var(--red-700); }
.btn-danger:hover { background: var(--red-bg); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* --- Pills / badges --- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: .2px; }
.pill-amber { background: var(--amber-bg); color: var(--amber-ink); }
.pill-green { background: var(--green-bg); color: var(--green-ink); }
.pill-red   { background: var(--red-bg);   color: var(--red-ink); }
/* Superseded drafts: several pending drafts for one suburb is deliberate while the
   generator is being tuned, so the older ones must be visibly secondary WITHOUT being
   hidden. Muted, never removed: keeping the earlier versions to compare against is the
   entire reason duplicates are allowed. */
.pill-grey  { background: var(--bg);       color: var(--muted); }
.row-superseded .area, .row-superseded td { opacity: .72; }
.pill-teal  { background: var(--teal-bg);  color: var(--teal-ink); }
.pill-navy  { background: #E6EAF3; color: var(--navy); }

/* --- Table --- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
    text-align: left; font: 600 11px "Inter", sans-serif; text-transform: uppercase; letter-spacing: .6px;
    color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fafbfc;
}
.tbl td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #f7f9fc; }
.tbl .area { font-weight: 600; color: var(--navy); }

/* avatar chip (people) */
.chip { display: inline-flex; align-items: center; gap: 8px; background: #f1f4f9; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 13px; }
.chip .ini { width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; }

/* --- Forms --- */
label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin: 12px 0 5px; }
input[type=text], input[type=email], input[type=password], textarea, select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
    font: 14px "Inter", sans-serif; color: var(--ink); background: #fff;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,42,87,.12); }
.searchbar { display: flex; gap: 10px; align-items: center; }
.searchbar input { flex: 1; }
.err { color: var(--red-700); font-size: 13px; margin-top: 5px; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row > div { flex: 1; min-width: 180px; }

/* --- Flash --- */
.flash { background: var(--green-bg); border: 1px solid #a7e0bd; color: var(--green-ink); padding: 11px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500; }
/* A failed write against a client's live record must not render in the SAME green as a
   successful one. The restore path in particular reports "nothing was written" as an error,
   and that has to read as a stop, not as a confirmation. */
.flash-error { background: var(--red-bg); border-color: #e7b3ba; color: var(--red-ink); }

/* --- Login (guest) --- */
.guest-wrap { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 24px;
    background: radial-gradient(1200px 500px at 50% -10%, #223465 0%, var(--bg) 60%); }
.login-card { width: 100%; max-width: 420px; }
.login-card .card-body { padding: 26px; }

/* --- Public presentation --- */
.ap-public { max-width: 760px; margin: 0 auto; }
.ap-public .card-body { padding: 26px 30px; }
.ap-public h2 { font-size: 24px; }
.ap-public h3 { color: var(--navy); text-transform: none; letter-spacing: 0; font-size: 17px; margin-top: 18px; }

/* --- Misc --- */
.stack > * + * { margin-top: 14px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.notice { border:1px solid #f3d27e; background:#fffbeb; border-radius:10px; padding:14px 16px; }
textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: #fbfcfe; }

/* tabbed plain-text editor */
.tabs { display:flex; gap:6px; }
.tab { background: rgba(255,255,255,.14); border:0; color:#e7ebf3; font:600 13px "Inter",sans-serif; padding:5px 13px; border-radius:7px; cursor:pointer; }
.tab:hover { background: rgba(255,255,255,.26); }
.tab.active { background:#fff; color: var(--navy); }
.ap-preview { line-height:1.65; }
.ap-preview h2 { font-size:20px; }
.ap-preview h3 { color: var(--navy); text-transform:none; letter-spacing:0; font-size:16px; margin-top:16px; }
.ap-preview ul { padding-left:20px; }

/* visual (WYSIWYG) editor */
.rte-toolbar { display:flex; gap:6px; margin-bottom:10px; }
.rte-toolbar button { border:1px solid var(--line); background:#fff; border-radius:7px; padding:6px 12px; font:600 13px "Inter",sans-serif; cursor:pointer; color:var(--ink); min-width:38px; display:inline-flex; align-items:center; justify-content:center; }
.rte-toolbar button svg { display:block; }
.rte-toolbar button:hover { background:var(--bg); border-color:#cfd6e3; }
.rte-sep { width:1px; align-self:stretch; background:var(--line); margin:2px 5px; }
.rte { min-height:300px; border:1px solid var(--line); border-radius:9px; padding:16px 18px; background:#fff; outline:none; }
.rte:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,42,87,.12); }
.rte:empty::before { content:"Start typing..."; color:var(--muted); }

/* generate form (queue page) */
.genform-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.genform-field { display:flex; flex-direction:column; gap:5px; flex:1; min-width:150px; }
.genform-field label { font:600 12px "Inter",sans-serif; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.genform-submit { flex:0 0 auto; min-width:auto; flex-direction:row; gap:8px; align-items:flex-end; position:relative; }
/* Two verbs sit side by side and neither wraps. Without the nowrap "Add structure only"
   folded onto three lines and read as an afterthought beside Generate. */
.genform-submit .btn { white-space: nowrap; }
/* The picker's verdict must not shove the row it sits under: it appears only after an area
   is chosen, so a reserved-height-free block would otherwise jump the whole form. */
.genform-field .shape-hint { max-width: 100%; }
.form-error { color:#b42331; font:500 13px "Inter",sans-serif; margin-top:8px; }
.pill-blue { background:#e5efff; color:#1d4ed8; }

/* publish outputs copy bar */
.copybar { display:flex; gap:10px; flex-wrap:wrap; }

/* owned-render preview */
.preview-ribbon { position:sticky; top:0; z-index:50; background:var(--red, #D81E2C); color:#fff; text-align:center; font:600 12.5px "Inter",sans-serif; letter-spacing:.6px; text-transform:uppercase; padding:7px 10px; }
.schema-details { margin-top:16px; border:1px solid var(--line); border-radius:10px; background:#fbfcfe; }
.schema-details summary { cursor:pointer; padding:12px 16px; font:600 13.5px "Inter",sans-serif; color:var(--navy); }
.schema-details pre { margin:0; padding:14px 16px; border-top:1px solid var(--line); font:12px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }

/* Fixed-area picker on the Generate form (AP-075): identity is chosen, not typed. */
.typeahead {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    margin-top: 4px; background: #fff; border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 10px 24px rgba(16,24,40,.12);
    max-height: 280px; overflow-y: auto; padding: 4px;
}
.typeahead-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 7px;
    background: transparent; cursor: pointer; font: inherit; color: inherit;
}
.typeahead-item.active, .typeahead-item:hover { background: var(--bg); color: var(--red); }
.typeahead-item .ta-flag {
    font-size: 11px; color: var(--muted, #6b7280); white-space: nowrap;
    border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px;
}

/* The live page's own links, inside the "Original page" tab of a draft review.
   Rendered in Seeff's red exactly as they appear on seeff.com, because in the
   default admin styling an anchor is indistinguishable from body text until you
   hover it, and these links are the point: they are internal links into Seeff's
   blog and contact pages that overwriting the description would destroy. */
/* ...and the same treatment inside the CONTENT EDITOR, which is where the vetter
   actually works. The Original page tab having red links was only half the fix:
   once copy is being edited, a carried-through link is invisible again, and the
   words it wraps usually appear elsewhere as plain text ("Fish Hoek" occurs seven
   times in Clovelly's copy), so a stripped anchor leaves a page that reads exactly
   the same. Red says "this is a link". Blue on hover says "and it is a real link,
   not red emphasis", which is the distinction that matters when a vetter is
   deciding whether they are about to lose one.

   ⚠️ EDITOR CHROME ONLY, and it must stay that way. These colours live in the
   admin stylesheet. The push sends `rendered_html`, which carries the anchor and
   no styling whatsoever, so nothing here reaches PropData. Do NOT be tempted to
   inline these as style attributes to make them "match" in the CMS: that would
   put presentation into a client's content field, and PropData's editor strips
   what it does not allow anyway (AP-066). */
.existing-original a,
.existing-link-demo,
.rte a,
.ap-preview a {
    color: var(--red);
    text-decoration: underline;
    font-weight: 500;
}
.existing-original a:hover,
.rte a:hover,
.ap-preview a:hover { color: var(--link-blue); }

/* The editor is a contenteditable region, so a click places the cursor rather than
   following the link. The cursor keeps saying "text" for that reason; the colour
   change on hover is the affordance, not navigation. Use the Original page tab or
   the owned-render preview to actually open one. */
.rte a { cursor: text; }

/* ── RESKIN (AP-129/AP-131) ────────────────────────────────────────────────────
   Structure added to a branch's own copy, not a word of it changed. The visual job
   here is to make the promoted headings obvious against the original, because that
   is the ONE thing a vetter has to judge. Everything else stays quiet.
   Nothing in this block reaches PropData: the push sends `rendered_html`, which
   carries no styling (AP-066). */

.btn-secondary { background: #fff; border-color: var(--navy); color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-secondary:disabled { opacity: .45; cursor: not-allowed; background: #fff; color: var(--muted); border-color: var(--line); }

/* The picker's verdict on the live page. Advertised from the same scorer the engine
   uses, so it cannot promise a verb the engine then refuses. */
.shape-hint { display: inline-block; padding: 5px 9px; border-radius: 6px; line-height: 1.5; }
.shape-ok { background: #ECFDF5; color: #065F46; }
.shape-warn { background: var(--amber-bg); color: var(--amber-ink); }

/* Tells the two kinds of draft apart in the queue at a glance. */
.mode-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px;
    border-radius: 999px; letter-spacing: .02em; vertical-align: middle; }
.mode-reskin { background: #EEF2FF; color: #3730A3; }

/* Before and after, side by side. The vetter's whole task is comparing the two, so
   they sit level and scroll independently rather than stacking. */
.reskin-compare { display: flex; gap: 18px; flex-wrap: wrap; }
.reskin-compare .pane { flex: 1 1 380px; min-width: 0; }
.reskin-compare h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 8px; font-weight: 700; }
.reskin-body { border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px;
    max-height: 560px; overflow-y: auto; overflow-x: auto; background: #fff; }
.reskin-body.is-before { background: #FAFBFC; }

/* The promoted headings, marked so they read as ADDED rather than as page furniture. */
/* ⚠️ text-transform is RESET here, and it has to be. A global `h3 { text-transform:
   uppercase }` rule sits at the top of this file, so a promoted heading rendered as
   "1. KRUGER NATIONAL PARK" when the branch wrote "1. Kruger National Park". The words are
   theirs and the review screen must show them as written. The owned-render and public views
   already carry the same reset for the same reason. */
.reskin-body h2, .reskin-body h3 { color: var(--ink); border-left: 3px solid var(--red);
    padding-left: 10px; margin: 1.3em 0 .4em; text-transform: none; letter-spacing: 0; }
.reskin-body h2 { font-size: 17px; }
.reskin-body h3 { font-size: 15px; margin-left: 12px; border-left-color: #F0A0AE; }
.reskin-body h2:first-child, .reskin-body h3:first-child { margin-top: 0; }
.reskin-body ul, .reskin-body ol { margin: .5em 0; padding-left: 1.3em; }

/* What was deliberately NOT promoted. A run that reports only what it did is how the
   Belvidere misses stayed invisible behind a precision figure, so refusals are shown. */
.reskin-refused { font-size: 12px; color: var(--muted); margin-top: 10px; }
.reskin-refused li { margin: 2px 0; }

/* ── HELP POPOVER on the generate form ────────────────────────────────────────
   Replaces two paragraphs that sat under the form permanently. That is a lot of
   text to read on every visit for something you learn once, but it is also the
   only explanation of a button whose whole point is that people do not expect
   it, so it has to stay REACHABLE rather than just be deleted.
   ⚠️ Opens on hover, focus AND click. Hover alone does not exist on a touch
   screen and cannot be reached from a keyboard. */

.help-btn {
    width: 20px; height: 20px; flex: 0 0 20px; margin-bottom: 7px;
    border-radius: 50%; border: 1px solid var(--line); background: #fff;
    color: var(--muted); font: 600 12px/1 "Inter", sans-serif; font-style: italic;
    cursor: pointer; padding: 0; align-self: flex-end;
}
.help-btn:hover, .help-btn:focus-visible { border-color: var(--navy); color: var(--navy); }

/* Anchored to the button group and right-aligned, because the group sits at the
   end of the row and a left-aligned popover would run off the card. */
.help-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    width: min(460px, 78vw); padding: 14px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(16, 26, 53, .16);
    font-size: 12.5px; line-height: 1.55; color: var(--ink); text-align: left;
    white-space: normal;
}
.help-pop p { margin: 0 0 9px; }
.help-pop p:last-child { margin-bottom: 0; }
.help-pop strong { color: var(--navy); }

/* ⚠️ `.card` sets overflow:hidden so the navy header's square top corners are clipped to
   the card's radius. That also clips anything that must escape the card, which silently cut
   the help popover off mid-sentence. Scoped to the one card that needs it: overflow is
   released and the header is given its own matching corners, so nothing else changes. */
.card.allows-overflow { overflow: visible; }
.card.allows-overflow > .card-header {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

/* ── DECISION CARD ────────────────────────────────────────────────────────────
   The fallback copy buttons, folded away. Approving publishes directly, so these
   are for an unlinked profile or an API outage. Shut by default because "Copy
   plain text" was once the PRIMARY button here and it is the one output that
   cannot carry a heading or a link (AP-108). */
.fallback { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.fallback > summary {
    cursor: pointer; font-size: 13px; color: var(--muted); list-style: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.fallback > summary::-webkit-details-marker { display: none; }
.fallback > summary::before { content: "▸"; font-size: 11px; }
.fallback[open] > summary::before { content: "▾"; }
.fallback > summary:hover { color: var(--navy); }