/* web/css/phone.css — phone-app shell: app bar, tab bar, login, report, my reports, confirm. Loaded after ui.css and motion.css. */

/* ---- chrome ---- */
.tab-ic{display:inline-flex;align-items:center;justify-content:center}   /* holds the tab icon; the phone bar draws its active pill here */
@media (max-width:640px){
  .top{height:calc(var(--top-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .brand{gap:10px;padding:0 8px 0 0;background:none;box-shadow:none;color:var(--fg);font-size:18px}
  .brand::before{width:32px;height:32px;border-radius:10px;-webkit-mask:none;mask:none;background:var(--drop-fill) center/18px no-repeat,var(--accent-fill)}
  .menu{top:calc(var(--top-h) + env(safe-area-inset-top) + 4px)}
  main{padding:16px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left))}
  .tabs a{gap:4px;padding:4px 0;border-radius:16px;font-size:12px;font-weight:600;-webkit-tap-highlight-color:transparent}
  .tabs a.on{background:none;box-shadow:none}
  .tab-ic{width:56px;height:30px;border-radius:999px;transition:background var(--dur-fast) var(--ease)}
  .tabs a.on .tab-ic{background:color-mix(in srgb, var(--accent-fill) 18%, var(--s1))}
  .tabs a:active .tab-ic{background:var(--s2)}
  .tabs .ic{width:22px;height:22px}.tabs a.on .ic{stroke-width:2}
  body:has(#tabs:empty){padding-bottom:calc(16px + env(safe-area-inset-bottom))}   /* logged out: no bar to clear */
}

/* ---- screen header: large title, one muted line, optional action on the right ---- */
.screen-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 0 16px}
.screen-head h1{margin:0}
.screen-sub{margin:4px 0 0;color:var(--fg-muted)}
.head-act{flex:none;min-height:44px;padding:8px 18px}
@media (max-width:640px){.screen-head h1{font-size:30px}}

/* ---- login: photo header, grouped persona rows, public links ---- */
.signin{display:grid;gap:8px}
.signin-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(210px,28vh,260px);padding:20px;border-radius:28px;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,rgba(8,30,32,.08) 25%,rgba(8,30,32,.78)),url(../img/hero.jpg) center 40%/cover}
.signin-hero h1{margin:0 0 6px;color:#fff;font-size:30px;line-height:1.1}
.signin-hero p{margin:0;color:#fff;max-width:30em}
.signin-tag{position:absolute;top:16px;left:16px;padding:4px 12px;border-radius:999px;background:rgba(8,30,32,.58);font-size:13px;font-weight:600}
.signin-panel h2{margin:20px 0 10px}
.signin-panel .banner{margin:0}
.group-h{margin:22px 4px 2px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted)}
.group-sub{margin:0 4px 8px;font-size:14px;color:var(--fg-muted)}
.group-h+.plist{margin-top:8px}
.plist{list-style:none;margin:0;padding:0;background:var(--s1);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.persona,.plink{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:14px;width:100%;min-height:68px;margin:0;padding:12px 44px 12px 16px;border:0;border-radius:0;
  background:none;color:var(--body);font-weight:500;text-align:left;text-decoration:none}
.persona::before,.plink::before{content:"";position:absolute;left:74px;right:0;top:0;border-top:1px solid var(--line)}   /* inset hairline, iOS style */
.plist>li:first-child>.persona::before,.plist>.plink:first-child::before{display:none}
.persona:hover:not(:disabled),.plink:hover{background:var(--s2)}
.persona:active:not(:disabled),.plink:active{transform:none;background:var(--s2)}
.persona:focus-visible,.plink:focus-visible{outline-offset:-3px}   /* .plist clips overflow: keep the ring inside the row */
.persona-text{display:flex;flex-direction:column;min-width:0}
.persona-text strong{color:var(--fg);font-size:16px;line-height:1.3}
.persona-text span{color:var(--fg-muted);font-size:14px;line-height:1.35}
.initials{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;font-weight:700;font-size:15px;color:var(--accent);background:color-mix(in srgb, var(--accent-fill) 14%, var(--s1))}
.initials.official{color:var(--info);background:color-mix(in srgb, var(--info) 14%, var(--s1))}
.initials.admin{color:var(--elev);background:color-mix(in srgb, var(--elev) 14%, var(--s1))}
.plink-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--s2);color:var(--accent)}
.plink-ic.drop::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--drop) center/contain no-repeat;mask:var(--drop) center/contain no-repeat}
.persona .chev,.plink .chev{right:14px}
@media (min-width:960px){                                            /* desktop: photo left (sticky), sign-in right */
  main:has(.signin){max-width:1160px;padding-top:24px}
  main:has(.signin) .signin{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
  main:has(.signin) .signin-hero{position:sticky;top:calc(var(--top-h) + 24px);min-height:calc(100vh - var(--top-h) - 64px);padding:40px}
  main:has(.signin) .signin-hero h1{font-size:52px}
  main:has(.signin) .signin-hero h1+p{font-size:18px}
  main:has(.signin) .signin-panel h2{margin-top:8px;font-size:32px}
}

/* ---- report: three numbered step cards and a sticky send button ---- */
.steps{display:grid;gap:12px}
.steps .step{margin:0;padding:18px}
.step-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 14px;font-size:18px}
.step-n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-fill);color:#fff;font-size:14px;font-weight:700}
.step-h small{font-size:14px;font-weight:500;color:var(--fg-muted);letter-spacing:0}
.step label:first-of-type{margin-top:0}
.step p.small{margin:8px 0 0}
.step p.small:empty{display:none}
.step .photos{margin-top:12px}.step .photos img{max-width:100%;max-height:260px}
.step #cam{gap:10px;background:color-mix(in srgb, var(--accent-fill) 14%, var(--s1));color:var(--accent);border:1.5px dashed color-mix(in srgb, var(--accent-fill) 55%, var(--s1))}
.step #cam:hover:not(:disabled){background:color-mix(in srgb, var(--accent-fill) 22%, var(--s1))}
.step #cam .ic{width:24px;height:24px}
.step #rm{width:100%;margin-top:8px}
.step #gps{width:100%}
.step .map.mini{height:200px;margin-top:12px}
.steps .fab{margin-top:4px;box-shadow:var(--shadow-float)}
.result{margin:16px 0 0;border-color:color-mix(in srgb, var(--accent-fill) 45%, var(--line))}
.result h2{margin:0 0 8px}
.result:focus-visible{outline:none}                                   /* focused by the controller after a send; not a control */
.result-acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.result-acts .btn{flex:1 1 180px}

/* ---- my reports and confirm: separate cards instead of one grouped list ---- */
.stack .list{display:grid;gap:12px;background:none;border:0;border-radius:0;overflow:visible}
.stack .list>.card{margin:0;padding:16px;background:var(--s1);border:1px solid var(--line);border-radius:var(--radius)}
.rep-top{display:flex;gap:12px;align-items:flex-start}
.rep-thumb{flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover;background:var(--s2)}
.rep-main{flex:1;min-width:0}
.rep-main p{margin:0}
.rep-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px}
.rep-title strong{color:var(--fg);font-size:17px}
.rep-where{margin-top:2px!important;overflow-wrap:anywhere}
.rep-note{margin:12px 0 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--s2);color:var(--fg)}
.rep-held{margin:12px 0 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink)}
.rep-last{margin:10px 0 0}
.rep-flags{margin:6px 0 0}
.rep-flags summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:14px;font-weight:600;color:var(--fg);list-style:none}
.rep-flags summary::-webkit-details-marker{display:none}
.rep-flags summary::before{content:"";width:7px;height:7px;margin-left:2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease)}
.rep-flags[open] summary::before{transform:rotate(45deg)}
.rep-flags .flags{margin:0 0 4px}
.rep-link{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:12px -16px -16px;padding:0 16px;border-top:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);color:var(--accent);font-weight:600;text-decoration:none}
.rep-link:hover{background:var(--s2)}
.rep-link .chev{position:static;transform:none}
.check-where{margin:0 0 2px;font-size:14px;color:var(--fg-muted)}
.check-title{margin:0;font-size:18px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 8px}
.ba figure{margin:0;min-width:0}
.ba figcaption{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted)}
.ba img,.ba .none{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--s2)}
.ba .none{display:grid;place-items:center;padding:8px;color:var(--fg-muted);font-size:14px;text-align:center}
.ba-notes{margin:8px 0 0;padding-left:20px}
.ba-notes li{margin:2px 0}
.check-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
.check-acts button{min-height:52px;padding:8px 12px}