/* Stand-alone additions: base reset, banners, settings, share sheet, print. */
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;min-height:100vh}
img{max-width:100%}
[hidden]{display:none!important}
.top{top:0}
.tabs{flex-wrap:wrap}
@media (max-width:520px){.tabs button{padding:6px 11px}}

/* Banners */
.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--lapis-wash);border:1px solid var(--rule);border-radius:var(--radius);padding:14px 18px;margin-bottom:22px}
.banner p{margin:0;flex:1 1 260px;font-size:14.5px}
.banner b{font-family:var(--display);font-weight:400;font-size:17px}
.banner .row{display:flex;gap:8px;flex-wrap:wrap}

/* Settings */
.settings{max-width:720px;display:flex;flex-direction:column;gap:30px}
.settings h2{font-size:34px}
.set{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--rule);padding-top:22px}
.set h3{font-size:21px}
.set p{margin:0;font-family:var(--read);font-size:17px;line-height:1.6;max-width:62ch}
.set .hint{font-family:var(--ui);font-size:13px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.key{font-family:"IBM Plex Sans",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;font-size:clamp(17px,4.4vw,24px);letter-spacing:.06em;font-weight:600;background:var(--surface);border:1px dashed var(--gilt);border-radius:8px;padding:14px 16px;overflow-wrap:normal;word-break:keep-all;user-select:all}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--lapis)}
.syncstate{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.syncstate::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.syncstate.ok::before{background:var(--lapis)}
.syncstate.warn{color:var(--rubric)}
.syncstate.warn::before{background:var(--rubric)}
.field.keyin{font-family:"IBM Plex Sans",ui-monospace,Menlo,monospace;letter-spacing:.05em;text-transform:uppercase}

/* Entry: group selection */
.pick-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:12px 14px;margin:-8px 0 26px;position:sticky;top:76px;z-index:3}
.pick-bar span{font-size:13px;color:var(--muted);margin-right:auto}
.pickable{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--rule)}
.pickable input{width:18px;height:18px;margin-top:5px;accent-color:var(--lapis)}
.pickable .card-btn{font-size:12.5px;border:1px solid var(--rule);background:none;border-radius:999px;padding:3px 11px;cursor:pointer;color:var(--muted)}
.pickable h4{margin:0 0 4px}
.picking .rsec .pick-off{display:none}

/* Share sheet */
.modal{position:fixed;inset:0;z-index:40;background:color-mix(in srgb, var(--ink) 45%, transparent);display:grid;place-items:center;padding:16px}
.sheet{background:var(--paper);border-radius:14px;padding:18px;max-width:460px;width:100%;max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:14px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet-head h3{font-size:20px}
.sheet img{border-radius:8px;border:1px solid var(--rule);display:block}

/* Print: only the open study (or the group selection) */
@media print{
  :root{padding:0}
  body{background:#fff;color:#000}
  .top,.actions,.back,.pick-bar,.toast,.modal,.view:not(#view-entry),.pickable input,.card-btn,.no-print{display:none!important}
  #view-entry{display:block!important;padding:0}
  .reading{max-width:none}
  .rsec{break-inside:avoid-page}
  .print-picked .rsec .pickable:not(.on),.print-picked .rsec:not(:has(.pickable.on)){display:none!important}
}
.pickable input,.pickable .card-btn{display:none}
.picking .pickable input,.picking .pickable .card-btn{display:inline-block}
.pickable{grid-template-columns:minmax(0,1fr)}
.picking .pickable{grid-template-columns:auto minmax(0,1fr) auto}
.pickable.on{background:var(--lapis-wash);border-radius:6px}

#syncPanel{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
#syncPanel .key,#syncPanel > p,#syncPanel > div{align-self:stretch}

/* Phones: header scrolls away so the work gets the screen */
@media (max-width:640px){
  .top{position:static}
  .pick-bar{top:8px}
  .brand h1{font-size:22px}
}

/* Welcome */
.welcome{position:fixed;inset:0;z-index:50;background:var(--paper);display:grid;place-items:center;padding:20px;overflow:auto}
.wsheet{width:100%;max-width:460px;display:flex;flex-direction:column;gap:28px;min-height:min(560px,100%)}
.wslide{display:flex;flex-direction:column;gap:14px;flex:1}
.wslide h2{font-size:34px;line-height:1.1}
.wslide p{margin:0;font-family:var(--read);font-size:18px;line-height:1.6}
.wslide .wlede{font-size:22px}
.wslide .hint{font-family:var(--ui);font-size:13.5px}
.wicon{border-radius:18px;width:72px;height:72px}
.wsteps{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:18px}
.wsteps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:baseline}
.wsteps .numeral{font-size:30px}
.wsteps b{font-weight:500;font-size:16px}
.wsteps em{font-family:var(--read);color:var(--rubric);font-size:18px}
.wsteps p{font-size:16.5px;color:var(--muted)}
.wfoot{display:flex;flex-direction:column;gap:16px}
.wdots{display:flex;gap:8px}
.wdots span{width:7px;height:7px;border-radius:50%;background:var(--rule)}
.wdots span.on{background:var(--rubric)}
#wNav{justify-content:space-between}
.wend{display:flex;flex-direction:column;gap:10px}
.wend .btn{padding:12px 16px;font-size:15px}
.linkbtn{border:0;background:none;color:var(--lapis);font:500 14px var(--ui);cursor:pointer;padding:6px;align-self:center}
@media (prefers-reduced-motion:no-preference){.wslide:not([hidden]){animation:stepIn .45s cubic-bezier(.2,.7,.2,1)}}

/* Study tips (first study only) */
.tip{display:flex;gap:12px;align-items:flex-start;background:var(--lapis-wash);border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.5}
.tip::before{content:"Tip";font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lapis);padding-top:2px}
.tip p{margin:0;flex:1}
.tip button{border:0;background:none;color:var(--muted);font:500 12.5px var(--ui);cursor:pointer;white-space:nowrap}

/* Account forms */
.acct-form{display:flex;flex-direction:column;gap:10px;align-self:stretch;max-width:420px}
.acct-form label{font-size:14px;font-weight:500}
.acct-form .field{font-family:var(--ui);font-size:16px}
.acct-form .err{color:var(--rubric);font-size:13.5px;margin:0}
.acct-email{font-family:var(--display);font-size:18px}
details.keyonly{align-self:stretch}
details.keyonly summary{cursor:pointer;font-size:13.5px;color:var(--muted)}
details.keyonly[open]{display:flex;flex-direction:column;gap:10px}