/* static/lao-font.css
 *
 * Makes Lao text render correctly on EVERY machine.
 *
 * WHY THIS IS NEEDED
 *   None of the platform's font stacks name a Lao font. It looks fine on a
 *   Windows development machine only because Windows quietly supplies one of
 *   its own. On a machine without a Lao font installed, Lao text shows as
 *   empty boxes. The font is bundled here rather than loaded from a CDN, so
 *   it also works if the ministry's network blocks outside font services.
 *
 * WHY IT CANNOT AFFECT ENGLISH TEXT
 *   Each @font-face below declares a unicode-range covering only Lao
 *   characters. The browser therefore uses this font ONLY for Lao glyphs and
 *   keeps the existing font for everything else - even though the font name
 *   sits at the front of the stack.
 *
 * Files: static/fonts/NotoSansLao-400.woff2, NotoSansLao-700.woff2 (21 KB each)
 */

@font-face {
    font-family: 'Noto Sans Lao';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/NotoSansLao-400.woff2') format('woff2');
    unicode-range: U+0E81-0EDF, U+200C-200D, U+25CC;
}

@font-face {
    font-family: 'Noto Sans Lao';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/NotoSansLao-700.woff2') format('woff2');
    unicode-range: U+0E81-0EDF, U+200C-200D, U+25CC;
}

/* Put the Lao font first, then keep the platform's existing stack behind it.
   Because of unicode-range above, only Lao characters ever use it. */
body,
button,
input,
select,
textarea,
.btn {
    font-family: 'Noto Sans Lao', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ---------------------------------------------------------------------------
   Layout tolerance for Lao text.
   Lao runs noticeably longer than English for the same words, so fixed-width
   controls can overflow. These rules only relax constraints - they change
   nothing about the English layout.
   --------------------------------------------------------------------------- */

/* Buttons grow with their label instead of clipping it */
.btn,
button {
    white-space: normal;
    height: auto;
    min-height: 0;
    line-height: 1.35;
}

/* Long words wrap rather than pushing a panel sideways */
body[data-ui-lang="lo"] .phase-item,
body[data-ui-lang="lo"] .sidebar,
body[data-ui-lang="lo"] .nav-links a,
body[data-ui-lang="lo"] label,
body[data-ui-lang="lo"] .btn {
    overflow-wrap: break-word;
    word-break: normal;
}

/* Lao diacritics sit above and below the baseline, so tight line spacing
   clips them. Only applied while the interface is in Lao. */
body[data-ui-lang="lo"] {
    line-height: 1.65;
}

body[data-ui-lang="lo"] h1,
body[data-ui-lang="lo"] h2,
body[data-ui-lang="lo"] h3,
body[data-ui-lang="lo"] h4 {
    line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Show / hide password control                               19 September 2026
   Paired with static/password-eye.js. See that file for why it exists.
   --------------------------------------------------------------------------- */

/* Edge and IE draw their OWN reveal button. Without this the user would see
   two eyes side by side on Edge and one everywhere else - which is exactly the
   inconsistency this was added to remove. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* The wrapper replaces the input in the layout, so it has to carry the input's
   full width; the input itself keeps whatever width class it already had. */
.pw-eye-wrap {
    display: block;
    position: relative;
    width: 100%;
}

/* Room for the button, so a long password never runs underneath it. Set on the
   input itself rather than a utility class, because the five pages use
   slightly different padding classes. */
.pw-eye-wrap > input {
    padding-right: 2.6rem;
}

.pw-eye-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: .55rem;
    margin: auto 0;
    height: 1.6rem;
    width: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: #6b7280;                 /* grey-500: visible, not competing */
    cursor: pointer;
    line-height: 0;
}

.pw-eye-btn:hover { color: #374151; }

/* Clicked with a mouse, no ring; reached another way, a clear one. */
.pw-eye-btn:focus { outline: none; }
.pw-eye-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: no-preference) {
    .pw-eye-btn { transition: color .15s ease; }
}