/* ==========================================================================
   Qaamuuska-NLP — Structured Somali Lexical Explorer
   ========================================================================== */

:root {
    /* Colour, sampled from the reference design */
    --bg:            #F5F6F1;
    --ink:           #0E1118;
    --ink-block:     #181B20;
    --rule:          #DDDED9;
    --rule-soft:     #E7E8E3;
    --muted:         #6E7684;
    --faint:         #A3A8AF;
    --faint-2:       #B7BBC0;
    --paper:         #FBFCF8;
    --accent-soft:   #E9EAE4;

    /* Type */
    --serif: "Playfair Display", "Iowan Old Style", "Times New Roman", serif;
    --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    /* Rhythm */
    --gutter: clamp(22px, 3.9vw, 62px);
    --measure: 1600px;

    /*
     * The landing page has to fit one screen, so its vertical steps are sized
     * against viewport height as well as width — min() takes whichever is
     * tighter, and the page stays in proportion on a short laptop screen and a
     * tall monitor alike.
     */
    --masthead-h: clamp(60px, min(9.3vw, 12vh), 140px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

::selection { background: #DCE0D8; }

.shell {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
    border-bottom: 1px solid var(--rule);
}

.masthead__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: var(--masthead-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.wordmark {
    font-family: var(--serif);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.wordmark span { color: var(--faint-2); }

/* Segmented control */
.tabs {
    display: flex;
    border: 1px solid var(--rule);
    background: transparent;
}

.tabs__link {
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--faint);
    text-decoration: none;
    padding: 21px 29px;
    line-height: 1;
    transition: color 120ms ease;
    white-space: nowrap;
}

.tabs__link:hover { color: var(--muted); }

.tabs__link[aria-current="page"] {
    background: var(--ink-block);
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Hero — the home view
   -------------------------------------------------------------------------- */

/* padding-block only — the horizontal padding belongs to .shell */
.hero { padding-block: clamp(48px, 12vw, 168px) 0; }

.home-body { display: block; }

/*
 * The landing page occupies exactly one screen: #main fills the space the
 * masthead leaves and centres the stack, so the stats, browse row and note are
 * all visible without scrolling.
 */
body[data-view="home"] #main {
    /* the 1px is the masthead's bottom border */
    min-height: calc(100vh - var(--masthead-h) - 1px);
    min-height: calc(100dvh - var(--masthead-h) - 1px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(10px, 2.4vh, 38px);
}

/*
 * .shell carries margin:0 auto, and an auto cross-axis margin beats flex
 * stretch — without an explicit width the hero would centre itself.
 */
body[data-view="home"] #main > * { width: 100%; }

body[data-view="home"] .hero { padding-block: 0; }

/* No footer on the landing page — the note block closes it instead. */
body[data-view="home"] .foot { display: none; }
body[data-view="home"] .note { margin-bottom: 0; }

.hero__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(38px, min(8.8vw, 13.5vh), 138px);
    line-height: 0.98;
    letter-spacing: -0.022em;
    margin: 0;
    color: var(--ink);
}

.hero__subtitle {
    margin: clamp(14px, min(4.7vw, 4.6vh), 71px) 0 0;
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(18px, min(7.7vw, 7.4vh), 114px);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 14px;
}

.search__input {
    flex: 1;
    min-width: 0;
    appearance: none;
    border: 0;
    background: transparent;
    font-family: var(--serif);
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
    padding: 0;
}

.search__input:focus { outline: none; }

.search__input::placeholder {
    font-style: italic;
    color: var(--faint-2);
    opacity: 1;
}

.search__key {
    font-family: var(--serif);
    font-size: clamp(18px, 1.7vw, 25px);
    color: var(--faint-2);
    user-select: none;
    line-height: 1;
}

.search__key--clear {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: none;
    border: 0;
    color: var(--faint);
    cursor: pointer;
    padding: 4px 2px;
}

.search__key--clear:hover { color: var(--ink); }

.search__key--clear[hidden],
.search__key[hidden] { display: none; }

/*
 * The search zone is mounted once and never re-rendered. On the home view it
 * sits in the flow under the masthead; everywhere else it becomes the top bar
 * and sticks, so results scroll under a field that stays reachable.
 */
.search-zone { background: var(--bg); }

body:not([data-view="home"]) .search-zone {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-block: 20px 0;
    box-shadow: 0 14px 14px -14px rgba(14, 17, 24, 0.09);
}

body:not([data-view="home"]) .search {
    margin-top: 0;
    padding-bottom: 12px;
}

body:not([data-view="home"]) .search__input {
    font-size: clamp(20px, 1.9vw, 26px);
}

/* The hero title belongs to the home view only. */
#hero-head { display: none; }
body[data-view="home"] #hero-head { display: block; }

/* Match count, under the field. */
.search__status {
    margin: 12px 0 0;
    min-height: 17px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--faint);
    transition: opacity 120ms ease;
}

.search__status[data-busy="true"] { opacity: 0.55; }

body[data-view="home"] .search__status,
body[data-view="page"] .search__status { display: none; }

/* Keep the outgoing list visible while the next one loads. */
#content[data-loading="true"] { opacity: 0.45; }
#content { transition: opacity 120ms ease; }

/* --------------------------------------------------------------------------
   Statistics row
   -------------------------------------------------------------------------- */

.stats {
    display: flex;
    flex-wrap: wrap;
    margin: clamp(16px, min(5.8vw, 5.6vh), 84px) 0 0;
    padding: 0;
    list-style: none;
}

.stats__item {
    flex: 1 1 0;
    min-width: 150px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-left: clamp(16px, 2.4vw, 34px);
    border-left: 1px solid var(--rule);
}

.stats__item:first-child {
    padding-left: 0;
    border-left: 0;
}

.stats__value {
    font-family: var(--mono);
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stats__label {
    font-size: clamp(13px, 1.05vw, 16px);
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Browse row
   -------------------------------------------------------------------------- */

.rule {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: clamp(18px, min(5.6vw, 5.4vh), 78px) 0 0;
}

.browse {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin-top: clamp(14px, min(3.2vw, 3.1vh), 44px);
    font-size: clamp(14px, 1.15vw, 17px);
}

.browse__label { color: var(--muted); }

.browse__sep {
    color: var(--faint-2);
    padding: 0 2px;
}

.browse__link {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--faint-2);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 120ms ease;
}

.browse__link:hover { text-decoration-color: var(--ink); }

/* --------------------------------------------------------------------------
   Prototype note
   -------------------------------------------------------------------------- */

.note {
    margin: clamp(20px, min(8vw, 5.4vh), 112px) 0 clamp(64px, 9vw, 128px);
    padding: 4px 0 4px 26px;
    border-left: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: clamp(11px, 0.95vw, 13.5px);
    line-height: 1.85;
    color: var(--faint);
}

.note p { margin: 0; }

/* --------------------------------------------------------------------------
   Page scaffolding for the non-home views
   -------------------------------------------------------------------------- */

.page { padding-block: 8px 120px; }

.page__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 44px 0 0;
}

.page__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.08;
    letter-spacing: -0.018em;
    margin: 14px 0 0;
}

.page__count {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--faint);
    margin: 12px 0 0;
    font-variant-numeric: tabular-nums;
}

.backlink {
    display: inline-block;
    margin-top: 34px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-decoration: none;
}

.backlink:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Result list
   -------------------------------------------------------------------------- */

.results {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.results__item { border-bottom: 1px solid var(--rule-soft); }

/* Marks where headword matches end and definition-only matches begin. */
.results__divider {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 0 10px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.results__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.result {
    display: grid;
    grid-template-columns: minmax(190px, 22%) 1fr;
    gap: 8px 32px;
    padding: 20px 12px 20px 4px;
    text-decoration: none;
    color: inherit;
    transition: background 120ms ease;
}

.result:hover,
.result:focus-visible,
.results__item[data-active="true"] .result {
    background: var(--accent-soft);
    outline: none;
}

.result__headword {
    font-family: var(--serif);
    font-size: clamp(21px, 1.9vw, 27px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.result__headword sup {
    font-size: 0.5em;
    font-weight: 600;
    vertical-align: super;
    color: var(--faint);
    margin-left: 1px;
}

.result__body { min-width: 0; }

.result__meta {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--faint);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 6px;
}

.result__gloss {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result__gloss em {
    font-style: normal;
    color: var(--ink);
}

.result__redirect {
    display: block;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--faint);
}

.result__redirect b {
    font-weight: 500;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Entry detail
   -------------------------------------------------------------------------- */

.entry { margin-top: 40px; }

.entry__headword {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(44px, 6.4vw, 92px);
    line-height: 1.02;
    letter-spacing: -0.022em;
    margin: 0;
}

.entry__headword sup {
    font-size: 0.34em;
    vertical-align: super;
    color: var(--faint);
    margin-left: 3px;
}

.entry__grammar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 26px;
}

.chip {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--muted);
    border: 1px solid var(--rule);
    padding: 5px 11px;
    white-space: nowrap;
}

.chip--solid {
    background: var(--ink-block);
    border-color: var(--ink-block);
    color: #FFFFFF;
}

.chip--code {
    color: var(--faint);
    border-style: dashed;
}

.section {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--rule);
}

.section__heading {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 22px;
}

.senses {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: sense;
}

.sense {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 18px;
    padding: 0 0 22px;
    max-width: 780px;
}

.sense__number {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--faint);
    padding-top: 5px;
    font-variant-numeric: tabular-nums;
}

.sense__text {
    font-size: 18px;
    line-height: 1.68;
    color: var(--ink);
}

.sense__prefix {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05em;
    color: var(--ink);
    margin-right: 2px;
}

.sense__domain {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    border: 1px solid var(--rule);
    padding: 2px 7px;
    margin-left: 8px;
    vertical-align: 2px;
}

/* Definition-shaped grid used for the metadata table */
.facts {
    display: grid;
    grid-template-columns: minmax(170px, 200px) 1fr;
    gap: 12px 32px;
    margin: 0;
    max-width: 820px;
}

.facts dt {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    padding-top: 3px;
}

.facts dd {
    margin: 0;
    font-size: 16px;
    color: var(--ink);
}

.facts dd code {
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--muted);
}

/* Inline lists of linked headwords */
.wordlist {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
}

.wordlist a,
.wordlist span {
    display: inline-block;
    font-family: var(--serif);
    font-size: 18px;
    padding: 5px 13px;
    border: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    transition: border-color 120ms ease;
}

.wordlist a:hover { border-color: var(--ink); }

.wordlist span {
    color: var(--faint);
    background: transparent;
    border-style: dashed;
}

.wordlist sup {
    font-size: 0.55em;
    vertical-align: super;
    color: var(--faint);
}

/* Cross-reference callout */
.crossref {
    display: block;
    padding: 22px 26px;
    border: 1px solid var(--rule);
    background: var(--paper);
    text-decoration: none;
    color: inherit;
    max-width: 720px;
    transition: border-color 120ms ease;
}

.crossref:hover { border-color: var(--ink); }

.crossref__label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.crossref__word {
    display: block;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 500;
    margin-top: 8px;
    line-height: 1.15;
}

.crossref__word sup {
    font-size: 0.45em;
    vertical-align: super;
    color: var(--faint);
}

.crossref__gloss {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: var(--muted);
}

/* Source text panel */
.source {
    border: 1px solid var(--rule);
    background: var(--paper);
    max-width: 860px;
}

.source summary {
    cursor: pointer;
    padding: 14px 20px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    list-style: none;
}

.source summary::-webkit-details-marker { display: none; }

.source summary::before {
    content: "+";
    display: inline-block;
    width: 16px;
    color: var(--faint);
}

.source[open] summary::before { content: "\2212"; }

.source__body {
    padding: 4px 20px 20px 36px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Browse index
   -------------------------------------------------------------------------- */

/*
 * Hairlines are drawn by the cards themselves rather than by a gap over a
 * tinted background, so a partly filled last row leaves no stray block.
 */
.index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    border-top: 1px solid var(--rule-soft);
    border-left: 1px solid var(--rule-soft);
    margin-top: 34px;
}

.index-card {
    box-shadow: 1px 0 0 var(--rule-soft), 0 1px 0 var(--rule-soft);
    background: var(--bg);
    padding: 22px 24px;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    transition: background 120ms ease;
}

.index-card:hover { background: var(--accent-soft); }

.index-card__name {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 500;
}

.index-card__code {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--faint);
    margin-top: 4px;
    letter-spacing: 0.04em;
}

.index-card__count {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.letters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.letters a {
    font-family: var(--mono);
    font-size: 13px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule);
    text-decoration: none;
    color: var(--muted);
    transition: all 120ms ease;
}

.letters a:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pager {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--faint);
}

.pager button {
    font: inherit;
    background: none;
    border: 1px solid var(--rule);
    color: var(--muted);
    padding: 9px 18px;
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 120ms ease;
}

.pager button:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--ink);
}

.pager button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* --------------------------------------------------------------------------
   Empty / loading states
   -------------------------------------------------------------------------- */

.state {
    margin-top: 56px;
    max-width: 620px;
}

.state__title {
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 500;
    margin: 0;
}

.state__text {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.state__text code {
    font-family: var(--mono);
    font-size: 13.5px;
    background: var(--accent-soft);
    padding: 2px 6px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
    border-top: 1px solid var(--rule);
    padding: 30px 0 60px;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.9;
    color: var(--faint);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    justify-content: space-between;
}

.foot a {
    color: var(--faint);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.foot a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    /*
     * Redefine the token rather than overriding .masthead__inner's height:
     * the landing page's min-height calc subtracts --masthead-h, so the two
     * must never disagree.
     */
    :root { --masthead-h: clamp(56px, 9vh, 72px); }

    .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(12px, 2.2vh, 20px) 0;
    }

    /* Two per row, not four stacked — four rows will not fit a phone screen. */
    .stats__item { min-width: 0; }

    .stats__item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .result {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .facts { grid-template-columns: 1fr; gap: 4px 0; }
    .facts dd { margin-bottom: 14px; }
    .sense { grid-template-columns: 28px 1fr; gap: 12px; }
}

@media (max-width: 560px) {
    /* The wordmark and both tabs have to share a very narrow bar. */
    .masthead__inner { gap: 12px; }
    .wordmark { font-size: 20px; }
    .tabs__link {
        padding: 11px 12px;
        font-size: 10.5px;
        letter-spacing: 0.06em;
    }

    .note { padding-left: 18px; line-height: 1.7; }
}

/* Smallest phones: the wordmark and both tabs still have to share one row. */
@media (max-width: 400px) {
    :root { --gutter: 16px; }
    .masthead__inner { gap: 8px; }
    .wordmark { font-size: 17px; }

    .tabs__link {
        padding: 10px 9px;
        font-size: 9.5px;
        letter-spacing: 0.03em;
    }

    .entry__grammar { gap: 6px; }
    .sense { grid-template-columns: 24px 1fr; gap: 8px; }
    .pager { gap: 12px; flex-wrap: wrap; }
    .foot { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}