/* dtaas app: additions to app.css (approved rev2), by Juno, Oct 30. Load after app.css. Auth, dialog, error, alert, progress, hidden, no-JS bar. Same tokens, no new colors. */

/* auth: a single centered card, no tabs, no balance chip */
.auth{min-height:calc(100vh - 64px);display:grid;place-items:start center;padding:48px 16px 72px}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px}
.auth-card h1{font-size:28px}
.auth-card .sub{margin-bottom:24px}
.auth-card .btn{width:100%}
.auth-alt{margin:20px 0 0;text-align:center;color:var(--ink-2);font-size:14.5px}
.auth-alt a{font-weight:650}
.auth-sep{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-2);font-size:13px}
.auth-sep:before,.auth-sep:after{content:"";flex:1;border-top:1px solid var(--line)}
.field-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.field-row a{font-size:14px;font-weight:650}

/* field errors: put id on .err, point aria-describedby at it, set aria-invalid=true on the input */
.err{margin:6px 0 0;color:var(--red);font-size:13.5px;font-weight:600;display:flex;gap:6px;align-items:flex-start}
.err:before{content:"!";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:16px;text-align:center}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--red)}

/* banners: role=alert for .alert-err, role=status for the rest. Icon is a text glyph so color is never the only cue */
.alert{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;padding:14px 16px;border-radius:14px;border:1px solid;font-size:15px;line-height:1.45}
.alert b{display:block;margin-bottom:2px}
.alert:before{flex:none;width:22px;height:22px;border-radius:50%;color:#fff;font-size:13px;font-weight:800;line-height:22px;text-align:center}
.alert-err{background:var(--red-bg);border-color:#f2b8b3;color:#7a1810}
.alert-err:before{content:"!";background:var(--red)}
.alert-warn{background:var(--amber-bg);border-color:#ecd08a;color:#5e3d00}
.alert-warn:before{content:"!";background:var(--amber)}
.alert-ok{background:var(--green-bg);border-color:#a9dcc3;color:#0a5232}
.alert-ok:before{content:"\2713";background:var(--green)}
.alert-info{background:var(--blue-bg);border-color:#bccaf2;color:#16358f}
.alert-info:before{content:"i";background:var(--blue)}
.alert .linkbtn{min-height:0;color:inherit}

/* error page (404, 500, expired link): centered, one primary action */
.errpage{max-width:520px;margin:0 auto;padding:72px 16px;text-align:center}
.errpage .code{display:inline-block;margin-bottom:16px;padding:4px 12px;border-radius:999px;background:var(--blue-bg);color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.04em}
.errpage h1{font-size:30px;margin-bottom:10px}
.errpage p{margin:0 0 24px;color:var(--ink-2)}
.errpage .btn{width:auto}

/* dialog: use native <dialog> + showModal(); focus and Esc come free. Label with aria-labelledby on the h2 */
dialog.dlg{width:calc(100% - 32px);max-width:460px;padding:0;border:0;border-radius:20px;background:var(--card);color:var(--ink);box-shadow:0 30px 80px -20px #0d1a2e88}
dialog.dlg::backdrop{background:#0d1a2ecc}
.dlg-body{padding:28px 28px 8px}
.dlg-body h2{margin:0 0 8px;font-size:21px;line-height:1.25;letter-spacing:-.015em}
.dlg-body p{margin:0 0 16px;color:var(--ink-2)}
.dlg-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;padding:16px 28px 28px}
.btn.danger{background:var(--red);box-shadow:none}
.btn.danger:hover{background:#8f1c12}
@media (max-width:480px){
  .auth{padding-top:24px}.auth-card{padding:24px 20px}
  .dlg-actions{flex-direction:column}.dlg-actions .btn{width:100%}
}
@media (prefers-reduced-motion:no-preference){dialog.dlg[open]{animation:dlg-in .16s ease-out}}
@keyframes dlg-in{from{opacity:0;transform:translateY(8px)}}

/* base only styles text/tel/email; these types need the same field look */
input[type=password],input[type=number],input[type=search],input[type=url]{display:block;width:100%;min-height:48px;padding:11px 14px;border:1.5px solid #7b899e;border-radius:12px;background:#fff;font-size:16px}
input[type=password]:focus-visible,input[type=number]:focus-visible,input[type=search]:focus-visible,input[type=url]:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
input[type=password][aria-invalid=true],input[type=number][aria-invalid=true]{border-color:var(--red)}

/* ---- v2: integration needs from Aria (Oct 30) ---- */

/* authored display rules (.btn, flex layouts) must never reveal JS-only or inactive elements */
[hidden]{display:none!important}

/* no JS: nothing measures the bar, so let it sit in the page flow and keep the footer and fields clear */
html:not(.js) .sendbar{position:static;visibility:visible;box-shadow:none;border-top:1px solid var(--line)}

/* native progress: <progress class="prog" value max>; also [data-upload-progress] (no value = indeterminate) */
progress.prog,progress[data-upload-progress]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;margin-top:8px;border:0;border-radius:99px;overflow:hidden;background:var(--blue-bg);color:var(--blue);accent-color:var(--blue)}
progress.prog::-webkit-progress-bar,progress[data-upload-progress]::-webkit-progress-bar{background:var(--blue-bg);border-radius:99px}
progress.prog::-webkit-progress-value,progress[data-upload-progress]::-webkit-progress-value{background:var(--blue);border-radius:99px;transition:width .3s}
progress.prog::-moz-progress-bar,progress[data-upload-progress]::-moz-progress-bar{background:var(--blue);border-radius:99px}
progress[data-upload-progress]{height:8px;margin:10px 0 0}
@media(forced-colors:active){
  progress.prog,progress[data-upload-progress]{border:1px solid CanvasText;background:Canvas;color:Highlight}
  progress.prog::-webkit-progress-bar,progress[data-upload-progress]::-webkit-progress-bar{background:Canvas}
  progress.prog::-webkit-progress-value,progress[data-upload-progress]::-webkit-progress-value{background:Highlight}
  progress.prog::-moz-progress-bar,progress[data-upload-progress]::-moz-progress-bar{background:Highlight}
}

/* dialogs: never taller than the visible viewport (short screens, on-screen keyboard); the dialog scrolls, the page behind does not */
dialog.dlg{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
dialog.dlg:modal{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
/* full-page preview: wider, image fits the width and keeps its aspect ratio */
dialog.dlg-wide,dialog.dlg:has(img[data-full-page]){max-width:min(920px,calc(100% - 32px))}
.dlg-body img[data-full-page]{display:block;max-width:100%;width:min(100%,800px);height:auto;margin:0 auto;border:1px solid var(--line);border-radius:8px;background:#fff}
dialog.dlg:has(img[data-full-page]) .dlg-body{padding-bottom:20px}
dialog.dlg:has(img[data-full-page]) .dlg-actions{position:sticky;bottom:0;background:var(--card);box-shadow:0 -10px 16px -12px #0d1a2e44}


/* ---- v3: reconciled with approved rev2 and Aria's contract read (Oct 30) ---- */
/* invalid border on every input type (the late generic type rules above would otherwise win) */
input[type=search][aria-invalid=true],input[type=url][aria-invalid=true],input[type=password][aria-invalid=true],input[type=number][aria-invalid=true]{border-color:var(--red)}
/* 44px targets for the inline auth and alert actions */
.field-row a,.auth-alt a{display:inline-flex;align-items:center;min-height:44px}
/* Keep legal links together when they fit, but allow wrapping inside a link when enlarged text exceeds the sentence width. */
.auth-alt.legal a{display:inline-block;max-width:100%;min-height:0;white-space:normal}
.alert .linkbtn{min-height:44px}
/* an anchor styled as .linkbtn is inline, which ignores min-height */
.alert a.linkbtn{display:inline-flex;align-items:center;min-height:44px}

/* real thumbnails: <a data-page-preview><img class="pg"></a> replaces the placeholder button; intrinsic images fit the grid cell */
.thumbs a{display:block;max-width:100%;border-radius:6px;cursor:zoom-in}
.thumbs img.pg{display:block;width:100%;max-width:100%;height:auto;padding:0;object-fit:contain}

/* ---- reflow at 320px, 200% text and WCAG text spacing (Aria's matrix) ---- */
/* timeline: the time sits right-aligned while it fits; when the row is narrow (measured in the row's own em, so text zoom counts) it drops under the text and may wrap */
.tl{container-type:inline-size}
@container (max-width:17em){
  .tl li{grid-template-columns:28px minmax(0,1fr)}
  .tl time{grid-column:2;white-space:normal;overflow-wrap:anywhere}
}
/* auth: the label/"Forgot it?" row wraps and the card may shrink below its content */
.auth{grid-template-columns:minmax(0,1fr)}
.auth-card{min-width:0}
.field-row{flex-wrap:wrap}
/* long, escaped user text in errors and alerts wraps anywhere instead of widening the page */
.errsum,.errsum a,.alert,.err{overflow-wrap:anywhere}

/* long status labels (e.g. "Check your files") in the detail header wrap instead of widening the page */
.detail .head .badge{white-space:normal;max-width:100%;overflow-wrap:anywhere}

/* ---- v8: design read of the Aria candidate (Oct 30) ---- */
/* checkboxes: a real 44px target with a 22px box, so "Include a free cover page" and the send authorization are easy to hit and see */
label:has(>input[type=checkbox]){display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer}
label>input[type=checkbox]{flex:none;width:22px;height:22px;margin:0;accent-color:var(--blue)}
/* the send authorization is a required choice: give it its own bordered row inside the dialog */
.dlg-body label:has(>input[type=checkbox]){padding:14px;border:1.5px solid #7b899e;border-radius:12px;background:#fafbfd;margin-top:6px}
.dlg-body label:has(>input[type=checkbox]:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
/* a field that follows a two-column row (cover Note under Attention and Subject) needs the same gap as every other field */
.two+.field{margin-top:18px}

/* ---- v9: invalid password/number/search/url fields match text/email (2px red border + tint from the base rule) ---- */
input[type=password][aria-invalid=true],input[type=number][aria-invalid=true],input[type=search][aria-invalid=true],input[type=url][aria-invalid=true]{border-width:2px;background:#fffafa}

/* ---- v10: guest pay screen rhythm (Aria copy child 3cade68) ---- */
/* the terms line and the pay button need a gap; a field right after a help/refund line needs one too */
.help+.btn.big,.fine+.btn.big{margin-top:14px}
.help+.field{margin-top:14px}
/* consecutive consent checkboxes read as one group: the 44px rows already give the spacing */
.field:has(>label>input[type=checkbox]){margin-bottom:2px}
.field:has(>label>input[type=checkbox]):last-child{margin-bottom:0}
/* Picked files stand out in blue until the preview adds them (Alan, Oct 30). */
.drop.picked{border-style:solid;border-color:var(--blue);background:var(--blue-bg)}
[data-selected-files]:not(:empty){margin-top:10px;padding:10px 14px;border:1px solid var(--blue);border-left-width:5px;border-radius:10px;background:var(--blue-bg);color:var(--ink);font-size:15px;font-weight:600}

/* a11y (2.4.11): "Choose files" is the label of a visually hidden input. Browsers scroll to the 1px input, which sits above the label, so the sticky bar could cover the button. Keep room for the label below it. */
#pick{scroll-margin-bottom:72px}
/* a11y (1.4.4/1.4.10): at 200% text on a 320px screen the receipt's label column took 70% of the width and the SHA-256 wrapped to three characters a line. Cap the label column; the value keeps the rest. Normal sizes are unchanged. */
.rcpt dl{grid-template-columns:fit-content(40%) minmax(0,1fr)}

/* ---- v11: the guest consent ticks as one joined group (Alan, Oct 30) ---- */
/* one border round the group, a hairline between rows, and the focus ring drawn inside the row so the border never hides it */
.ticks{margin:14px 0 0;border:1.5px solid #7b899e;border-radius:12px;background:#fafbfd;overflow:hidden}
.ticks .field{margin:0}
.ticks label:has(>input[type=checkbox]){margin:0;padding:12px 14px;border:0;border-radius:0;background:none}
.ticks>.field~.field,.ticks>label:has(>input[type=checkbox])~label:has(>input[type=checkbox]){border-top:1px solid var(--line)}
.ticks label:has(>input[type=checkbox]:focus-visible){outline:3px solid var(--blue);outline-offset:-3px}
/* the first and last rows take the box's inner radius, so the ring and the error tint follow the rounded corners */
.ticks>.field:first-child,.ticks>.field:first-child label,.ticks>label:first-child{border-radius:10px 10px 0 0}
.ticks>.field:last-child,.ticks>.field:last-child label:last-child,.ticks>label:last-child{border-radius:0 0 10px 10px}
.ticks>.field:only-child,.ticks>.field:only-child label:last-child,.ticks>label:only-child{border-radius:10px}
.ticks .err{margin:0;padding:0 14px 12px;color:var(--red)}
/* a row in error: pale red tint and a 4px red bar on the left edge, plus the error text under it (never colour alone); the box border stays */
.ticks .field:has(input[aria-invalid=true]),.ticks>label:has(input[aria-invalid=true]),.ticks>.err{background:#fffafa;box-shadow:inset 4px 0 0 var(--red)}
/* v11: long words in a tick label or its error wrap at 320px and 200% text instead of hiding behind the group's overflow */
.ticks label,.ticks .err{overflow-wrap:anywhere}
/* Send confirmation uses the same consent rows and spacing as the pay card. */
.send-confirmation>.dlg-body{padding-bottom:0}
.send-confirmation>.dlg-body>p:last-child{margin-bottom:0}
.send-confirmation>form>.dlg-body:first-of-type{padding-top:0}
.send-confirmation .ticks+.help{margin-top:6px}
/* Neutral states: drafts, canceled faxes and finished tries are history, not warnings (#4a5568 on #eef1f6 is 6.9:1). */
.b-muted{background:#eef1f6;color:#4a5568}
.dot.past{background:#eef1f6;color:#4a5568}
@media(forced-colors:active){.b-muted,.dot.past{border:1px solid CanvasText}}
/* The collapsed redial row opens to list each try. */
.tl-each{margin-top:4px;font-size:14px;color:var(--ink-2)}
.tl-each summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--blue);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.tl-each ul{margin:0;padding-left:20px}
.tl .tl-each li{display:list-item;padding:0;grid-template-columns:none}
.tl .tl-each li:after{content:none}
/* F11: the guest start screen states the price up front */
.head .price-line{margin:8px 0 0;color:var(--ink);font-weight:650}
/* UXE-14: the sender-name count turns into a warning past the limit */
.help.over [data-name-count]{color:var(--red);font-weight:650}
/* UXE-20: Sign out in the header, after the balance (shared office PCs). Phones: next to the logo, the balance on its own row. */
.bar .out-top{margin:0}
.bar .out-top .linkbtn{color:var(--ink-2);font-weight:550;font-size:15px}
.bar .out-top .linkbtn:hover{color:var(--ink)}
@media(max-width:900px){
  .bar .out-top{order:1;margin-left:auto}
  .bar .wrap:after{content:"";order:2;flex-basis:100%;height:0;margin-top:-10px}
  .bar .bal{order:3}
  .bar .tabs{order:4}
}
/* UXT-30: signed out, the Sign in button sits at the right end of the bar, not against the logo */
.bar .wrap>.btn.ghost.small{margin-left:auto}
/* Zeva: the admin lookup JSON wraps instead of widening the page at 320 px */
.admin-lookup{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}

/* Approved polish viewer and current/next-try panels (Juno, October 31). */
.send-now,.send-next{border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.send-now{background:var(--blue-bg);border-color:#c4d0f2}
.send-now.waiting{background:#f8f9fb;border-color:var(--line)}
.send-kicker{margin:0 0 6px;color:var(--ink-2);font-weight:650;font-size:13px}
.send-now h3,.send-next h3{margin:0;font-size:19px;letter-spacing:-.015em;line-height:1.35}
.send-now>p:not(.send-kicker),.send-next>p:not(.send-kicker){margin:6px 0 0;font-size:14px}
.send-now>p.updated{color:var(--ink-2);font-size:13px;margin-top:12px}
.send-now time,.send-next time{font-variant-numeric:tabular-nums}
.detail>.history-title{margin:24px 0 16px;font-size:16px}
.send-next{background:white}
.detail .money-line{margin-top:4px}
dialog.dlg.viewer,dialog.dlg.viewer:modal{position:fixed;inset:0;width:calc(100% - 48px);height:calc(100dvh - 48px);max-height:none;max-width:1100px;margin:auto;padding:0;overflow:hidden;border-radius:18px}
dialog.viewer[open]{display:flex;flex-direction:column}
.viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);flex:none}
.viewer-head h2{margin:0;font-size:19px}
.viewer-head p{margin:2px 0 0;color:var(--ink-2);font-size:13px}
.viewer-head .btn{flex:none}
.viewer-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);flex:none}
.viewer-tools .btn{min-width:44px;padding:8px 14px;border-radius:10px}
.viewer-tools .btn[aria-pressed=true]{border:2px solid var(--blue);background:var(--blue-bg);color:var(--blue)}
.viewer-tools label{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}
.viewer-tools select{width:auto;min-height:44px;padding:8px 30px 8px 10px;font-size:14px;border-radius:10px}
.viewer-help{margin:0 0 0 auto;color:var(--ink-2);font-size:13px}
.page-stage{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#e9edf3;padding:16px;touch-action:pan-x pan-y pinch-zoom}
.page-stage img{display:block;max-width:none;height:auto;margin:0 auto;background:white;box-shadow:0 2px 12px #0d1a2e22}
@media(max-width:600px){
  dialog.dlg.viewer,dialog.dlg.viewer:modal{width:100%;height:100dvh;max-width:none;border-radius:0}
  .viewer-head{padding:12px 16px}
  .viewer-tools{padding:10px 16px;gap:8px}
  .viewer-help{flex-basis:100%;margin:0}
  .send-now,.send-next{padding:16px}
}
@media(forced-colors:active){.send-now,.send-next,.page-stage img{border:1px solid CanvasText}.viewer-tools .btn[aria-pressed=true]{outline:2px solid Highlight;outline-offset:1px}.page-stage{background:Canvas}}

.viewer-head>div,.viewer-tools label{min-width:0}
.viewer-head h2,.send-now h3,.send-next h3{overflow-wrap:anywhere}
.page-stage img[data-full-page]{border:0;border-radius:0}
.viewer-tools .btn,.viewer-head .btn{min-height:44px}