/* Host-only styles. Everything that looks like the design lives in lg.css, shipped by
   LastGuardian.UI; this file holds nothing but what the page around it needs. */
html, body {
    margin: 0;
    min-height: 100%;
}

/* The themed background belongs to .lg-app, so it has to cover the viewport: otherwise a short
   page shows the browser's white below the dark theme. */
.lg-app {
    min-height: 100dvh;
}

/* FocusOnNavigate moves focus to the page's h1 after a navigation, which is right for a screen
   reader but should not draw a focus ring around the title. Keyboard focus rings elsewhere stay. */
.lg-app [tabindex="-1"]:focus {
    outline: none;
}

/* The public header's mobile menu. The design opens .pub-drawer from a script; here it is a
   details element, so the summary takes the burger's look and loses the browser's marker. */
.pub-menu > summary {
    list-style: none;
}

.pub-menu > summary::-webkit-details-marker {
    display: none;
}

/* lg.css shows the burger only below 940px; a menu left open must not linger on a wider screen. */
@container lg (min-width: 941px) {
    .pub-menu .pub-drawer {
        display: none;
    }
}

/* Child onboarding (M2.8). The design's picks are buttons with a script behind them; here they are
   labels around a hidden radio button or checkbox, so the form submits them without a script. */
.ob-form {
    display: contents;
}

/* The design's focus screens fill the window, so the step bar sits at the bottom of a short step. */
.lg-app > .focus {
    min-height: 100dvh;
}

.ob-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

label.choice,
label.chip {
    position: relative;
}

label.chip {
    display: inline-flex;
    align-items: center;
}

label.choice:has(.ob-input:focus-visible),
label.chip:has(.ob-input:focus-visible) {
    outline: 3px solid var(--b);
    outline-offset: 2px;
}

/* The child app's pop-ups are rendered closed with the hidden attribute and opened by childhome.js;
   lg.css gives them a display value, which would otherwise win over hidden. */
.lg-app [hidden] {
    display: none !important;
}

/* The unit's version choices become links once «الان نه» is picked (static SSR); they keep the look. */
a.choice {
    color: inherit;
    text-decoration: none;
}

/* Parts not built yet sit in the canvas's segmented bar as plain spans (not links); lg.css styles
   only `.seg a`, so the same look is repeated here, a little muted, on every width. */
.seg > span[aria-disabled="true"] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px 0 20px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px;
    color: var(--muted);
    cursor: default;
}

@media (max-width: 560px) {
    .seg > span[aria-disabled="true"] {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 10px;
    }
}

@container lg (max-width: 640px) {
    .seg > span[aria-disabled="true"] {
        white-space: nowrap;
        padding: 0 12px;
        font-size: 14px;
        flex: none;
    }

    .pg > .seg > span[aria-disabled="true"] {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: 58px;
        padding: 4px 2px;
        font-size: 11.5px;
        text-align: center;
        white-space: normal;
        line-height: 1.3;
    }

    .pg > .seg > span[aria-disabled="true"] img {
        width: 24px;
        height: 24px;
    }
}

/* The canvas's tabs are buttons; here they are links (each tab is an address), so the label is
   centred the way a button centres it. */
.tabs > a.tab {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* «پست تازه» (M4.3). The design's picks are buttons with a script; here the letter items and «نوشته»
   are links and «کجا بذارم؟» is a label around a hidden radio, so they keep the design's look. */
a.ig-tile,
a.ig-add {
    text-decoration: none;
}

a.ig-add {
    color: var(--ink);
}

a.ig-add[aria-current="true"] {
    border-color: var(--b);
    border-style: solid;
    background: var(--b-tint);
}

.ig-where label.ig-w {
    position: relative;
}

.ig-where label.ig-w:has(.ob-input:checked) {
    background: var(--b-tint);
    color: var(--b-text);
    box-shadow: inset 0 0 0 2px var(--b);
}

.ig-where label.ig-w:has(.ob-input:focus-visible) {
    outline: 3px solid var(--b);
    outline-offset: 2px;
}

/* The board's «دفتر تجربه» tab waits for its task; it shows, but does nothing. */
.sr-board-h .tab[disabled] {
    opacity: .55;
    cursor: default;
}

/* Review panel (M4.4): queues not built yet show as tabs that do nothing. */
.tabs .tab[disabled] {
    opacity: .5;
    cursor: default;
}

/* The guardian room (M4.6): a Sara mate's arch opens their room, so it is a link that keeps the arch's look. */
a.sr-arch {
    color: inherit;
    text-decoration: none;
}

/* Parent panel (task M6.1b). «بازگشت به اپ کودک» is a form button (child mode is a POST), drawn as the menu's link. */
button.nav-item {
    background: none;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
}

/* The top bar's child switch opens a plain list of the family's children; no script. */
.child-menu {
    position: relative;
}
.child-menu > summary {
    list-style: none;
    cursor: pointer;
}
.child-menu > summary::-webkit-details-marker {
    display: none;
}
.child-menu-list {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(10, 14, 30, .18);
}
.child-menu-list a {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 800;
    color: var(--ink);
    text-decoration: none;
}
.child-menu-list a:hover,
.child-menu-list a[aria-current="true"] {
    background: var(--surface-2);
}

/* «پیشنهاد یه لحظه برای نامه‌ش» under the map: the design's button opens the short form in place. */
.suggest {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.suggest > summary {
    list-style: none;
    align-self: flex-start;
}
.suggest > summary::-webkit-details-marker {
    display: none;
}
.suggest[open] > summary {
    margin-bottom: 10px;
}
/* The open list sits over the page, which otherwise paints above the top bar. */
.lg-top:has(.child-menu[open]) {
    position: relative;
    z-index: 40;
}

/* «تنظیمات و حریم» (task M6.1c): the quiet-hours times sit in the row's small line; the home Sara ask opens its
   reason under the row. */
.sw-row .qt {
    font: inherit;
    font-weight: 800;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1px 6px;
    direction: ltr;
}
.sw-more {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sw-more > summary {
    list-style: none;
    cursor: pointer;
}
.sw-more > summary::-webkit-details-marker {
    display: none;
}
.sw-row.dev {
    padding-inline: 0;
}
.sw-row.dev .btn {
    white-space: nowrap;
}