/* Portal-only styles, layered on styles.css. */
.portal-head { background: var(--navy); color: #fff; }
.portal-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; }
.portal-head h1 { font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; }
.portal-head p { color: var(--on-dark-dim); margin: .2rem 0 0; }
.portal-head .logins { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.portal-who { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-dim); }
.portal-tabs { background: var(--card); border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 800; }
.portal-tabs .wrap { display: flex; gap: .2rem; overflow-x: auto; }
.portal-tabs a { font: 600 .84rem var(--sans); color: var(--ink); padding: .9rem .8rem; white-space: nowrap; text-decoration: none; border-bottom: 3px solid transparent; }
.portal-tabs a:hover, .portal-tabs a.on { color: var(--gold-ink); border-bottom-color: var(--gold); }
.flash { margin-top: 1.2rem; padding: .8rem 1rem; border-radius: 10px; border: 1px solid; font-size: .92rem; }
.flash--ok { background: #dcebdf; border-color: #7fae8b; color: #2f6a44; }
.flash--err { background: #f6e3d8; border-color: #c48f8a; color: #8a4640; }
.flash--warn { background: #f3e9c9; border-color: #d9c27a; color: #7a5a12; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 1.2rem 1.3rem; }
.card b.big { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; color: var(--ink); }
.card .lbl { display: block; margin-top: .45rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card.due b.big { color: #8a4640; }
.card.ok b.big { color: #2f6a44; }
.pill { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.s-new, .s-sent, .s-pending { background: #f6e3d8; color: #8a4640; }
.s-screening, .s-in-progress, .s-draft, .s-ending { background: #f3e9c9; color: #7a5a12; }
.s-approved, .s-signed, .s-active, .s-done, .s-succeeded, .s-available { background: #dcebdf; color: #2f6a44; }
.s-declined, .s-withdrawn, .s-failed, .s-ended, .s-cancelled, .s-void, .s-refunded, .s-leased, .s-offline { background: #e8e6e1; color: #5a6560; }
.u-emergency { color: #96524c; font-weight: 700; } .u-urgent { color: #b5872e; font-weight: 600; }
table.data.compact th, table.data.compact td { padding: .6rem .8rem; font-size: .86rem; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { text-align: right; }
table.data tr.row-link { cursor: pointer; } table.data tr.row-link:hover td { background: var(--paper); }
.form-inline { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.form-inline .field { margin: 0; min-width: 160px; }
.form-inline .field input, .form-inline .field select { min-height: 42px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
.lease-doc { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-card); padding: clamp(1.4rem, 3vw, 2.6rem); max-width: 860px; font-size: .95rem; line-height: 1.6; }
.lease-doc h2 { font-size: 1.3rem; margin-top: 1.6rem; } .lease-doc h1 { font-size: 1.8rem; }
.lease-doc table { width: 100%; border-collapse: collapse; margin: .8rem 0; } .lease-doc td { padding: .35rem .5rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.sig { border: 1px dashed var(--hair-strong); padding: 1rem 1.2rem; border-radius: 10px; margin-top: 1rem; font-family: var(--mono); font-size: .85rem; }
.ledger td.credit { color: #2f6a44; }
.photos img { height: 110px; border-radius: 8px; margin: .3rem .3rem 0 0; object-fit: cover; }
.ticket { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 1rem 1.25rem; margin-top: 1rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .ticket { grid-template-columns: 1fr; } }
.ticket h3 { font-size: 1.05rem; margin: 0 0 .3rem; } .ticket p { margin: .25rem 0; font-size: .9rem; }
.details { white-space: pre-wrap; background: var(--paper); padding: .6rem .8rem; border-radius: 8px; font-size: .88rem; }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 600px) { .pay-methods { grid-template-columns: 1fr; } }
.pay-method { display: block; border: 2px solid var(--hair); border-radius: var(--r-card); padding: 1.1rem 1.2rem; cursor: pointer; background: var(--card); }
.pay-method:has(input:checked) { border-color: var(--gold); }
.pay-method input { margin-right: .5rem; }
.pay-method b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; } .pay-method span { display: block; color: var(--muted); font-size: .88rem; margin-top: .3rem; }
.muted { color: var(--muted); } .small { font-size: .88rem; }