/* Shared by index.html (the viewer) and editor.html; each adds its own layout rules in its <style> block.

   Both pages keep to a few values. Text is 16px, or 13px for labels and hints, or 12px for the small buttons and the
   status in the corner (the About dialog 14px); #222, with #555 for labels and #777 for quieter text. Lines are #ccc, the card's #e4e4e4.
   Controls have a 4px radius. What is selected is blue, #1a5fb4 on #dbe8f8. */

/* Noto Serif Tangut, cut down to the Tangut ranges (fonts/NotoSerifTangut.woff2,
   see CONTRIBUTING), for the characters that no installed font has. It comes
   last, so a browser downloads it only then: when no Tangut font is installed,
   or when Firefox, with tracking protection set to strict, hides the fonts the
   user installed and finds only an older Noto Serif Tangut that lacks
   U+18AF3–18AFF (𘫼). Chrome loads no font file into a page opened from disk. */
@font-face {
    font-family: "Noto Serif Tangut Web";
    src: url("fonts/NotoSerifTangut.woff2") format("woff2");
    unicode-range: U+17000-187FF, U+18800-18AFF, U+18D00-18D7F;
}

body {
    /* Browsers rarely find a Tangut font on their own, so name the common ones
       (fonts.js asks for one to be installed if neither is there nor the web
       font loads). Tangut GlyphWiki (fonts/TangutGlyphWiki.css) has the
       characters of Unicode 17 and 18, which the others lack. */
    font-family: Arial, "Tangut Yinchuan", "Noto Serif Tangut", "Tangut GlyphWiki", "Noto Serif Tangut Web", sans-serif;
    color: #222;
    margin: 0;
}

input,
textarea,
button {
    font-family: inherit;
}

#app {
    display: flex;
    height: 100vh;
}

#search-mode {
    width: 25%;
    overflow-y: auto;
    padding: 2px;
    box-sizing: border-box;
}

/* Beside the buttons of its pop-ups in #search-row. */
#search-input {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 16px; /* the components typed, large enough to tell apart */
}

/* The search box with the buttons of its pop-ups. */
#search-row {
    display: flex;
    gap: 3px;
}

#search-row button {
    flex: none;
    width: 30px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #555;
    font-size: 17px;
    cursor: pointer;
}

#search-row button:hover,
#search-row button.pressed {
    background-color: #dbe8f8;
}

/* A pop-up under the search box or the grid (TangutStore.popup places it). */
.popup {
    position: fixed;
    z-index: 1000;
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* The tips of the search box, wider than the box. */
#help-popup {
    min-width: min(440px, 100vw - 8px);
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
}

#help-popup ul {
    margin: 0;
    padding-left: 18px;
}

#search-input::placeholder {
    font-size: 13px;
}

/* The focus ring of both pages; buttons show it only when reached by the keyboard. */
#search-input:focus,
.shape-input:focus:not(.invalid),
.results li:focus,
button:focus-visible {
    outline: 2px solid #1a5fb4;
    outline-offset: -2px;
}

.result-count {
    margin: 4px 5px;
    color: #555;
}

/* The results as tiles of their glyphs (store.js, resultItem); ≈ marks a
   match by a look-alike, a dot in the editor a character still to check. */
.results {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0 2px;
    list-style: none;
}

.results li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid transparent; /* the glyphs alone, the selection framed */
    border-radius: 4px;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    content-visibility: auto; /* tiles out of view are not drawn */
    contain-intrinsic-size: 44px 44px;
}

.results li:hover {
    background-color: #f0f0f0;
}

.results li.selected {
    border-color: #1a5fb4;
    background-color: #dbe8f8;
}

.results li.lookalike::after {
    content: "≈";
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 11px;
    color: #1a5fb4;
}

.results li.unsure::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #e0a000;
}

#content-area {
    flex: 1 1 0;
    min-width: 0; /* long rows wrap instead of squeezing the lists */
    display: flex;
    flex-direction: column;
    padding: 2px;
    overflow-y: auto;
    box-sizing: border-box;
}

.button {
    padding: 1px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.button:hover:not(:disabled) {
    background-color: #f0f0f0;
}

/* The open character, on white. */
#display-mode {
    position: relative;
    padding: 2px 8px 8px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    background-color: #fff;
}

/* The open character: the glyph, the grid of its parts and its fields side
   by side, wrapping on narrow windows. */
#item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 20px;
    margin: 6px 0 14px;
}

/* As high as the grid beside it. */
#item-title {
    display: flex;
    align-items: center;
    height: 200px;
    margin: 0;
    font-size: 180px;
    font-weight: normal; /* Tangut fonts have no bold */
    line-height: 1;
}

.close-button {
    position: absolute; /* in the corner, so it takes no room from the row */
    top: 2px;
    right: 2px;
    font-size: 1.2em;
    cursor: pointer;
    color: #777;
    border: none;
    background: none;
}

.close-button:hover {
    color: #222;
}

/* The character's Unicode data: rows of <div><dt>…</dt><dd>…</dd></div>. */
.details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 10px;
    margin: 8px 0;
}

.details > div:not([hidden]) {
    display: contents;
}

.details dt {
    color: #777;
    font-size: 13px;
}

.details dd {
    margin: 0;
}

/* The grid of the open character, square like the glyph beside it. */
#shape-display {
    width: 200px;
    height: 200px;
}

/* Drawn like the shape icons: one outline, every line 1px, each component
   as large as its cell. */
#shape-display .shape-template {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 0 solid #222;
    border-width: 1px 0 0 1px;
}

#shape-display .shape-cell {
    container-type: size;
    box-sizing: border-box;
    border-width: 0 1px 1px 0;
}

#shape-display .shape-input {
    font-size: min(100cqw, 100cqh, 120px);
    line-height: 1;
}

.shape-template {
    display: grid;
}

.shape-cell {
    display: flex;
    width: 100%;
    height: 100%;
    border: 1px solid #222;
}

.shape-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    font: inherit;
    background-color: #fff;
    text-align: center;
}

/* A cell or an IDS that is not what it should be (editor.js). */
.invalid {
    background-color: #fde2e2;
    outline: 2px solid #c62828;
}

/* The shape buttons, grouped by series: the series letter, then its shapes. */
.shape-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.shape-group {
    display: flex;
    gap: 3px;
}

.shape-group-label {
    align-self: center;
    min-width: 0.8em;
    font-size: 18px;
    font-weight: bold;
    color: #555;
}

.shape-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 4px 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #222;
    font-size: 13px;
    cursor: pointer;
}

.shape-button:hover {
    background-color: #f0f0f0;
}

.shape-button[aria-pressed="true"] {
    border-color: #1a5fb4;
    background-color: #dbe8f8;
    color: #1a5fb4;
    font-weight: bold;
}

/* The outline of a shape (shapes.js, icon): each cell draws the lines on its
   right and below, the outline those on the left and on top, so every line
   is 1px. */
.shape-icon {
    display: grid;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 0 solid;
    border-width: 1px 0 0 1px;
}

.shape-icon .shape-cell {
    box-sizing: border-box;
    border-width: 0 1px 1px 0;
    border-color: currentColor;
}

.shape-icon.dashed,
.shape-icon.dashed .shape-cell {
    border-style: dashed;
}

/* The readings of the open character, one to a line: the main one, then
   the alternatives. */
#readings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.reading {
    display: inline-flex;
}

.reading-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #222;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.reading-button .shape-icon {
    width: 18px;
    height: 18px;
}

.reading-button:hover {
    background-color: #f0f0f0;
}

.reading-button[aria-pressed="true"] {
    border-color: #1a5fb4;
    background-color: #dbe8f8;
    color: #1a5fb4;
}

.reading-parts {
    font-size: 18px;
}

/* A generated reading that the editor rejected. */
.reading.rejected .reading-parts {
    text-decoration: line-through;
    color: #777;
}

/* The tips, while no character is open. */
#start-tips {
    max-width: 720px;
    padding: 4px 12px 24px; /* the last line clear of the corner */
    line-height: 1.4;
}

#start-tips h3 {
    margin: 4px 0;
    font-size: 1em;
}

#start-tips ul {
    margin: 4px 0;
    padding-left: 20px;
}

.search-option {
    display: flex; /* a long label wraps beside its box, not under it */
    align-items: baseline;
    gap: 3px;
    margin: 3px 2px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

/* The font dialog (fonts.js) and the About dialog of each page. */
dialog {
    max-width: 520px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    line-height: 1.4;
}

dialog h2 {
    margin-top: 0;
    font-size: 1.2em;
}

dialog form {
    text-align: right;
}

#about-dialog {
    max-width: 680px;
    font-size: 14px; /* long, so smaller than the page */
}

#about-dialog h3 {
    margin: 12px 0 4px;
    font-size: 1em;
}

#about-dialog p,
#about-dialog ul {
    margin: 4px 0;
}

#about-dialog ul {
    padding-left: 20px;
}

/* The About link beside the data status (viewer) or the file buttons (editor),
   and the viewer's link from About to the search help. */
#about-button,
#search-help-link {
    padding: 0;
    border: none;
    background: none;
    color: #1a5fb4;
    text-decoration: underline;
    cursor: pointer;
}