/* ==========================================================================
   BEL-AIR public site (Mockup 02) — account and pet pages: only what inner.css lacks.
   Password field with a Show button, the notifications feed, the photo
   placeholder (initials, never a real face) and the phone-sized digital ID.
   ========================================================================== */

/* long button labels wrap on narrow phones instead of pushing the page sideways */
.acct .paper .btn { white-space: normal; text-align: left; line-height: 1.25; }

/* password + Show button on one row */
.pw { display: flex; gap: .5rem; align-items: stretch; }
.pw input { flex: 1 1 auto; min-width: 0; }
.pw button { flex: none; min-height: 3.25rem; padding: 0 .9rem; border: 1px solid var(--ink-d); border-radius: var(--r-ui); background: var(--paper-2); color: var(--ink-d); font-weight: 700; font-size: var(--t-sm); }
.pw button:hover { background: var(--ink-d); color: var(--paper); }

/* a row of short links/buttons under a field (Forgot password, Send a new code) */
.field-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.linklike { min-height: 2.75rem; padding: 0; color: var(--link-d); text-decoration: underline; font-weight: 700; font-size: var(--t-base); }
.linklike:hover { color: var(--ink-d); }
.said { color: var(--ok); font-weight: 700; font-size: var(--t-sm); }

/* section blocks on the account pages */
.acct-section + .acct-section { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.acct-section > h2 { margin-bottom: .5rem; }
.acct-section > .step-intro { margin-bottom: 1.25rem; }
.card .status, .card .tag { margin-top: .6rem; }
.tile-card b { display: block; font-size: var(--t-lg); font-weight: 700; }
.tile-card span.go { display: inline-block; margin-top: .75rem; color: var(--link-d); font-weight: 700; text-decoration: underline; }

/* the "New" marker on unread notifications, written in words */
.tag--new { background: var(--info-bg); color: var(--info); border-color: var(--info); font-size: var(--t-sm); } /* sentence case: 16 px */

/* notifications feed (FR-NOTIF-001) */
.feed { display: grid; gap: .6rem; }
.feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: start; padding: 1rem 1.15rem; background: var(--paper-2); border: 1px solid var(--line-d); border-left: 6px solid var(--line-d-strong); border-radius: var(--r-photo); }
.feed li.is-new { border-left-color: var(--blue); }
.feed b { display: block; font-weight: 700; }
.feed p { color: var(--ink-d2); font-size: var(--t-sm); margin-top: .2rem; }
.feed .tag { margin-right: .5rem; }
.feed__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.feed__head p { color: var(--ink-d2); }
.feed__clear { min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--line-d-strong); border-radius: var(--r-ui); background: var(--paper-2); color: var(--ink-d); font-weight: 700; font-size: var(--t-sm); }
.feed__clear:hover { border-color: var(--ink-d); }
@media (max-width: 520px) { .feed li { grid-template-columns: 1fr; } .feed__clear { justify-self: start; } }

/* initials placeholder: the mock never shows a real person's face */
.avatar { width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--paper-3); border: 2px solid var(--line-d-strong); color: var(--ink-d); font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.photo-row { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.photo-row > div { flex: 1 1 16rem; }

/* upload tips */
.tips { display: grid; gap: .3rem; margin-top: .25rem; padding-left: 1.25rem; list-style: disc; color: var(--ink-d2); font-size: var(--t-sm); }

/* the "type ERASE" box and other careful actions */
.danger { border-left: 6px solid var(--bad); }

/* ---------------------------------------------------------------- digital ID (FR-ID-003), phone-sized */
.idcard { position: relative; max-width: 22rem; margin-inline: auto; padding: 1.25rem 1.25rem 1.1rem; border-radius: 14px; background: var(--paper-2); color: var(--ink-d); border: 1px solid var(--line-d-strong); box-shadow: 0 24px 48px -30px rgba(12, 18, 32, .55); overflow: hidden; }
.idcard__band { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; align-items: center; margin: -1.25rem -1.25rem 1rem; padding: .85rem 1.25rem; background: var(--blue); color: var(--on-blue); }
.idcard__band img { width: 3rem; height: 3rem; border-radius: 50%; background: var(--paper-2); }
.idcard__band b { display: block; font-weight: 700; font-size: var(--t-base); line-height: 1.2; }
.idcard__band small { display: block; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
.idcard__who { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: center; }
.idcard__who .avatar { border-radius: 8px; width: 6rem; height: 7rem; }
.idcard__name { font-weight: 700; font-size: var(--t-lg); line-height: 1.2; }
.idcard dl { display: grid; gap: .45rem; margin-top: 1rem; }
.idcard dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }
.idcard dt { font-family: var(--font-ui); font-size: var(--t-sm); letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--ink-d3); padding-top: .15rem; }
.idcard dd { font-weight: 700; overflow-wrap: anywhere; }
.idcard__qr { display: grid; justify-items: center; gap: .35rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line-d-strong); text-align: center; }
.idcard__qr svg { width: 11rem; height: 11rem; background: #fff; padding: .5rem; }
.idcard__qr code { font-family: var(--font-mono); font-size: var(--t-base); letter-spacing: .06em; }
.idcard__qr small { color: var(--ink-d2); font-size: var(--t-sm); }
.idcard__foot { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--line-d); color: var(--ink-d2); font-size: var(--t-sm); text-align: center; }
.idcard--void .idcard__band { background: var(--ink-d2); }
.idcard--void { background: var(--paper-3); }
.idcard--void .idcard__qr svg { opacity: .35; } /* the QR only: every word keeps 7:1 */
.idcard__stamp { position: absolute; left: 50%; top: 71%; transform: translate(-50%, -50%) rotate(-18deg); padding: .35rem 1rem; border: 4px solid #9B1C1C; border-radius: 6px; background: rgba(255, 255, 255, .92); color: #9B1C1C; /* a dark red: the light --bad tint is for dark grounds and is ~1.9:1 on this white */ font-weight: 700; font-size: 2rem; letter-spacing: .14em; white-space: nowrap; pointer-events: none; }
@media (max-width: 360px) { .idcard__who { grid-template-columns: 1fr; } .idcard dl div { grid-template-columns: 1fr; gap: 0; } }

/* small list of definitions in cards (status details) */
.dl-plain { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: .45rem 1.25rem; margin-top: .75rem; grid-column: 2; }
.dl-plain dt { color: var(--ink-d2); font-size: var(--t-sm); padding-top: .1rem; }
.dl-plain dd { font-weight: 700; color: var(--ink-d); overflow-wrap: anywhere; }
@media (max-width: 520px) { .dl-plain { grid-template-columns: 1fr; gap: .1rem; grid-column: 1; } .dl-plain dd + dt { margin-top: .5rem; } }

/* extra blocks inside a notice line up with its text, not under the icon */
.notice > div { grid-column: 2; }
@media (max-width: 520px) { .notice > div { grid-column: 1; } }

/* status pills may wrap (narrow phones, A++); references stay on one line on wide screens;
   on the narrowest phones a stacked table puts each label above its value */
.acct .status { white-space: normal; }
@media (min-width: 761px) { .acct .table td:first-child a { white-space: nowrap; } }
@media (max-width: 480px) { .acct .table--stack td { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }

/* a file picker inside a notice or a photo row must not widen the page on a phone */
.acct .notice { grid-template-columns: 2.25rem minmax(0, 1fr); }
@media (max-width: 520px) { .acct .notice { grid-template-columns: minmax(0, 1fr); } }
.photo-row > div { min-width: 0; }
.acct .upload { min-width: 0; }
.acct .upload input[type="file"] { width: 100%; }

/* a step title one level down (a flow inside a section) keeps the display look */
.acct .paper h3.step-title { font-weight: 400; font-size: clamp(1.6 * var(--u), 1.3 * var(--u) + 1vw, 2.1 * var(--u)); line-height: 1.1; }

/* ---------------------------------------------------------------- production port (W7a: My Account, the citizen sign-in pages)
   What the mock wrote as style="" attributes is a class here: the pages carry no inline styles or handlers (CSP). */
.acct-mt-03 { margin-top: .3rem; }
.acct-mt-04 { margin-top: .4rem; }
.acct-mt-06 { margin-top: .6rem; }
.acct-mt-075 { margin-top: .75rem; }
.acct-mt-1 { margin-top: 1rem; }
.acct-mt-125 { margin-top: 1.25rem; }
.acct-mt-14 { margin-top: 1.4rem; }
.acct-mt-15 { margin-top: 1.5rem; }
.acct-mt-175 { margin-top: 1.75rem; }
.acct-mt-2 { margin-top: 2rem; }
.acct-mb-1 { margin-bottom: 1rem; }
.acct-mb-125 { margin-bottom: 1.25rem; }
.acct-mb-15 { margin-bottom: 1.5rem; }
.acct-mb-2 { margin-bottom: 2rem; }
.acct-block { display: block; }
.acct-center { text-align: center; }
.acct-tips-base { font-size: var(--t-base); }
.acct-prose-full { max-width: none; }
.acct-flat { border: 0; }
.acct-notice-actions-block { display: block; }
.acct-col2 { grid-column: 2; }
@media (max-width: 520px) { .acct-col2 { grid-column: 1; } }
/* a step title inside a notice: the UI face, not the display face */
.acct .step-title--notice { font-family: var(--font-ui); font-size: var(--t-lg); font-weight: 800; margin: 0; }
.acct .step-title--ui { font-family: var(--font-ui); font-size: var(--t-lg); font-weight: 800; }
/* the reference and status line on one request (tracking's result head) */
.result__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .6rem; }
.result__head .status { white-space: normal; }
.result__head .ref { font-family: var(--font-mono); font-size: var(--t-base); color: var(--ink-d); }
/* the photo shown back before sending (UX-25): never uploaded until "Send this photo" */
.photo-check { display: grid; gap: .75rem; justify-items: start; margin-top: 1rem; padding: 1rem; border: 2px solid var(--gold); border-radius: var(--r-photo); background: var(--paper-2); }
.photo-check img { width: 10rem; height: 10rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-d-strong); }
.photo-own { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--line-d-strong); }
.idcard__who .photo-own { border-radius: 8px; width: 6rem; height: 7rem; }
.acct-code { font-family: var(--font-mono); letter-spacing: .06em; }
.feed__more { margin-top: .9rem; }

/* one-page step forms (account.js form[data-steps]): without scripts every step shows and the step buttons are left out */
html:not(.js) [data-step-next], html:not(.js) [data-step-back], html:not(.js) [data-review], html:not(.js) [data-step] .step-title.visually-hidden + .review { display: none !important; }
html:not(.js) form[data-steps] [data-step] + [data-step] { margin-top: 2rem; }