/*
 * The P2 stub's styling. Deliberately a plain stylesheet and NOT a themed SCSS partial: the
 * portal's look is P3's problem, and adding a partial to sass/materialize.scss would put student
 * styles into every staff page's dynamic-theme.css for a page that ships dark.
 */
.portal {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f5f7;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2933;
}

.portal-card {
    width: min(420px, calc(100% - 2rem));
    background: #fff;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .06);
}

.portal-card h1 { margin: 0 0 .75rem; font-size: 1.5rem; }
.portal-card p { line-height: 1.5; margin: 0 0 1rem; }

.portal-card label { display: block; font-weight: 600; margin-bottom: .35rem; }

.portal-card input[type="text"],
.portal-card input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .75rem;
    border: 1px solid #cbd2d9;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.portal-card button {
    width: 100%;
    padding: .7rem 1rem;
    border: 0;
    border-radius: 6px;
    background: var(--theme-primary, #1f2933);
    color: var(--theme-on-primary, #fff);
    font-size: 1rem;
    cursor: pointer;
}

.portal-muted { color: #616e7c; font-size: .9rem; }
.portal-notice { color: var(--theme-good-text, #0b6b3a); font-weight: 600; }
.portal-error { color: var(--theme-bad-text, #a61b1b); font-weight: 600; }
.portal-logout { margin-top: 1.5rem; }
.portal-logout button { background: transparent; color: #616e7c; border: 1px solid #cbd2d9; }

/* ── Home (P3): the phone-shaped page and the lifecycle card ──────────────────
 * Lifted from prototypes/student-portal/ (the layout the client approved), trimmed to what Home
 * actually renders. Brand colours arrive as custom properties written inline by the template from
 * ColorSettings — deliberately NOT a <link> to /css/dynamic-theme.css, which is 450 KB of staff
 * skin for the three variables this page needs. */
.portal-home {
    margin: 0;
    min-height: 100vh;
    display: block;
    background: #eef0f2;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2933;
    /* The client's colours, from /css/theme-tokens.css; the fallbacks are for a theme not yet compiled. */
    --brand: var(--theme-primary, #2a9d8f);
    --brand-dark: var(--theme-primary-dark, #21796e);
    --brand-ink: var(--theme-on-primary, #ffffff);
}

.portal-home .appbar {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    background: var(--brand);
    color: var(--brand-ink);
}
.portal-home .appbar img.logo { height: 30px; width: auto; display: block; }
.portal-home .appbar .brand { font-weight: 700; font-size: 15px; }
.portal-home .appbar .who { font-size: 11.5px; opacity: .85; }
/* an <a> since P7a — it is the way into Profile (§9), so the link styling has to be undone */
.portal-home .appbar .avatar {
    text-decoration: none;
    color: inherit;
    margin-left: auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-ink) 22%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700;
}

.portal-home main { max-width: 560px; margin: 0 auto; padding: 16px 14px 48px; }

.portal-home .card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 8px 24px rgba(0, 0, 0, .05);
}
.portal-home .card.lifecycle { border-left: 3px solid var(--brand); }

.portal-home .eyebrow {
    margin: 0 0 6px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: #9aa5b1;
}
.portal-home .headline { font-size: 18px; font-weight: 700; line-height: 1.3; }
.portal-home .line { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.portal-home .line.muted { color: #616e7c; }

.portal-home .facts { display: flex; gap: 22px; margin: 12px 0 0; }
.portal-home .fact dt {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: #9aa5b1;
}
.portal-home .fact dd { margin: 2px 0 0; font-size: 14px; font-weight: 650; }

/* ── the application tracker (§3.2), lifted from the prototype: six steps, windowed ── */
.portal-home .tracker { margin: 15px 0 0; }
.portal-home .step { display: flex; gap: 11px; align-items: flex-start; }
.portal-home .rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 16px; }
.portal-home .dot {
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid #cbd2d9; background: #fff; margin-top: 3px; flex: none;
}
.portal-home .stem { width: 2px; flex: 1; min-height: 20px; background: #dde1e6; }
.portal-home .step.done .dot { background: var(--theme-good, #0b6b3a); border-color: var(--theme-good, #0b6b3a); }
.portal-home .step.done .stem { background: var(--theme-good, #0b6b3a); }
.portal-home .step.now .dot {
    border-color: var(--brand); background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}
.portal-home .step .body { padding-bottom: 13px; }
.portal-home .step:last-child .body { padding-bottom: 0; }
.portal-home .step .t { font-size: 13.5px; font-weight: 600; }
.portal-home .step .d { font-size: 12px; color: #616e7c; margin-top: 1px; line-height: 1.45; }
.portal-home .step.todo .t { color: #9aa5b1; font-weight: 500; }
.portal-home .step.now .t { color: var(--brand-dark); }
.portal-home .step.folded { display: none; }
.portal-home .tracker.open .step.folded { display: flex; }

/* the "show all" toggle — width:auto etc. undo the card's full-width button styling */
.portal-home .card button.more {
    font: inherit; font-size: 12.5px; font-weight: 600; color: #616e7c; background: transparent;
    border: 0; border-top: 1px solid #dde1e6; border-radius: 0; width: 100%; text-align: left;
    padding: 11px 0 1px; margin-top: 2px; cursor: pointer;
}
.portal-home .card button.more:hover { color: #1f2933; background: transparent; }

/* ── "what we need from you" (§3.3): action rows + the all-clear, from the prototype ── */
.portal-home .action {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 11px 0; border-top: 1px solid #dde1e6;
}
.portal-home .action:first-of-type { border-top: 0; padding-top: 3px; }
.portal-home .action .ico {
    flex: none; width: 22px; height: 22px; border-radius: 6px;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; background: var(--theme-warn-soft, #fdf3e0); color: var(--theme-warn-text, #8a5a00);
}
.portal-home .action .t { font-size: 13.5px; font-weight: 600; }
.portal-home .action .d { font-size: 12px; color: #616e7c; margin-top: 2px; line-height: 1.45; }

.portal-home .allclear {
    display: flex; gap: 10px; align-items: center;
    background: var(--theme-good-soft, #e8f4ed); border-radius: 10px; padding: 12px 13px;
}
.portal-home .allclear .tick {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--theme-good, #0b6b3a); color: var(--theme-on-good, #fff);
    display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}
.portal-home .allclear .t { font-size: 13.5px; font-weight: 600; color: var(--theme-good-text, #0b6b3a); }

/* the per-row upload control on "what we need from you" — a label over a hidden file input,
   so the button look never fights the native picker */
.portal-home .action .action-upload { margin-left: auto; align-self: center; flex: none; }
.portal-home .upload-btn {
    display: inline-block;
    font-size: 12.5px; font-weight: 600;
    padding: 7px 13px; border-radius: 8px;
    background: var(--brand); color: var(--brand-ink);
    cursor: pointer; user-select: none;
}
.portal-home .upload-btn:hover { background: var(--brand-dark); }

/* the P2 account forms, demoted to a card at the bottom of the page */
.portal-home .card label { display: block; font-weight: 600; margin: 0 0 .35rem; font-size: 13.5px; }
.portal-home .card input[type="password"] {
    width: 100%; box-sizing: border-box;
    padding: .6rem .7rem;
    border: 1px solid #cbd2d9; border-radius: 6px;
    font-size: 1rem; margin-bottom: .75rem;
}
.portal-home .card button {
    width: 100%; padding: .65rem 1rem;
    border: 0; border-radius: 6px;
    background: var(--brand); color: var(--brand-ink);
    font-size: .95rem; cursor: pointer;
}
.portal-home .card button:hover { background: var(--brand-dark); }
.portal-home .portal-logout { margin-top: .75rem; }
.portal-home .portal-logout button { background: transparent; color: #616e7c; border: 1px solid #cbd2d9; }

/* ── "What's coming" (Home) and the coming-soon pages — SCREENS §3, owner 2026-09-07 ── */
.portal-home .roadmap .rm { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #dde1e6; }
.portal-home .roadmap .rm:first-child { border-top: 0; padding-top: 2px; }
.portal-home .rm .g { width: 26px; height: 26px; border-radius: 7px; background: #f4f5f7; display: grid; place-items: center; font-size: 14px; flex: none; }
.portal-home .rm .t { font-size: 13px; font-weight: 600; }
.portal-home .rm .t a { color: inherit; text-decoration: none; }
.portal-home .rm .t a:hover { color: var(--brand-dark); }
.portal-home .rm .d { font-size: 11.5px; color: #616e7c; margin-top: 1px; }
.portal-home .rm .when { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9aa5b1; }
.portal-home .rm .when.live { color: var(--theme-good-text, #0b6b3a); }
.portal-home .rm .when.next { color: var(--brand-dark); }

.portal-home .tellme { display: flex; gap: 11px; align-items: center; background: #f4f5f7; border-radius: 10px; padding: 11px 12px; margin-top: 12px; }
.portal-home .tellme .t { font-size: 13px; font-weight: 600; }
.portal-home .tellme .d { font-size: 11.5px; color: #616e7c; margin-top: 1px; }
/* Specificity beats ".portal-home .card button" (the full-width brand button), which otherwise wins. */
.portal-home .card .tellme button.switch { margin-left: auto; flex: none; width: 40px; height: 22px; border-radius: 999px; background: #cbd2d9; position: relative; cursor: pointer; border: 0; padding: 0; font-size: 0; }
.portal-home .card .tellme button.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.portal-home .card .tellme button.switch[aria-checked="true"] { background: var(--brand); }
.portal-home .card .tellme button.switch[aria-checked="true"]::after { left: 21px; }
.portal-home .tellme > div { min-width: 0; flex: 1; }

.portal-home .soonhead { text-align: center; padding: 18px 8px 10px; }
.portal-home .soonhead .glyph { font-size: 38px; line-height: 1; margin-bottom: 10px; }
.portal-home .soonhead h2 { font-size: 19px; font-weight: 680; letter-spacing: -.02em; margin: 0 0 6px; }
.portal-home .soonhead p { font-size: 13px; color: #616e7c; line-height: 1.55; margin: 0; }
.portal-home .will { list-style: none; padding: 0; margin: 4px 0 0; }
.portal-home .will li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid #dde1e6; font-size: 13px; line-height: 1.45; }
.portal-home .will li:first-child { border-top: 0; }
.portal-home .will .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f4f5f7; color: #9aa5b1; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.portal-home a.action { display: flex; gap: 11px; align-items: center; text-decoration: none; color: inherit; padding: 6px 0 2px; }
.portal-home a.action .t { font-size: 13.5px; font-weight: 600; }
.portal-home a.action .d { font-size: 12px; color: #616e7c; margin-top: 2px; }
.portal-home a.action .go { margin-left: auto; font-size: 18px; color: #9aa5b1; flex: none; }

/* ── Profile (SCREENS §9), lifted from prototypes/student-portal/STUDENT_PORTAL_PROFILE_PROTOTYPE.html.
 * Everything is scoped under .portal-home because that is the body class every portal page carries;
 * the tokens the prototype used are inlined to the same literals the rest of this sheet uses. */
.portal-home .me { display: flex; gap: 13px; align-items: center; }
.portal-home .me .big {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--brand); color: var(--brand-ink);
    display: grid; place-items: center; font-size: 18px; font-weight: 700; flex: none;
}
.portal-home .me .n { font-size: 17px; font-weight: 680; letter-spacing: -.01em; }
.portal-home .me .s { font-size: 12px; color: #616e7c; margin-top: 2px; }

.portal-home .field { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid #dde1e6; }
.portal-home .field:first-of-type { border-top: 0; padding-top: 2px; }
/* the editing column has to be allowed to fill the row; the read-only one must not */
.portal-home .field .grow { flex: 1; min-width: 0; }
.portal-home .field .k {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: #9aa5b1; font-weight: 650; margin-bottom: 3px;
}
.portal-home .field .v { font-size: 14px; font-weight: 500; line-height: 1.4; word-break: break-word; }
.portal-home .field .v.muted { color: #9aa5b1; font-weight: 400; }
.portal-home .hint { font-size: 11.5px; color: #616e7c; margin-top: 5px; line-height: 1.5; }

/* "Edit" is an <a>, so the card's full-width button rule never reaches it */
.portal-home .field a.edit {
    margin-left: auto; flex: none;
    font: inherit; font-size: 12px; font-weight: 600; text-decoration: none;
    color: var(--brand-dark); background: transparent;
    border: 1px solid #cbd2d9; border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.portal-home .field a.edit:hover { border-color: var(--brand); }

.portal-home .field input {
    font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
    padding: 8px 10px; border: 1px solid #cbd2d9; border-radius: 8px;
    background: #fff; color: #1f2933; margin-top: 2px;
}
.portal-home .field input:focus {
    outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-color: var(--brand);
}
.portal-home .field input[readonly] { background: #f4f5f7; color: #616e7c; }

/* maintenance: a description box and a phone camera */
.portal-home .field textarea {
    font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
    padding: 8px 10px; border: 1px solid #cbd2d9; border-radius: 8px;
    background: #fff; color: #1f2933; margin-top: 2px; resize: vertical; line-height: 1.5;
}
.portal-home .field textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-color: var(--brand);
}
.portal-home .field input[type="file"] { font-size: 12.5px; margin-top: 4px; width: 100%; }
/* a settled report is not an outstanding one — same row, different weight */
.portal-home .action .ico.settled { background: #e8f4ed; color: #0b6b3a; }
.portal-home .action .when {
    margin-left: auto; flex: none; align-self: center;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #9aa5b1;
}
.portal-home .action .when.live { color: #0b6b3a; }
.portal-home .action .when.next { color: var(--brand-dark); }

/* the relationship <select> matches the inputs beside it — this page does NOT use MaterialSelect,
   which belongs to the staff app and would drag its whole stylesheet onto a student's phone */
.portal-home .field select {
    font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
    padding: 8px 10px; border: 1px solid #cbd2d9; border-radius: 8px;
    background: #fff; color: #1f2933; margin-top: 2px; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23616e7c' stroke-width='2'/></svg>");
    background-repeat: no-repeat; background-position: right 11px center;
}
.portal-home .field select:focus {
    outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-color: var(--brand);
}
.portal-home .field .is-hidden { display: none; }
.portal-home .field .kin-relationship-other { margin-top: 8px; }

/* ── The contact slots (§9.1). One card, one block per slot, each headed by what that slot IS —
 * the position decides what a lease prints, so the label is information, not decoration. ────── */
.portal-home .slot { border-top: 1px solid #dde1e6; padding-top: 10px; margin-top: 10px; }
.portal-home .slot:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.portal-home .slot-head {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #616e7c;
}
.portal-home .pill.lease { background: #e8f4ed; color: #0b6b3a; margin-left: 0; }
.portal-home .slot .field .v + .v { margin-top: 2px; }
/* ⚠️ ".portal-home .card button" is the full-width brand button — this needs the extra class. */
.portal-home .card .slot-remove { margin-top: 6px; }
.portal-home .card .slot-remove button {
    width: auto; padding: 0; background: transparent; border: 0;
    font: inherit; font-size: 11.5px; font-weight: 600; color: #a61b1b; cursor: pointer;
}
.portal-home .card .slot-remove button:hover { background: transparent; text-decoration: underline; }

/* inline validation — the message sits directly under the field it is about */
.portal-home .field input.is-wrong,
.portal-home .field select.is-wrong { border-color: #a61b1b; background: #fdf1f1; }
.portal-home .field .field-error {
    font-size: 11.5px; line-height: 1.45; color: #a61b1b; margin-top: 5px; font-weight: 500;
}

.portal-home .pill {
    display: inline-block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px;
}
.portal-home .pill.review { background: #e7eef9; color: #1d4f91; }
.portal-home .pill.pending { background: #fdf3e0; color: #8a5a00; }

.portal-home .banner {
    display: flex; gap: 10px; align-items: flex-start;
    border-radius: 10px; padding: 11px 12px; margin: 0 0 12px;
    font-size: 12.5px; line-height: 1.5;
}
.portal-home .banner.pending { background: #fdf3e0; color: #8a5a00; }
.portal-home .banner .i {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 11px;
    background: currentColor;
}
.portal-home .banner .i b { color: #fff; }
.portal-home .banner b { font-weight: 650; }

/* ⚠️ ".portal-home .card button" (the full-width brand button) outranks a bare ".btn" — these
   two selectors carry the extra class deliberately. */
.portal-home .row-btns { display: flex; gap: 8px; margin-top: 10px; }
.portal-home .card .row-btns button.btn,
.portal-home .card .row-btns a.btn {
    font: inherit; font-size: 13px; font-weight: 650;
    padding: 10px 14px; border-radius: 9px; border: 0; cursor: pointer;
    background: var(--brand); color: var(--brand-ink);
    flex: 1; width: auto; text-align: center; text-decoration: none;
}
.portal-home .card .row-btns a.btn.ghost {
    background: transparent; color: #616e7c; border: 1px solid #cbd2d9; flex: 0 0 auto;
}

.portal-home .profile-foot { text-align: center; font-size: 11.5px; margin-top: 4px; }

/* the "‹ Home" backlink at the top of every secondary page */
.portal-home main > .line.muted a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.portal-home main > .line.muted a:hover { text-decoration: underline; }

/* ── The staff-side preview (§9.3a). Read-only is enforced by the chain — every form on this page
 * posts to /portal/**, which a staff principal cannot reach — so this is only about not wasting
 * somebody's click. ────────────────────────────────────────────────────────────────────────── */
.portal-home .preview-bar {
    background: #e7eef9; color: #1d4f91;
    border-radius: 10px; padding: 10px 12px; margin: 0 0 12px;
    font-size: 12.5px; line-height: 1.5;
}
.portal-home.preview main form,
.portal-home.preview main .upload-btn { pointer-events: none; opacity: .55; }