/* ===================== Responsive layout and type (D57) =====================
   Two main audiences:
   • Phone on site (most users): one column, bottom tab bar, 16 px text, inputs ≥ 16 px (stops iPhone zooming
     into fields), touch targets ≥ 44 px, safe-area padding for the iPhone home bar.
   • Laptop in the office: left navigation rail, wider content, two columns where it helps (passport, feed side).
   Body font: Inter (same as i-UCUA, very legible on small screens). Barlow Condensed only for titles and big numbers. */

:root{ --body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; --rail:92px; }
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:15px;line-height:1.5}
.small,.item .s,.notif .s,.field .hint,.app .ds{line-height:1.45}

/* Never smaller than 12 px anywhere */
.tabs button,.badge,.tabs .dot,.matrix th,.mono,.mcounts small,.app .url{font-size:12px}
.chip,.legend,.typechip{font-size:12.5px}
.brand small{font-size:11.5px}

/* ---------- Phone (≤ 640 px) ---------- */
@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:26px}
  h2{font-size:19px}
  .small,.item .s,.notif .s,.field .hint,.app .ds,.post-h .s,.react-sum,.tagged,.rules{font-size:14px}
  .muted.xs,.xs,.demo-note{font-size:13px}
  .facts dt{font-size:12px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  /* inputs ≥ 16 px: iOS Safari zooms into anything smaller */
  input,select,textarea,.field input,.field select,.field textarea,.cmp-top textarea,.cmt-f input,.search input,.cmp-opts select{font-size:16px}
  .field label{font-size:14px}
  .btn{font-size:15px;min-height:44px;padding:9px 14px}
  .btn.sm{font-size:14px;min-height:38px;padding:6px 12px}
  .fchip,.tchip{font-size:14px;min-height:38px;padding:6px 14px}
  .reacts button{font-size:14px;min-height:42px}
  .tabs button{font-size:12px;padding:8px 2px calc(10px + env(safe-area-inset-bottom,0px))}
  .tabs .i{width:24px;height:24px}
  .iconbtn{width:42px;height:42px}
  main{padding:16px 12px 120px;gap:14px}
  .card{padding:14px;border-radius:12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat .n{font-size:32px}
  .stat .l{font-size:13px}
  .pp-main h1{font-size:24px}
  .passport{padding:16px}
  .sheet{max-height:92%;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .checkrow{font-size:15px}
  .checkrow input{width:22px;height:22px}
  .matrix table{font-size:12.5px}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px));font-size:15px}
  .lang{height:42px}
}

/* Touch screens of any size: comfortable targets */
@media (pointer:coarse){
  .kebab{width:42px;height:42px}
  .rowlink{min-height:44px}
  .eyebtn,.thumb button{min-width:32px;min-height:32px}
}

/* ---------- Tablet (641–1023 px) ---------- */
@media (min-width:641px) and (max-width:1023px){
  main{max-width:900px}
  .sheet{max-width:620px}
}

/* ---------- Laptop / desktop (≥ 1024 px) ---------- */
@media (min-width:1024px){
  body{padding-left:var(--rail)}
  body:has(nav.tabs[hidden]){padding-left:0} /* sign-in and visitor view have no rail */
  body:has(nav.tabs[hidden]) .preview-bar{margin-left:0;padding-left:0}
  .preview-bar{margin-left:calc(-1 * var(--rail));padding-left:var(--rail)}
  .top .row,main{max-width:1180px}
  main{padding:24px 28px 48px}
  /* bottom tab bar becomes a left navigation rail */
  .tabs{top:0;bottom:0;left:0;right:auto;width:var(--rail);border-top:0;border-right:1px solid var(--line);z-index:40;padding-top:12px;overflow-y:auto}
  .tabs .row{flex-direction:column;max-width:none;gap:4px}
  .tabs button{flex:none;padding:14px 4px;font-size:12.5px;border-radius:10px;margin:0 8px}
  .tabs button:hover{background:var(--sunk);color:var(--ink)}
  .tabs button[aria-current="page"]{background:var(--accent-bg)}
  .tabs button[aria-current="page"]::after{top:12px;bottom:12px;left:-8px;right:auto;width:3px;height:auto;border-radius:0 3px 3px 0}
  .tabs .dot{top:8px;left:calc(50% + 10px)}
  .toast{bottom:28px}
  .sheet{max-width:640px}
  .sheet.wide{max-width:860px}
  h1{font-size:32px}

  /* Feed: comfortable reading column */
  main.v-feed{max-width:1180px} /* reading column + side panel, see dash.css */
  /* Passport: the card on top, sections in two columns */
  main.v-me,main.v-profile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:18px}
  main.v-me > *,main.v-profile > *{min-width:0}
  main.v-me > .passport,main.v-profile > .passport,
  main.v-me > .banner,main.v-profile > .banner,
  main.v-me > .mbanner,main.v-profile > .mbanner,
  main.v-me > div:not(.card),main.v-profile > div:not(.card),
  main.v-me > .welcome,main.v-profile > .welcome,
  main.v-me > .cert-wide,main.v-profile > .cert-wide{grid-column:1 / -1}
  /* Dashboard and people lists use the width */
  .stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .apps{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

/* Very wide screens: keep line length readable */
@media (min-width:1600px){ .top .row,main{max-width:1280px} }

/* Passport card: front only (D53 rev.) */
.cardprev.one{grid-template-columns:1fr;max-width:520px;width:100%;margin:0 auto}
.plainfacts{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Sign-in (Phase 1) */
main.v-signin{max-width:480px;padding-top:32px}
.signin{gap:16px;padding:24px}
.signin-brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.mark.big{width:64px;height:64px;border-radius:16px;background:var(--navy);color:#fff;display:grid;place-items:center}
.mark.big .i{width:36px;height:36px}
.signin-brand h1{font-size:30px}
.signin h2{font-size:20px}
.signin ul{padding-left:20px}
.signin #si-input{font-size:20px;letter-spacing:2px;text-align:center}

/* The hidden attribute always wins (live mode hides the preview role switcher and the bell before sign-in) */
[hidden]{display:none !important}