/* Additions on top of app.css: responsive (tablet / desktop) layout, account, install and login UI. */

.noscript{padding:24px; font-family:sans-serif;}

/* ---------- status row: account chip ---------- */
#acctChip{
  flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--muted); background:var(--field);
  border-radius:999px; padding:6px 12px; min-height:32px; white-space:nowrap; transition:background .2s, color .2s;
}
#acctChip:active{background:var(--field2);}
#acctChip[data-state="ok"]{color:var(--green-deep); background:rgba(52,199,89,.12);}
#acctChip[data-state="err"]{color:var(--red); background:rgba(179,38,30,.1);}
#acctChip[data-state="cta"]{color:var(--text); box-shadow:inset 0 0 0 1px var(--hair2); background:none;}
@media (hover:hover){ #acctChip:hover{background:var(--field2);} #acctChip[data-state="cta"]:hover{background:var(--field);} }
#statusRow{flex-wrap:nowrap;}
#statusRow #streakChip{flex:1 1 0; min-width:0;}
#statusRow #proBtn{margin-left:0;}
#statusRow #streakChip[hidden] + #acctChip{margin-left:auto;}

/* ---------- install banner ---------- */
#installBanner{
  display:flex; align-items:center; gap:8px; margin:4px 20px 8px; background:var(--surface);
  border:1px solid var(--hair); border-radius:14px; padding:10px 6px 10px 14px; box-shadow:var(--shadow-soft);
}
.ibText{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ibText b{font-size:14px; font-weight:600;}
#ibBody{font-size:12.5px; color:var(--muted); line-height:1.4;}

/* ---------- data / account popover ---------- */
#dataPop{max-height:calc(100% - 90px); overflow-y:auto; min-width:230px; max-width:calc(100% - 28px);}
#popAcct{padding:10px 14px 6px; display:flex; flex-direction:column; gap:2px;}
#popEmail{font-size:13.5px; font-weight:600; overflow-wrap:anywhere;}
#popPlan{font-size:12px; color:var(--muted);}
.popSep{border:0; border-top:1px solid var(--hair); margin:4px 6px;}
#dataPop .danger{color:var(--red);}
#popLegal{font-size:12.5px; color:var(--muted); padding:8px 14px 0;}
#popLegal a, .loginLegal a{color:inherit; text-underline-offset:3px;}
#popVer{font-size:11.5px; color:var(--muted); padding:6px 14px 8px;}

/* ---------- dialogs: login, install help ---------- */
.fieldInput{
  display:block; width:100%; border:none; background:var(--field); border-radius:var(--r-md);
  padding:14px 15px; font-size:16px; margin-bottom:12px; transition:box-shadow .18s;
}
.fieldInput:focus{outline:none; box-shadow:0 0 0 2.5px rgba(29,29,31,.22);}
.fieldInput[aria-invalid="true"]{box-shadow:0 0 0 2px rgba(179,38,30,.6);}
.codeInput{font-size:28px; letter-spacing:.28em; text-align:center; font-weight:300; font-variant-numeric:tabular-nums; padding-left:calc(15px + .28em);}
.formErr{color:var(--red); font-size:13.5px; line-height:1.4; margin:-4px 0 12px;}
.devNote{font-size:12px; color:var(--muted); background:var(--field); border-radius:10px; padding:8px 10px; margin:-2px 0 12px; overflow-wrap:anywhere;}
.loginLinks{display:flex; justify-content:space-between; gap:8px; margin:8px 0 6px;}
.linkBtn{font-size:14px; font-weight:500; color:var(--muted); padding:8px 6px; border-radius:8px; text-decoration:underline; text-underline-offset:3px;}
.linkBtn:disabled{opacity:.7; text-decoration:none; cursor:default;}
.ihSteps{padding-left:20px; margin-bottom:20px; display:flex; flex-direction:column; gap:10px; font-size:14.5px; line-height:1.45;}
.modalSheet .ifHelp{margin-top:6px;}
#loginWhy .pySub{margin-bottom:12px;}
#loginWhy .pyList{margin-bottom:16px;}
#loginWhy .pyList li{align-items:flex-start; line-height:1.4;}
#loginWhy .pyList svg{margin-top:1px;}
.modalSheet .loginLegal{margin-top:12px; text-align:center;}

/* ---------- empty state for the detail pane (wide layout only) ---------- */
#fvEmpty{
  position:absolute; inset:0; z-index:1; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--muted); font-size:15px; text-align:center; padding:24px;
}
#fvEmpty b{font-size:18px; color:var(--text); font-weight:600; letter-spacing:-.01em;}

/* ======================================================================
   Wide layout (tablets, laptops, desktops): list on the left, item on the right.
   JS mirrors this query in js/shell.js (WIDE_QUERY) - keep the two in sync.
   ====================================================================== */
@media (min-width:760px) and (min-height:520px){
  body{align-items:center;}
  #app{
    max-width:1120px; height:min(94vh,920px); height:min(94dvh,920px);
    border-radius:28px; box-shadow:var(--shadow-soft); border:1px solid var(--hair);
  }
  #listView{right:auto; width:380px; border-right:1px solid var(--hair); transform:none; opacity:1;}
  body.focus #listView{transform:none; opacity:1;}
  #focusView{left:380px; transform:none;}
  #backBtn{display:none;}
  .fvHead{justify-content:flex-end;}
  #peek{display:none;}
  .itemRow.current{background:var(--field);}
  .itemRow.current .itemName{font-weight:600;}
  body.noSel #fvEmpty{display:flex;}
  body.noSel #stage, body.noSel #fvHead{display:none;}
  #toast, body.focus #toast{top:auto; bottom:calc(28px + var(--sb)); transform:translate(-50%, 8px);}
  #toast.show, body.focus #toast.show{transform:translate(-50%, 0);}
  .sheetBase{max-width:520px; margin-left:auto; margin-right:auto;}
  .modal{align-items:center; justify-content:center;}
  .modalSheet{max-width:440px; border-radius:26px; padding-bottom:24px; transform:translateY(16px) scale(.98); opacity:0; transition:transform .35s var(--spring), opacity .25s;}
  .modal.show .modalSheet{transform:none; opacity:1;}
  #dataPop{top:calc(64px + var(--st));}
}

/* Wide but short (phone in landscape): keep the single-column layout, but let it use the width. */
@media (min-width:560px) and (max-height:519px){
  #app{max-width:640px;}
}