/* Clarisa style guide: tokens first, then components. Every page shares this
   file; see /style for each piece on one page. Colours are checked for
   contrast (WCAG AA) against the backgrounds they sit on. */

/* ---------------------------------------------------------------- Fonts --
   Self-hosted (SIL Open Font License, see fonts/LICENSE-*.txt), so no
   visitor data goes to a font service. Fraunces is only the "Clarisa"
   wordmark; headings are Source Serif 4; everything people read, type or
   compare (numbers included) is Figtree. */
@font-face {
    font-family: "Fraunces";
    src: url("/static/fonts/fraunces.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("/static/fonts/source-serif-4.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree-italic.woff2") format("woff2");
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------- Tokens -- */
:root {
    /* Colour */
    --navy: #1B2B4B;            /* headings, primary buttons, the brand */
    --navy-hover: #2A3F68;
    --text: #2B3345;            /* body text */
    --muted: #5C6474;           /* secondary text (5.2:1 or better on every surface) */
    --link: #2C4A86;
    --bg: #FBF8F3;              /* warm cream page */
    --surface: #FFFFFF;         /* cards */
    --sand: #F3EEE5;            /* quiet panels inside cards */
    --line: #E7E0D5;            /* dividers, card borders */
    --field-border: #8A93A6;    /* form fields (3:1 against white) */

    --honey-bg: #FBEFD3;  --honey-ink: #6A4708;  --honey-line: #E2B85A;  /* needs your answer */
    --sage-bg: #E4EEE6;   --sage-ink: #255238;   --sage-line: #8DB59A;   /* done, saved, yes */
    --blush-bg: #F8E6E3;  --blush-ink: #7A3333;  --blush-line: #DDA9A2;  /* problems */
    --info-bg: #E8EDF6;   --info-line: #9FB0D3;                          /* for your information */
    --chip-bg: #EEF0F5;
    --danger: #A4262C;
    --focus: #2C4A86;
    /* The pearl finish, used sparingly: the logo, a hero edge, the score ring */
    --pearl: linear-gradient(120deg, #F4E8F1 0%, #E5ECF8 35%, #F7F0E0 65%, #E3F1EC 100%);

    /* Type */
    --font-brand: "Fraunces", Georgia, serif;   /* the wordmark only */
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --text-xs: 0.8125rem;   /* 13px: fine print only */
    --text-sm: 0.875rem;    /* 14px: labels, meta lines */
    --text-md: 1.0625rem;   /* 17px: body */
    --text-lg: 1.3125rem;   /* 21px: card titles */
    --text-xl: 1.625rem;    /* 26px: section headings */
    --text-2xl: 2.0625rem;  /* 33px */
    --text-3xl: 2.5625rem;  /* 41px: page titles */

    /* Space (8px steps, with 4 and 12 for tight spots) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px;

    /* Shape */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(27, 43, 75, .05), 0 4px 16px rgba(27, 43, 75, .05);
    --shadow-lift: 0 2px 4px rgba(27, 43, 75, .07), 0 10px 28px rgba(27, 43, 75, .09);
    --page-width: 1040px;
}

/* ----------------------------------------------------------------- Base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.6;
}
h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--navy);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s-3);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--s-3); }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
b, strong { font-weight: 650; }
small, .muted { color: var(--muted); font-size: var(--text-sm); }
.num { font-variant-numeric: tabular-nums; }
pre {
    white-space: pre-wrap;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    background: var(--sand);
    border-radius: var(--radius-sm);
    padding: var(--s-3) var(--s-4);
    margin: var(--s-2) 0;
}
kbd { font-size: var(--text-xs); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; background: var(--surface); }

/* ---------------------------------------------------------- Site header -- */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.site-header .inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--s-2) var(--s-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-5);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-decoration: none;
    color: var(--navy);
    min-height: 48px;
}
.brand img { height: 40px; width: auto; display: block; }
.brand span {
    font-family: var(--font-brand);
    font-size: 1.625rem;
    font-weight: 560;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 48;
}
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.site-nav a {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.site-nav a:hover { color: var(--navy); text-decoration: underline; }

.container {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--s-5) var(--s-4) var(--s-8);
}

/* -------------------------------------------------------- Page heading -- */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4) var(--s-5);
    margin: var(--s-2) 0 var(--s-5);
}
.page-head h1 { margin: 0 0 var(--s-1); }
.page-head .meta { color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.page-head .actions { margin: 0; }

/* Jump links between the sections of a long page */
.section-nav {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    padding: 2px 2px var(--s-2);
    margin: 0 0 var(--s-4);
    scrollbar-width: thin;
}
.section-nav a {
    flex: none;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--navy);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.section-nav a:hover { border-color: var(--navy); }
.section-nav .count { color: var(--muted); font-weight: 400; margin-left: 4px; }

/* ---------------------------------------------------------------- Cards -- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--s-5);
    margin-bottom: var(--s-5);
    scroll-margin-top: var(--s-4);
}
.card > h2:first-child, .card-head h2 { margin-top: 0; }
.card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-1) var(--s-4);
    margin-bottom: var(--s-3);
}
.card-head h2 { margin: 0; }
.card-head .muted { margin: 0; }
.card .lead { color: var(--muted); margin-top: calc(-1 * var(--s-2)); }
.card > .lead:first-child { margin-top: 0; }

/* A card that asks something of the person */
.card.needs {
    background: linear-gradient(var(--honey-bg), var(--honey-bg)) padding-box;
    border: 1px solid var(--honey-line);
    box-shadow: none;
}
.card.needs > h2::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--honey-line);
    margin-right: 10px;
    vertical-align: middle;
    position: relative; top: -3px;
}
.card.needs .muted { color: var(--honey-ink); }
.card.needs .job { background: var(--surface); border-color: var(--honey-line); }

/* An item inside a card: a job, a school, a project */
.job {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-3);
    scroll-margin-top: var(--s-4);
}
.job:last-of-type { margin-bottom: 0; }
.job.review { border-color: var(--honey-line); box-shadow: inset 4px 0 0 var(--honey-line); }
.job .head {
    font-size: var(--text-lg);
    font-weight: 650;
    color: var(--navy);
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
}
.job .meta { color: var(--muted); font-size: var(--text-sm); margin-top: 2px; }
.job ul { margin: var(--s-3) 0 var(--s-2); padding-left: 1.25em; }
.job li { margin: 2px 0; }
.job li::marker { color: var(--muted); }
.job-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s-1) var(--s-4);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
}
.job-actions details[open] { flex-basis: 100%; }
.preview { font-size: var(--text-sm); color: var(--muted); margin: var(--s-2) 0; }
.question { font-weight: 650; color: var(--navy); margin: var(--s-3) 0 var(--s-1); }

/* Small numbers at a glance */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }
.stat { background: var(--sand); border-radius: var(--radius); padding: var(--s-3) var(--s-4); color: var(--muted); font-size: var(--text-sm); }
.stat b { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.2; }

/* Label / value rows (contact details, settings) */
.rows { margin: 0; }
.rows > div {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: var(--s-1) var(--s-4);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--line);
}
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows dt { color: var(--muted); font-size: var(--text-sm); font-weight: 600; padding-top: 2px; }
.rows dd { margin: 0; min-width: 0; }

/* -------------------------------------------------------------- Buttons --
   Primary: the one main action in a place. Secondary: an equal alternative.
   Quiet (.link): small actions that sit in text. Danger: removing things. */
button, a.button, .button {
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--navy);
    background: var(--navy);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
button:hover, a.button:hover, .button:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }
button.secondary-plain, a.button.secondary, .button.secondary {
    background: var(--surface);
    color: var(--navy);
    border-color: var(--navy);
}
button.secondary-plain:hover, a.button.secondary:hover, .button.secondary:hover { background: var(--chip-bg); color: var(--navy); }
button.secondary {   /* the outlined "remove" style */
    background: var(--surface);
    color: var(--danger);
    border-color: var(--blush-line);
}
button.secondary:hover { background: var(--blush-bg); color: var(--danger); border-color: var(--danger); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger:hover { background: #87191F; border-color: #87191F; }
button.link {
    background: none;
    border: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    color: var(--link);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
button.link:hover { background: none; color: var(--navy); }
button.link.danger { color: var(--danger); background: none; }
button.small, a.button.small { min-height: 36px; padding: 6px 14px; font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3); }

/* ---------------------------------------------------------------- Forms -- */
form { margin: 0; }
form.edit, form.inline-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3) var(--s-4);
    margin-top: var(--s-3);
}
form.edit.desc, form.occ-form, form.review { display: block; }
form.edit.desc button, form.occ-form button { margin-top: var(--s-3); }
form.inline, form.chip-x, form.remove { display: inline; }
label {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
}
label.inline { flex-direction: row; align-items: center; gap: var(--s-2); font-weight: 400; font-size: var(--text-md); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search],
input[type=password], input[type=url], select, textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    min-height: 44px;
    max-width: 100%;
}
input[type=text], input[type=tel], form.edit input[type=email] { width: 300px; }
input[type=number] { width: 120px; font-variant-numeric: tabular-nums; }
input[type=search], form.desc textarea, label textarea { width: 100%; }
textarea { line-height: 1.5; }
select { padding-right: 32px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input::placeholder, textarea::placeholder { color: #7A8293; }
input[type=radio], input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--navy); margin: 0; }
input[type=file] { font: inherit; font-size: var(--text-sm); }
fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-4) var(--s-3);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
}
legend { font-size: var(--text-sm); font-weight: 600; padding: 0 var(--s-1); }
.pair { display: flex; gap: var(--s-2); align-items: center; }
form.inline-add input[type=text] { flex: 1 1 240px; }
input.note { flex: 1; min-width: 200px; }

/* ---------------------------------------------------- Show more / Edit --
   <details> used for "Edit", "Change", "Add a job": a quiet link that opens
   a panel underneath. */
details > summary {
    cursor: pointer;
    color: var(--link);
    font-size: var(--text-sm);
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s;
    margin-right: 2px;
}
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { color: var(--navy); text-decoration: underline; }
details[open] > :not(summary) { margin-top: var(--s-2); }
details.add {
    margin-top: var(--s-4);
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
}
details.add > summary { font-size: var(--text-md); }
details.add[open] { border-style: solid; background: var(--sand); }
details.remove-ask { display: inline-block; }
details.remove-ask > summary { color: var(--danger); }
details.remove-ask > summary::before { display: none; }
details.remove-ask[open] {
    display: block;
    background: var(--blush-bg);
    border-radius: var(--radius-sm);
    padding: var(--s-2) var(--s-3);
}
details.remove-ask form.remove span { margin-right: var(--s-2); color: var(--blush-ink); font-size: var(--text-sm); }

/* ---------------------------------------------------------------- Chips -- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--chip-bg);
    color: var(--navy);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: var(--text-sm);
    line-height: 1.4;
}
.chip-x button, .chip-q {
    background: none;
    border: 0;
    min-height: 0;
    padding: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
}
.chip-q { border: 1px solid var(--field-border); width: 18px; height: 18px; font-size: 11px; margin-left: 6px; }
.chip-q:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip-x button:hover { background: var(--blush-bg); color: var(--danger); }

/* --------------------------------------------------------------- Badges -- */
.badge {
    display: inline-block;
    background: var(--honey-bg);
    color: var(--honey-ink);
    border-radius: var(--radius-pill);
    padding: 1px 10px;
    font-size: var(--text-xs);
    font-weight: 650;
    font-family: var(--font-body);
    letter-spacing: 0.01em;
    vertical-align: middle;
}
.badge.mine, .badge.kind-update { background: var(--info-bg); color: var(--navy); }
.badge.kind-add, .badge.good { background: var(--sage-bg); color: var(--sage-ink); }
.badge.kind-restore { background: var(--sand); color: var(--muted); }

/* -------------------------------------------------------------- Notices -- */
.notice {
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
    border: 1px solid transparent;
}
.notice.ok { background: var(--sage-bg); color: var(--sage-ink); border-color: var(--sage-line); }
.notice.err { background: var(--blush-bg); color: var(--blush-ink); border-color: var(--blush-line); }
.notice.warn { background: var(--honey-bg); color: var(--honey-ink); border-color: var(--honey-line); }
.notice a { color: inherit; font-weight: 650; }

/* Side notes inside a job: "shown as one job", "add what you did" */
.same-job-note, .add-what, .placement {
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    margin: var(--s-3) 0;
    font-size: var(--text-md);
}
.same-job-note { background: var(--info-bg); color: var(--navy); border: 1px solid var(--info-line); }
.add-what { background: var(--honey-bg); border: 1px solid var(--honey-line); }
.add-what .muted { color: var(--honey-ink); }
.add-what p:last-child { margin-bottom: 0; }
.add-what .typical ul { margin: var(--s-1) 0 0 1.2em; padding: 0; }
.placement { background: var(--sand); margin-left: var(--s-4); }
.occ-line { font-size: var(--text-sm); color: var(--muted); margin: 2px 0 0; }
.occ-line i { font-style: normal; }

/* -------------------------------------------- Choosing an occupation -- */
.occ-confirm { margin: var(--s-2) 0; }
.occ-guess { margin-bottom: var(--s-3); }
.occ-confirm .actions { margin: var(--s-3) 0 var(--s-2); }
.duties { display: block; font-size: var(--text-sm); color: var(--text); margin: 2px 0; }
.examples { font-size: var(--text-sm); color: var(--muted); }
.occ-guess .examples { display: block; }
label.occ {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--s-2);
    cursor: pointer;
    font-weight: 400;
    font-size: var(--text-md);
    background: var(--surface);
}
label.occ:hover { border-color: var(--field-border); }
label.occ:has(input:checked) { border-color: var(--navy); background: var(--info-bg); }
label.occ input { margin-top: 4px; }
.occ-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.occ-head { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
form.occ-form .occ-search { margin: var(--s-2) 0; }
.role-label { margin: var(--s-3) 0 var(--s-1); }
.suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-3);
    padding: var(--s-2) 0;
    border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------- Tables -- */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
td.words del { background: var(--blush-bg); color: var(--blush-ink); }
td.words ins { background: var(--sage-bg); color: var(--sage-ink); text-decoration: none; }
table.diff td:first-child { color: var(--muted); white-space: nowrap; width: 1%; }

/* ------------------------------------------------- Review list (imports) -- */
label.change {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    font-weight: 400;
    font-size: var(--text-md);
    cursor: pointer;
}
label.change:last-child { border-bottom: 0; }
label.change input { margin-top: 4px; }
.change .what { display: flex; flex-direction: column; gap: var(--s-1); flex: 1; min-width: 0; }
.change .note { color: var(--honey-ink); font-size: var(--text-sm); }

/* --------------------------------------------------- Progress and tabs -- */
.progress { height: 8px; background: var(--chip-bg); border-radius: var(--radius-pill); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--navy); border-radius: var(--radius-pill); }
.tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tabs a {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--navy);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
}
.tabs a.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* --------------------------------------------------------------- Dialog -- */
dialog {
    max-width: 480px;
    width: calc(100% - 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: var(--s-5);
    color: var(--text);
}
dialog::backdrop { background: rgba(27, 43, 75, .35); }
#skill-dialog h3 { margin: 0 32px var(--s-2) 0; text-transform: capitalize; }
#skill-dialog .dialog-close { position: absolute; top: 10px; right: 12px; margin: 0; }
#skill-dialog .dialog-close button {
    background: none; border: 0; color: var(--muted);
    font-size: 22px; min-height: 0; width: 36px; height: 36px; padding: 0; border-radius: 50%;
}
#skill-dialog .dialog-close button:hover { background: var(--chip-bg); color: var(--navy); }
#skill-dialog .related { border-left: 3px solid var(--line); padding: 2px var(--s-3); margin: var(--s-2) 0; }
#skill-dialog .related p { margin: var(--s-1) 0; font-size: var(--text-sm); }
#skill-dialog .dialog-actions { margin-top: var(--s-4); }

/* ------------------------------------------------------ Page sections --
   Pieces the profile introduced; any page can use them. */
.count {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 7px;
    margin-left: 6px;
    border-radius: var(--radius-pill);
    background: var(--chip-bg);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 650;
    text-align: center;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.section-nav .count { background: none; padding: 0; min-width: 0; margin-left: 6px; color: var(--muted); font-weight: 400; }
.card.needs .count { background: var(--honey-line); color: #3D2903; }
.card.needs .lead { color: var(--honey-ink); }
/* One question inside "Needs your answer" */
.ask {
    background: var(--surface);
    border: 1px solid var(--honey-line);
    border-radius: var(--radius);
    padding: var(--s-4) var(--s-5);
    margin-top: var(--s-3);
    scroll-margin-top: var(--s-4);
}
.ask h3 { font-size: var(--text-lg); margin-bottom: var(--s-1); }
.card.needs .ask .muted { color: var(--muted); }
.ask .not-mine { margin-top: var(--s-3); }
/* A quiet block inside a card: suggestions, extra lists */
.panel {
    background: var(--sand);
    border-radius: var(--radius);
    padding: var(--s-4) var(--s-5);
    margin-top: var(--s-4);
}
.panel h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 650; margin-bottom: var(--s-1); }
.panel .suggestion:first-of-type { border-top: 0; }
.suggestion .choice { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-3); }
h3.sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--muted);
    margin: var(--s-4) 0 var(--s-2);
}
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--s-5); }
.two-col h3.sub { margin-top: 0; }
.job .wording { margin: 0 0 var(--s-2); }
.job-skills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.job-skills .chip { background: var(--sand); font-size: var(--text-xs); padding: 2px 10px; }
.job-actions > a { font-size: var(--text-sm); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.ws-ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-3) 0 0; }
label.wide, p.wide { flex-basis: 100%; }
.small-link { font-size: var(--text-sm); font-weight: 600; }
.card.quiet { background: transparent; box-shadow: none; border-style: dashed; }
.card.quiet details + details { margin-top: var(--s-2); }

/* ------------------------------------------------------------- Matches -- */
/* Score ring: the ring fills to the score, the number sits inside, so the
   score never depends on colour alone */
.score {
    --size: 64px;
    flex: 0 0 var(--size);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--navy) calc(var(--score) * 1%), var(--chip-bg) 0);
    display: grid;
    place-items: center;
}
.score span {
    width: calc(var(--size) - 12px);
    height: calc(var(--size) - 12px);
    border-radius: 50%;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.card.match { display: flex; gap: var(--s-5); align-items: flex-start; }
.match-body { flex: 1; min-width: 0; }
.match-body h2 { font-size: var(--text-lg); margin: 0 0 2px; }
.match-body h2 a { color: var(--navy); text-decoration-thickness: 1px; }
.match-body .meta { color: var(--muted); font-size: var(--text-sm); }
.facts {
    list-style: none;
    padding: 0;
    margin: var(--s-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}
.facts li { background: var(--sand); border-radius: var(--radius); padding: 3px 12px; font-size: var(--text-sm); }
.also-in { font-size: var(--text-sm); color: var(--muted); margin: var(--s-2) 0 0; }
.why-list { margin: 0 0 var(--s-2); padding-left: 1.4em; }
.why-list li { margin: 3px 0; padding-left: 4px; }
.why-list.good li::marker { content: "+"; color: var(--sage-ink); font-weight: 700; }
.why-list.gap li::marker { content: "–"; color: var(--danger); font-weight: 700; }
.training { margin: var(--s-2) 0 0; padding-left: 1.2em; font-size: var(--text-sm); }
.training li { margin: var(--s-1) 0; }
.job-notes { font-size: var(--text-sm); color: var(--honey-ink); background: var(--honey-bg); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0 0; }
.match-actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* What the person's limits hid */
.hidden-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-4);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--line);
}
.hidden-row:first-of-type { border-top: 0; padding-top: 0; }
.hidden-row .count-big { min-width: 72px; font-size: var(--text-lg); font-weight: 700; color: var(--navy); }
.hidden-row .why { flex: 1 1 260px; }

/* ---------------------------------------------------------- Task pages --
   One job at a time (polish, pick skills, a resume for a job): a narrower
   column so lines stay easy to read. */
.task { max-width: 760px; margin: 0 auto; }
.task.wide { max-width: var(--page-width); }
h1.card-title { font-size: var(--text-2xl); margin-bottom: var(--s-2); }
.steps { color: var(--muted); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--s-1); }
form.stack { display: block; }
form.stack > label:not(.inline):not(.duty):not(.pill) { margin: var(--s-4) 0 var(--s-1); }
form.stack > label:first-child, form.stack > input[type=hidden]:first-child + label { margin-top: 0; }
form.stack input[type=text], form.stack textarea { width: 100%; }
form.stack input.strong { font-weight: 650; }
form.stack + form.stack { margin-top: var(--s-2); }
form.stack .actions { margin-top: var(--s-5); margin-bottom: 0; }
.quiet-actions { gap: var(--s-5); }
/* "What's sent to the AI service": said plainly before anything is sent */
.ai-note {
    background: var(--info-bg);
    border: 1px solid var(--info-line);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    font-size: var(--text-sm);
    margin: var(--s-3) 0 var(--s-4);
}
/* "Check this": something Clarisa added that the person should confirm */
.check-note {
    color: var(--honey-ink);
    background: var(--honey-bg);
    border-radius: var(--radius-sm);
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-sm);
    margin: var(--s-2) 0;
}
.your-lines { padding-left: 1.4em; margin: var(--s-2) 0 var(--s-4); }
.your-lines li { margin: var(--s-1) 0; }
.side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.side-by-side > div:first-child { color: var(--muted); }
.bullet-edit { margin-bottom: var(--s-4); }
.bullet-edit textarea { width: 100%; margin: var(--s-1) 0; field-sizing: content; min-height: 3.5em; }
/* Tick-a-pill choices (which skills fit this line) */
.ws-line { border-top: 1px solid var(--line); padding: var(--s-4) 0; }
.ws-line:first-of-type { border-top: 0; padding-top: 0; }
.said { margin-bottom: var(--s-3); }
.said q { quotes: "“" "”"; font-style: italic; }
.pick-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
label.pill {
    flex-direction: row;
    align-items: center;
    gap: var(--s-2);
    padding: 7px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    min-height: 40px;
}
label.pill:hover { border-color: var(--field-border); }
label.pill:has(input:checked) { border-color: var(--navy); background: var(--info-bg); }
label.pill.have { color: var(--muted); cursor: default; background: var(--sand); border-color: var(--sand); }
label.pill.none { border-style: dashed; }
/* Choosing one kind of work: same look as the occupation choices */
label.duty {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--s-2);
    cursor: pointer;
    font-weight: 400;
    font-size: var(--text-md);
    background: var(--surface);
}
label.duty:hover { border-color: var(--field-border); }
label.duty:has(input:checked) { border-color: var(--navy); background: var(--info-bg); }
label.duty input { margin-top: 4px; }
.pick { background: var(--sand); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin: var(--s-3) 0 var(--s-4); }
.pick .name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--navy); line-height: 1.25; }
.pick ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.pick .examples { margin-top: var(--s-2); }
details.not-quite { margin-top: var(--s-5); }
details.not-quite form, .not-quite > form { margin-top: var(--s-3); }
.not-quite .occ-search { width: 100%; margin-bottom: var(--s-3); }

/* ------------------------------------------------------ Upload, lists -- */
label.drop {
    flex: 1 1 320px;
    border: 1.5px dashed var(--field-border);
    border-radius: var(--radius);
    background: var(--sand);
    padding: var(--s-4);
}
label.drop .muted, label .muted { font-weight: 400; }
input[type=file]::file-selector-button {
    font: inherit;
    font-weight: 650;
    margin-right: var(--s-3);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--navy);
    background: var(--surface);
    color: var(--navy);
    cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--chip-bg); }
.table-wrap { overflow-x: auto; }
table.list { font-size: var(--text-md); }
table.list th { font-size: var(--text-sm); }
table.list tbody tr:hover, table.list tr:hover td { background: var(--sand); }
table.list td a { font-weight: 600; }
/* Buttons that stay in reach at the bottom of a long form */
.action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -6px 20px rgba(27, 43, 75, .08);
    padding: var(--s-3) var(--s-5);
    margin-top: var(--s-5);
}
label.change .badge { align-self: flex-start; }

/* --------------------------------------------------------- Signing in -- */
.task.narrow { max-width: 480px; }
.card form + p.muted { margin: var(--s-4) 0 0; }
.danger-zone { border-color: var(--blush-line); }
.danger-zone h2 { color: var(--blush-ink); }
.or { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); margin: 0 0 var(--s-5); font-size: var(--text-sm); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.found { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); background: var(--sage-bg); color: var(--sage-ink);
         border-radius: var(--radius); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.found b { font-size: var(--text-lg); }
form.stack label.drop { margin: 0; }
.center { text-align: center; }
.password-field { display: flex; gap: var(--s-2); align-items: center; }
.password-field input { flex: 1; min-width: 0; }
.password-field .show-password { padding: 0 var(--s-2); min-height: 44px; }
form.stack input[type=email], form.stack input[type=password] { width: 100%; }
.site-nav .button.small { color: #fff; min-height: 36px; }
.site-nav .button.small:hover { text-decoration: none; }
button.nav-button {
    background: none; border: 0; padding: 0; min-height: 44px; border-radius: 0;
    color: var(--muted); font-size: var(--text-sm); font-weight: 600;
}
button.nav-button:hover { background: none; color: var(--navy); text-decoration: underline; }

/* ------------------------------------------------------------ Homepage -- */
.hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-7);
    align-items: center;
    padding: var(--s-6) 0 var(--s-7);
}
.eyebrow { color: var(--link); font-weight: 650; font-size: var(--text-sm); margin-bottom: var(--s-2); }
.hero h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.1; margin-bottom: var(--s-4); }
.hero-lead { font-size: var(--text-lg); line-height: 1.5; color: var(--text); }
.hero .actions { margin: var(--s-5) 0 var(--s-3); }
.hero-example { margin: 0; }
.hero-example .card { margin-bottom: var(--s-2); box-shadow: var(--shadow-lift); }
.hero-example figcaption { text-align: center; }
.home-section { padding: var(--s-6) 0; }
.home-section > h2 { font-size: var(--text-2xl); margin-bottom: var(--s-5); }
.steps-list { list-style: none; counter-reset: step; padding: 0; margin: 0;
              display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.steps-list li { counter-increment: step; }
.steps-list li::before {
    content: counter(step);
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--navy); color: #fff; font-weight: 700;
    margin-bottom: var(--s-3);
}
.steps-list h3, .feature h3 { font-size: var(--text-lg); margin-bottom: var(--s-2); }
.steps-list p, .feature p { color: var(--text); margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); }
.feature-grid .card { margin: 0; }
.pledge-list { list-style: none; padding: 0; margin: 0; display: grid;
               grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-6); }
.pledge-list li { padding-left: var(--s-5); position: relative; }
.pledge-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px;
                          border-radius: 50%; background: var(--pearl); border: 1.5px solid var(--sage-line); }
.pledge-list b { color: var(--navy); }
.home-cta { text-align: center; padding: var(--s-7) var(--s-5); margin-top: var(--s-6); }
.home-cta h2 { max-width: 640px; margin: 0 auto var(--s-5); font-size: var(--text-2xl); }
.home-cta .actions { justify-content: center; margin: 0; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5);
               color: var(--muted); font-size: var(--text-sm); padding: var(--s-6) 0 0; border-top: 1px solid var(--line);
               margin-top: var(--s-7); }
@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; gap: var(--s-5); padding-top: var(--s-3); }
    .pledge-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- About page -- */
.about-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin: var(--s-4) 0 var(--s-5); }
.about-head img { width: 160px; height: 160px; object-fit: cover; object-position: top; border-radius: 50%;
                  border: 4px solid var(--surface); box-shadow: var(--shadow-lift); }
.about-head h1 { margin-bottom: var(--s-2); }
.about-head .lead { font-size: var(--text-lg); color: var(--text); margin: 0; }
.about-text h2 { font-size: var(--text-xl); margin-top: var(--s-5); }
.about-text ul { padding-left: 1.2em; }
.about-text li { margin: var(--s-1) 0; }
/* The signature writes itself. The "Clarisa" letters (traced from the Great
   Vibes script font, SIL OFL) are uncovered by a pen: thick strokes along the
   middle of each letter, walked like a pen: straight on through crossings,
   one stroke after another at a steady speed (the times are in the SVG). */
.signature { margin-top: var(--s-5); max-width: 300px; }
.signature svg { width: 100%; height: auto; display: block; }
.sig-ink { fill: var(--navy); }
.sig-pen path {
    fill: none; stroke: #fff; stroke-width: 115; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1 1; stroke-dashoffset: 1;
    animation-name: sig-draw; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
/* Once it's written, a pearl sheen (the logo's colours) glides across the ink once */
.sig-sheen { mix-blend-mode: screen; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .sig-pen path { animation: none; stroke-dashoffset: 0; }
    .sig-sheen { display: none; }
}

.still-job { margin-bottom: var(--s-3); }
.still-job > legend { font-weight: 650; color: var(--navy); font-size: var(--text-md); }

.found-jobs { list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.found-jobs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3);
                 padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.found-jobs li:first-child { border-top: 0; }
.check-found form.actions { margin: var(--s-3) 0 0; }

/* Duty suggestions under "What did you do?" */
.duty-suggest {
    flex-basis: 100%;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    box-shadow: var(--shadow); padding: var(--s-2); margin-top: var(--s-1);
    display: flex; flex-direction: column; gap: 2px;
}
.duty-suggest[hidden] { display: none; }
.duty-suggest p { margin: 0 var(--s-2) var(--s-1); }
button.duty-pick {
    background: none; border: 0; border-radius: var(--radius-sm); color: var(--text);
    font-weight: 400; font-size: var(--text-sm); text-align: left; justify-content: flex-start;
    min-height: 40px; padding: 6px var(--s-3); line-height: 1.4;
}
button.duty-pick:hover, button.duty-pick:focus-visible { background: var(--info-bg); color: var(--navy); }

.keyword-search { margin: 0 0 var(--s-5); }
.keyword-search label { margin-bottom: var(--s-1); }
.keyword-search .pair { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.keyword-search input[type=search] { flex: 1 1 260px; width: auto; }
.keyword-search p { margin: var(--s-2) 0 0; }

/* The beta: a small tag by the wordmark, the terms, the agree box */
.site-header .inner > .beta-tag { margin-right: auto; margin-left: calc(-1 * var(--s-3)); }
.beta-tag {
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--navy); background: var(--pearl); border: 1px solid var(--info-line);
    border-radius: var(--radius-pill); padding: 2px 9px; text-decoration: none;
}
.beta-terms h3 { font-size: var(--text-lg); margin: var(--s-5) 0 var(--s-2); }
.beta-terms ul { padding-left: 1.2em; }
.beta-terms li { margin: var(--s-1) 0; }
label.beta-agree { align-items: flex-start; font-size: var(--text-sm); margin: var(--s-4) 0 0; background: var(--sand);
                   border-radius: var(--radius-sm); padding: var(--s-3); }
label.beta-agree input { margin-top: 3px; flex: none; }

/* A saved message that floats in at the bottom, then steps aside */
.toast {
    position: fixed;
    left: 50%;
    bottom: var(--s-5);
    transform: translateX(-50%);
    z-index: 10;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0;
    box-shadow: var(--shadow-lift);
    animation: toast 7s ease forwards;
}
@keyframes toast {
    0% { opacity: 0; transform: translate(-50%, 12px); }
    5%, 85% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 12px); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; position: static; transform: none; width: auto; max-width: none; margin-bottom: var(--s-4); }
}

/* ---------------------------------------------------------- Pearl touch -- */
.pearl-edge { position: relative; overflow: hidden; }
.pearl-edge::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--pearl);
}

/* ----------------------------------------------------------- Phone size -- */
@media (max-width: 640px) {
    :root { --text-3xl: 2.0625rem; --text-xl: 1.4375rem; }
    .container { padding-top: var(--s-4); }
    .card { padding: var(--s-4); border-radius: var(--radius); }
    .job { padding: var(--s-3) var(--s-4); }
    .rows > div { grid-template-columns: 1fr; }
    .brand img { height: 34px; }
    .brand span { font-size: 1.375rem; }
    input[type=text] { width: 100%; }
    form.edit > label { flex: 1 1 100%; }
    .page-head .actions { width: 100%; }
    .card.match { flex-direction: column; gap: var(--s-2); }
    .side-by-side { grid-template-columns: 1fr; gap: var(--s-3); }
    h1.card-title { font-size: var(--text-xl); }
    .score { --size: 52px; }
    .score span { font-size: var(--text-md); }
}