/* FedM8 acceptance screens (docs/legal/ACCEPTANCE-CONTRACT.md §L2.4, §L2.5, §L2.12).
   Existing tokens only: var(--ink), var(--ink-2), var(--line), var(--surface), and each page's own focus ring.
   Rows are at least 44px tall, each checkbox is a 24px target, links and buttons outside a sentence are 44px tall,
   and nothing forces a horizontal scroll at 320px. */

/* Sign-up form (os.html #auth-form): the optional digest row first, the required box last, then the note. */
.auth-legal-box{margin:6px 0 2px}
.auth-check.auth-legal-row{align-items:flex-start;color:var(--ink);font-size:15px;line-height:1.45}
.auth-check.auth-legal-row input{width:24px;height:24px;margin:0;flex:0 0 auto}
.auth-check.auth-legal-row label{flex:1 1 auto;min-width:0;padding-top:1px;color:var(--ink)}
.auth-check.auth-legal-row a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.auth-legal-note{margin:4px 0 10px;color:var(--ink);font-size:14px;line-height:1.45}
#auth-oauth-legal{margin:10px 0 0}
#auth-card.is-release #auth-oauth-legal{display:none}

/* The upcoming banner (#legal-banner) and the tier.js banner on pages that load this file. */
.legal-banner,.fedm8-terms-banner{margin:0 0 14px;padding:10px 14px;border:1px solid var(--line,#d0d7de);border-radius:8px;background:var(--surface,#fff);color:var(--ink,#0f1419);font-size:14px;line-height:1.5}
.legal-banner p,.fedm8-terms-banner p{margin:0;color:var(--ink,#0f1419)}
.legal-banner a,.fedm8-terms-banner a{color:var(--ink,#0f1419);font-weight:600;text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;min-height:44px}
/* tier.js adds this file to pages that have no acceptance handler; there the bar sits under the site header, inside the
   page margins (the fallbacks cover pages without the tokens). */
.fedm8-terms-banner{max-width:1120px;margin:12px auto;box-sizing:border-box}
@media (max-width:1160px){.fedm8-terms-banner{margin:12px 16px}}

/* #/legal, the receipt, and the admin panel. */
.legal-page,.legal-receipt-view{max-width:720px;color:var(--ink)}
.legal-h{font-size:20px;line-height:1.3;margin:0 0 8px;color:var(--ink)}
.legal-h:focus{outline:none}
.legal-h:focus-visible{outline-offset:4px}
.legal-h3{font-size:15px;line-height:1.35;margin:18px 0 6px;color:var(--ink)}
.legal-lead{font-size:15px;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.legal-line{font-size:14px;line-height:1.5;margin:8px 0;color:var(--ink)}
.legal-note{font-size:14px;line-height:1.45;margin:6px 0 10px;color:var(--ink)}
.legal-docs,.legal-changes,.legal-receipts,.legal-footer-list{list-style:none;margin:0;padding:0}
.legal-doc{font-size:14px;line-height:1.5;margin:6px 0;color:var(--ink);overflow-wrap:anywhere}
.legal-doc a,.legal-check a,.legal-line a,.legal-receipt a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* The document titles are links outside a label sentence: 44px tall (§L2.12). The padding (14px around a 17px text box) stays inside the row's own
   padding, so the text still wraps as one sentence on a phone and no two targets overlap. */
.legal-docs > .legal-doc{margin:0;padding:12px 0}
.legal-doc > a{padding:14px 0}
.legal-changes li{margin:8px 0;font-size:14px;line-height:1.5;color:var(--ink)}
.legal-changes p{margin:2px 0 0;color:var(--ink)}
.legal-sep{border:0;border-top:1px solid var(--line);margin:12px 0}
.legal-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;margin:10px 0;font-size:15px;line-height:1.45;color:var(--ink)}
.legal-check input{width:24px;height:24px;margin:0;flex:0 0 auto}
/* A refused submit focuses the box; keep it clear of os.html's fixed header (WCAG 2.4.11). */
.legal-check,.legal-check input{scroll-margin-top:96px;scroll-margin-bottom:96px}
.legal-check label{flex:1 1 auto;min-width:0;padding-top:1px;color:var(--ink);font-size:15px;font-weight:400;margin:0}
.legal-check input[aria-invalid="true"],.auth-check.auth-legal-row input[aria-invalid="true"]{outline:2px solid #b42318;outline-offset:2px}
.legal-actions{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.legal-actions .btn,.legal-footer .btn,.legal-digest .btn{min-height:44px}
.legal-actions .btn[aria-disabled="true"],.legal-digest .btn[aria-disabled="true"]{opacity:.65;cursor:progress}
.legal-status:focus{outline:none}
.legal-status:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.legal-status{min-height:1.4em;margin:6px 0;font-size:14px;line-height:1.45;color:var(--ink)}
.legal-receipt{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:6px 14px;margin:10px 0;font-size:14px;line-height:1.5}
.legal-receipt dt{font-weight:600;color:var(--ink)}
.legal-receipt dd{margin:0;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.legal-mono{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink);overflow-wrap:anywhere;word-break:break-all}
.legal-receipt-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0;font-size:14px;color:var(--ink)}
.legal-receipt-row a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal-footer{margin:22px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.legal-footer-h{font-size:15px;margin:0 0 4px;color:var(--ink)}
.legal-footer-list li{margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.legal-footer-list a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal-owner-line{display:block;padding:10px 0;color:var(--ink)}
.legal-owner-line + a{min-height:44px}
.legal-decline{max-width:640px}
.legal-digest{margin:8px 0}
.legal-org-row{margin:12px 0 4px}
.legal-dialog{max-width:min(560px,calc(100vw - 32px));border:1px solid var(--line);border-radius:10px;padding:18px 20px;color:var(--ink);background:var(--surface,#fff)}
.legal-dialog::backdrop{background:rgba(15,20,25,.45)}

/* Admin console (#legal-panel): its own tokens are on :root (assets/page-admin.css). It is not a tab .panel (those are
   display:none until switchTab marks one .on), so it shows above whichever tab is open; on the Chat tab, whose content
   is a full-height flex column, it takes at most 60% of the height and scrolls, so the chat below keeps its room. */
.legal-admin{display:block;margin:0 0 16px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:#fff}
.legal-admin[hidden]{display:none}
body.tab-chat #legal-panel{flex:0 0 auto;max-height:60vh;overflow:auto}
.legal-admin :focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* os.html while an agreement is pending (body.legal-pending, assets/os-boot.js): only the Terms page, Account,
   Notifications and Support open, so the section links that would only bounce back to the Terms page are hidden. */
body.legal-pending #fd-nav,body.legal-pending #fd-mobile-dock,body.legal-pending .fd-header-actions,
body.legal-pending #fd-public-tabs,body.legal-pending #subnav{display:none !important}
/* The plan pill is held back while pending (assets/os-boot.js paintSidebar); .sb-foot .pill sets display. */
#sb-plan[hidden]{display:none}

@media (max-width:520px){
  .legal-receipt{grid-template-columns:minmax(0,1fr)}
  .legal-receipt dd{margin-bottom:6px}
  .legal-h{font-size:18px}
}