/* Off Rails v2 — additions to mockup.css for what the mockup describes but does not draw:
   toasts, dialogs, the unconfirmed banner, real page images in the reader, admin forms, drag. */

html,body{min-height:100%}
body{overscroll-behavior-y:none}
img{max-width:100%}
.center{text-align:center}
.mt8{margin-top:8px}.mt14{margin-top:14px}
.loading{padding:40px 0;text-align:center;color:var(--muted)}
.acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
button.tlink,button.danger{padding:6px 0;min-height:32px}
.tabbar button{min-height:52px}
.drow .ud button{min-height:34px}
.drow .nm{padding:8px 0;min-height:44px}
.drow .callup{min-height:36px}
.btn{min-height:44px}.btn.sm{min-height:36px}
.muted{color:var(--muted)}
.top img.rnd{width:26px;height:26px;flex:none}

/* ---- empty states ------------------------------------------------------------------------ */
.empty{padding:40px 12px 24px;text-align:center;color:var(--muted)}
.empty svg{width:48px;height:48px;stroke:var(--faint);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}

/* ---- toast (spec §4: standard toasts fine) --------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:84px;z-index:90;transform:translate(-50%,20px);opacity:0;visibility:hidden;
  max-width:min(440px,calc(100% - 32px));background:var(--text);color:#fff;border-radius:var(--r);
  padding:11px 16px;font-size:14.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:opacity .18s,transform .18s,visibility 0s linear .18s}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s,transform .18s}
.toast.err{background:var(--accent-dark)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---- inline field errors (spec §4) ----------------------------------------------------------- */
.field .err{color:var(--accent);font-size:13px;margin-top:5px}
.field.bad input,.field.bad textarea{border-color:var(--accent)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}

/* ---- unconfirmed banner (spec §7: slim, with a resend link) ------------------------------------ */
.banner{background:#E7EBF4;color:var(--link);border-radius:var(--r);padding:9px 12px;font-size:13.5px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 0}
.banner button{color:var(--link);font-weight:600;text-decoration:underline;min-height:32px}

/* ---- dialogs ------------------------------------------------------------------------------ */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(26,24,21,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.dlg{background:var(--bg);width:min(440px,100%);max-height:calc(100vh - 32px);overflow-y:auto;border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);padding:18px}
.dlg h2{font-size:18px;font-weight:700;margin-bottom:10px}
.dlg .msg{font-size:15.5px;margin-bottom:16px}
.dlg .dacts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.dlg .dacts .btn{flex:1;min-width:120px}
.dlg .sw{margin-bottom:14px}
.dlg .extra{border-top:1px solid var(--border);margin-top:16px;padding-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}

/* ---- sign in ------------------------------------------------------------------------------- */
.authwrap img.logo{width:76px;height:76px}
.wordmark{font-family:var(--f-brand);font-weight:700;font-size:40px;letter-spacing:.02em;transform:rotate(-1.6deg);margin-top:10px}
.sentcard{margin-top:18px;text-align:center}
.sentcard p{color:var(--muted);margin-bottom:16px}

/* ---- the reader: real page images ------------------------------------------------------------ */
#scr-bulletins{touch-action:pan-x pan-y pinch-zoom}
.rchrome .brand{font-family:var(--f-brand);color:#C05545;font-size:13px}
.rchrome .ti{text-align:center;flex:1}
.rpager{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){.rpager{scroll-behavior:auto}.rchrome,.rfoot,.tabbar{transition:none}}
.rcell{justify-content:flex-start}
.rcell .rstack{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.rcell.multi .rstack{padding:56px 0 150px}
.rdoc{width:min(100vw, calc(100vh * var(--ar, .515)));width:min(100vw, calc(100svh * var(--ar, .515)));
  aspect-ratio:var(--ar, .515);background:#EDE2C6;position:relative}
.rdoc img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.rcell.zoomed{overflow:auto}
.rcell.zoomed .rstack{align-items:flex-start;margin:0}
.rcell.zoomed .rdoc{width:calc(min(100vw, calc(100vh * var(--ar, .515))) * 2.2)}
.rnav{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:46px;height:64px;color:#EDE7DA;border-radius:10px;
  background:rgba(26,24,21,.55);font-size:26px;display:none;transition:opacity .25s}
.rnav.prev{left:12px}.rnav.next{right:12px}
@media(min-width:720px){.rnav{display:block}}
body.immersed .rnav{opacity:0;pointer-events:none}
.rnav[disabled]{opacity:.25}
.rdot{padding:0;border:0;background:none;display:block}
.rempty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#B4AC9C;padding:24px;text-align:center}
.rempty svg{width:56px;height:56px;stroke:#716B5F;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
#scr-bulletins :focus-visible{outline-color:#EDE7DA}

/* ---- menu --------------------------------------------------------------------------------- */
#mlist .mrow:last-child{border-bottom:0}

/* ---- draft ---------------------------------------------------------------------------------- */
.drow{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.drow .grip{color:var(--faint);font-size:15px;letter-spacing:-2px;padding:0 2px;cursor:grab}
.drow.dragging{position:relative;z-index:10;background:var(--card);border-radius:var(--r);box-shadow:0 8px 22px rgba(0,0,0,.15)}
.drag-list.is-dragging{touch-action:none}
.av{overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover}
.saved{color:var(--ok);font-size:13px;font-weight:600;transition:opacity .3s}
.psheet .pname{font-size:24px;font-weight:700}

/* ---- admin ---------------------------------------------------------------------------------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
table.tbl td.grip{cursor:grab;color:var(--faint);width:18px;touch-action:none;user-select:none}
table.tbl tr.dragging td{background:#FBF8F1;box-shadow:0 6px 16px rgba(0,0,0,.12)}
table.tbl .thumb{width:34px;height:auto;border:1px solid var(--border);border-radius:3px;display:block}
table.tbl td.num{font-weight:700;white-space:nowrap}
table.tbl td .mark{color:var(--accent);font-weight:600;font-size:12.5px;white-space:nowrap}
button.chip{cursor:pointer;min-height:26px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.filters .field{margin:0;flex:1;min-width:150px}
.filters .field select{padding:9px 32px 9px 10px;font-size:14.5px}
.pdfslot{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:10px}
.pdfslot img{width:52px;border:1px solid var(--border);border-radius:3px}
.pdfslot .info{flex:1;font-size:14px;color:var(--muted)}
.ov .n.ok{color:var(--ok)} .ov .n.lock{color:var(--accent)}
.card .body{white-space:pre-wrap;overflow-wrap:anywhere}