:root{--ink:#17202b;--muted:#657180;--navy:#132a46;--blue:#1769e0;--line:#dfe5eb;--soft:#f5f7f9;--green:#087a55;--amber:#a76200;--red:#b42318;--white:#fff}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#f4f6f8;font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.hidden{display:none!important}.topbar{height:68px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;box-shadow:0 2px 12px #0a172633}.brand,.top-actions{display:flex;align-items:center;gap:12px}.brand{color:inherit;text-decoration:none}.brand:hover small{color:#dbe6f2}.brand:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:9px}.brand img.mark.logo-mark{display:block;width:38px;height:38px;flex:0 0 38px;border:0;border-radius:8px;background:none;object-fit:cover}.brand div{display:flex;flex-direction:column}.brand small{color:#b9c7d7;font-size:12px}.mode{background:#ffdf9e;color:#624000;border-radius:999px;padding:6px 11px;font-weight:800;font-size:11px;letter-spacing:.06em}.account{font-size:13px;color:#d8e1eb}.link-button{background:transparent;padding:7px;color:#fff;border:1px solid #ffffff44}.auth-wrap{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:28px}.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:0 14px 40px #132a4614}.auth-card h1{font-size:29px}.auth-card form{margin-top:22px}.shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 68px)}aside{background:#fff;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column}.new-case,button{border:0;border-radius:7px;background:var(--blue);color:#fff;padding:11px 15px;font-weight:700;cursor:pointer;font-size:14px}.new-case{width:100%;margin-bottom:24px}.nav{width:100%;text-align:left;background:transparent;color:#465361;margin:2px 0}.nav.active,.nav:hover{background:#eaf2ff;color:#114f9e}.safety{margin-top:auto;border:1px solid #f0d9ae;background:#fff9ec;border-radius:8px;padding:12px;color:#6b4a12;display:flex;flex-direction:column;gap:5px;font-size:12px}.content{padding:36px;max-width:1260px;width:100%;margin:0 auto}.view{display:none}.view.active{display:block}.pagehead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--blue);font-weight:800;margin:0 0 4px}h1{font-size:32px;margin:0 0 4px;letter-spacing:-.03em}h2{margin:0 0 8px}h3{margin:0 0 4px}p{color:var(--muted);margin:0}.cards,.evidence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.card,.table,.empty{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}.meta{color:var(--muted);font-size:13px}.hash{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;color:#526071}.cardfooter{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#e9f7f1;color:var(--green)}.badge.awaiting{background:#fff3db;color:var(--amber)}.secondary{background:#edf1f5;color:#344152}.small{padding:7px 10px;font-size:12px}.full{width:100%;margin-top:8px}.empty{text-align:center;padding:52px 20px;color:var(--muted)}dialog{border:0;border-radius:12px;padding:0;box-shadow:0 24px 80px #0004;max-width:480px;width:calc(100% - 32px)}dialog::backdrop{background:#102033aa}.wide{max-width:760px}dialog form{padding:26px}.stepbar{display:flex;margin:-26px -26px 24px;border-bottom:1px solid var(--line);background:#f8fafb;padding:0 20px}.step{padding:14px 10px;color:#8a95a2;font-size:12px;font-weight:700}.step.active{color:var(--blue);border-bottom:2px solid var(--blue)}label{display:flex;flex-direction:column;gap:6px;font-weight:700;margin:14px 0}input,select{border:1px solid #cbd3dc;border-radius:7px;padding:11px 12px;font:inherit;background:#fff}input:focus,select:focus{outline:3px solid #1769e025;border-color:var(--blue)}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.span2{grid-column:span 2}.drop{border:1px dashed #9fb0c1;border-radius:9px;background:#f8fafc;padding:24px;text-align:center}.fileinfo,.review{background:#f5f8fb;border:1px solid var(--line);border-radius:8px;padding:15px;margin-top:14px}.authorization-actions{flex-wrap:wrap;align-items:center}.authorization-note{flex:1 1 240px;margin:0;text-align:left;color:#526071;font-size:12px;line-height:1.45}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.review dl{display:grid;grid-template-columns:150px 1fr;gap:8px;margin:0}.review dt{color:var(--muted)}.review dd{margin:0;font-weight:700;overflow-wrap:anywhere}.success{text-align:center;padding:34px 10px}.success span{display:grid;place-items:center;margin:0 auto 16px;width:54px;height:54px;border-radius:50%;background:#e3f7ee;color:var(--green);font-size:26px}.table{padding:0;overflow:hidden}.row{display:grid;grid-template-columns:1.45fr 1fr .8fr .7fr 1fr;gap:12px;padding:15px 18px;border-top:1px solid var(--line);align-items:center}.row:first-child{border-top:0}.row.header{background:#f7f9fb;color:var(--muted);font-size:12px;font-weight:800}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.timeline{margin-top:14px;border-left:2px solid #d6e0ea;padding-left:14px}.event{margin:10px 0}.event strong{display:block}.event small{color:var(--muted)}.artifact-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.artifact{font-size:11px;background:#edf4ff;color:#174f9b;padding:5px 7px;border-radius:5px;text-decoration:none}.alert{padding:10px 12px;border-radius:7px;margin-top:12px}.error{background:#fef3f2;color:var(--red);border:1px solid #fecdca}.toast{position:fixed;right:20px;bottom:20px;background:#16263a;color:#fff;border-radius:8px;padding:12px 16px;box-shadow:0 12px 30px #0003;z-index:10}@media(max-width:800px){.authorization-note{flex-basis:100%}.shell{grid-template-columns:1fr}aside{display:none}.content{padding:24px 16px}.grid2{grid-template-columns:1fr}.span2{grid-column:auto}.row{grid-template-columns:1fr 1fr}.row.header{display:none}.stepbar{overflow:auto}.mode{font-size:9px}.account{display:none}.topbar{padding:0 14px}h1{font-size:27px}}

/* Live-mail mode: unmistakable red state */
.mode.live { background: #b3261e; color: #fff; }
body.live-mode .safety { border-color: #b3261e; background: #fdecea; }
.badge.live { background: #b3261e; color: #fff; }
.artifact.simulated { opacity: .7; border-style: dashed; }
/* Second mail provider box inside Execution safety */
.provider-box { margin-top: 8px; border-top: 1px solid #f0d9ae; padding-top: 8px; }
.provider-box summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.provider-box p { color: #6b4a12; font-size: 12px; margin: 6px 0; }
.provider-field { font-size: 11px; margin: 6px 0; gap: 3px; }
.provider-field input { padding: 7px 8px; font-size: 12px; }
.provider-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.provider-result { font-size: 11px; margin-top: 6px; white-space: pre-line; overflow-wrap: anywhere; }
.provider-result.ok { color: var(--green); }
.provider-result.bad { color: var(--red); }

/* The letter itself, inside the review flow */
.pdf-preview { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 10px; }
.preview-caption { margin-top: 14px; }
@media(max-width:800px){ .pdf-preview { height: 380px; } }

.letter-pages { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; max-height: 560px; overflow: auto; padding: 4px; background: #eef1f4; border-radius: 8px; }
.letter-page { background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px #0000000f; padding: 36px 40px 22px; }
.letter-page pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.45 Helvetica, Arial, sans-serif; color: #111; }
.letter-page footer { margin-top: 18px; text-align: right; font-size: 11px; color: var(--muted); }

/* Letter editor and the prepared-letter banner's controls */
textarea { border: 1px solid #cbd3dc; border-radius: 7px; padding: 11px 12px; font: 14px/1.5 Helvetica, Arial, sans-serif; background: #fff; resize: vertical; min-height: 220px; }
textarea:focus { outline: 3px solid #1769e025; border-color: var(--blue); }
.section-title { margin: 18px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.draft-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.draft-actions .link-danger { background: transparent; color: var(--red); padding: 7px 4px; font-weight: 600; }
.fileinfo .meta a + a { margin-left: 14px; }
/* Keep the step buttons reachable: the dialog scrolls inside the viewport and the
   laid-out letter pages never push Continue below the bottom edge of the screen. */
dialog { max-height: calc(100vh - 32px); overflow: auto; }
.letter-pages { max-height: min(560px, 42vh); }
.mailstep .dialog-actions, #letterForm .dialog-actions { position: sticky; bottom: 0; background: #fff; padding-top: 12px; padding-bottom: 4px; margin-bottom: -22px; border-top: 1px solid var(--line); }

.meta.practice{background:#fff7d6;border:1px solid #e6c65a;border-radius:6px;padding:.5rem .7rem;color:#5a4300}

/* v0.21: one letter, no case — and the mailing record as the thing you get afterwards */
.pagehead > button { white-space: nowrap; }
.recent-mailings { margin-bottom: 18px; }
.cases-optional { margin-top: 8px; color: var(--muted); }
.cases-optional summary { cursor: pointer; padding: 8px 0; }
.cases-optional .cards { margin-top: 12px; }
.service-note { margin: -4px 0 8px; }
.review dd .block { display: block; font-weight: 500; margin-top: 2px; }
.review dd.total { font-size: 17px; }
.draft-banner { background: #eef5ff; border: 1px solid #bcd3f5; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.reuse-notice { background: #eef5ff; border: 1px solid #bcd3f5; border-radius: 10px; padding: 16px 18px; margin: 0 0 16px; }
.reuse-notice p { margin: 0 0 6px; }
.reuse-notice p:last-child { margin-bottom: 0; }
.recipient-book { margin: 0 0 14px; }
.recipient-book-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.recipient-book-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.recipient-book-chips button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; line-height: 1.25; }
.recipient-book-chips button small { font-weight: 400; opacity: .75; }
.provider-raw { margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #f8fafb; }
.provider-raw summary { cursor: pointer; font-weight: 700; font-size: 13px; color: #465361; }
.provider-raw pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 0; max-height: 320px; overflow: auto; }
.record-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.record-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e3f7ee; color: var(--green); font-size: 22px; font-weight: 800; }
.record-mark.practice { background: #fff3db; color: var(--amber); }
.record-facts { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 0 0 14px; font-size: 14px; }
.record-facts dt { color: var(--muted); }
.record-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.record-facts .hash { display: inline; font-weight: 400; }
.ladder { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ladder-row { display: grid; grid-template-columns: 220px 1fr; gap: 8px 14px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: start; }
.ladder-row:first-child { border-top: 0; }
.ladder-label { display: flex; flex-direction: column; gap: 4px; }
.ladder-detail { font-size: 13px; color: #33404d; }
.ladder-detail small { display: block; color: var(--muted); margin-top: 2px; }
.stage-badge { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #eef1f4; color: #465361; }
.stage-badge.ok { background: #e3f7ee; color: var(--green); }
.stage-badge.hold { background: #fff3db; color: var(--amber); }
.stage-badge.warn { background: #fff3db; color: var(--amber); }
.stage-badge.bad { background: #fef3f2; color: var(--red); }
.stage-badge.unknown { background: #eef1f4; color: #465361; border: 1px dashed #b7c2cd; }
.record-actions { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.record-actions .meta { flex: 1; min-width: 200px; }
.retention { margin-top: 12px; }
@media(max-width:800px){ .record-facts { grid-template-columns: 1fr; gap: 2px 0; } .record-facts dt { margin-top: 8px; } .ladder-row { grid-template-columns: 1fr; } .pagehead { flex-direction: column; align-items: flex-start; gap: 12px; } }
@media(max-width:800px){ .review dl { grid-template-columns: 1fr; gap: 2px 0; } .review dt { margin-top: 10px; } }

/* Sign-in by email link */
.password-block { margin-top: 18px; color: var(--muted); font-size: 13px; }
.password-block summary { cursor: pointer; font-weight: 600; }
/* The password box is read as it is typed; "Hide" is one button away. The row keeps the
   button beside the box so neither the label nor the card width has to move. */
.password-field { margin: 14px 0; }
.password-field > label { margin: 0 0 6px; }
.password-row { display: flex; align-items: stretch; gap: 8px; }
.password-row input { flex: 1 1 auto; min-width: 0; }
.password-row .password-toggle { flex: 0 0 auto; padding: 0 14px; font-size: 13px; }
.link-sent { background: #eef5ff; border: 1px solid #bcd3f5; border-radius: 8px; padding: 14px; margin-top: 14px; }
.link-sent p { margin-top: 6px; }
/* Correcting a mistyped address is a button, not a sentence to find. */
.link-sent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Bigger than the workspace's .small buttons: these are pressed with a thumb, mid-payment. */
.link-sent-actions button { padding: 11px 14px; font-size: 13px; }
.link-sent-note { margin-top: 10px; font-size: 13px; font-weight: 600; color: #2c4a72; }
.link-sent-note.link-sent-note-bad { color: var(--red); }
.link-sent-note.hidden { display: none !important; }

/* Saved senders. Who a letter is from is chosen in one click, right above the From boxes,
   because that is where a person looks when they are about to retype an address — and a
   retyped address is how a wrong return address reaches a certified envelope. */
.sender-picker { margin: 0 0 .75rem; }
.sender-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.sender-chips button { font-size: .82rem; padding: .3rem .7rem; }
.sender-chips button[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
.sender-save { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.sender-save label { flex: 1 1 16rem; margin: 0; }
.sender-card { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.sender-form { margin-top: 1.25rem; }

/* The invite-only limit belongs where the decision is made, not only on the marketing page. */
.invite-note { background:#eef5ff; border:1px solid #bcd3f5; border-radius:8px; padding:11px 14px; margin:0 0 16px; color:#2c4a72; font-size:13.5px; line-height:1.5; }
.invite-note strong { color:#132a46; }
/* A browser's own validation bubble sits on the button and disappears; this message stays put. */
.field-error { display:block; margin-top:6px; color:var(--red); font-size:13px; font-weight:600; }
.field-error.hidden { display:none!important; }
input[aria-invalid="true"] { border-color:#f04438; }
input[aria-invalid="true"]:focus { outline:3px solid #f0443830; }

/* The sign-in card carries a whole letter when someone arrives from an assistant's link,
   so it needs the width to show a page of it. */
.auth-card.with-letter { width: min(680px, 100%); }
.auth-card.with-letter .letter-pages { max-height: min(420px, 38vh); }
/* A printed line is about 90 characters wide. If the preview column is narrower than that,
   the browser wraps each line again and the letter reads as ragged nonsense on the one
   screen where somebody decides whether to pay for it, so the page is set small enough here
   for a full line to fit. */
.auth-card.with-letter .letter-page { padding: 26px 24px 16px; }
.auth-card.with-letter .letter-page pre { font-size: 11px; line-height: 1.4; }
/* On a phone no readable type size fits a full printed line, and re-wrapping it is the same
   ragged nonsense in a smaller frame. So the page keeps its lines and slides sideways inside
   its own box instead; the page itself still never scrolls sideways, and the caption above
   offers the PDF for anyone who would rather read it full size. */
@media (max-width: 700px) {
  /* min-width: 0 down the chain, or the widest printed line would stretch the card itself and
     the whole page would slide sideways instead of just the letter. */
  .auth-card.with-letter, .auth-card.with-letter #authDraft, .auth-card.with-letter .letter-pages { min-width: 0; }
  .auth-card.with-letter .letter-page { width: max-content; min-width: 100%; }
  .auth-card.with-letter .letter-page pre { white-space: pre; overflow-wrap: normal; }
}

/* The signed-out screen when it is a composer rather than a door. It is wider than the
   sign-in card was, because a recipient form in one column on a laptop reads as a survey. */
.auth-card.composing { width: min(560px, 100%); }
.visitor-start .document-ways { justify-content: flex-start; align-items: stretch; margin-top: 18px; flex-wrap: wrap; }
.visitor-start .document-ways > button { flex: 0 0 auto; align-self: center; padding: 13px 18px; }
.visitor-start .price-line { margin-top: 14px; font-weight: 700; color: var(--ink); }
.visitor-start .price-line span { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.visitor-start .drop { flex: 1 1 220px; min-width: 0; padding: 14px; font-size: 13px; font-weight: 700; }
/* A file input reports an intrinsic width wider than a phone and drags the whole page
   sideways with it, which is invisible on a laptop. */
.visitor-start .drop input { margin-top: 8px; font-weight: 400; width: 100%; max-width: 100%; }
.visitor-start .document-ways > button { min-width: 0; max-width: 100%; }
.visitor-recipient { margin-top: 6px; }
/* The sign-in folds away while there is nothing to pay for. Open, its summary is the
   heading of the checkout step, so it must not look like a link to somewhere else. */
.auth-signin { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 10px; }
.auth-signin > summary { cursor: pointer; font-weight: 700; color: var(--blue); padding: 6px 0; }
.auth-signin[open] > summary { color: var(--ink); font-size: 17px; cursor: default; }
.auth-signin[open] > summary::marker { content: ''; }
/* A visitor has no saved senders and no account to save one into. */
#letterDialog.visitor .sender-save, #letterDialog.visitor .sender-picker, #letterDialog.visitor #senderSaveNote { display: none; }
/* The owner's "Every letter" screen. Six columns instead of five, because the account that
   bought the letter and the printer's own job number are the two things this screen exists
   to show and neither appears anywhere else. */
.table.ledger .row { grid-template-columns: 1.4fr 1.1fr 1fr 1.3fr .7fr .9fr; }
/* A letter that died at the printer is money already spent, so it is not a quiet grey row. */
.table.ledger .row.bad { background: #fef3f2; }
.badge.bad { background: #fee4e2; color: var(--red); }
.ledger-summary { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.ledger-summary.bad { border-color: #fecdca; background: #fffbfa; }
.ledger-summary p { color: var(--ink); margin: 0 0 6px; }
.ledger-summary p:last-child { margin-bottom: 0; }
.ledger-alarm { color: var(--red); }
@media (max-width: 800px) {
  .table.ledger .row { grid-template-columns: 1fr 1fr; }
}
/* On a phone the side menu is hidden, and "All letters" lived only there, so the owner had no
   way to reach it from the phone the business is run on. For the owner alone the menu comes
   back as one row of buttons above the page; the new-case button and the safety box stay off
   it, and a customer's phone is left exactly as it was. */
@media (max-width: 800px) {
  /* Two rows in a full-height grid would share the spare height, leaving a blank band under
     the strip; start keeps the strip its own height. */
  body.owner .shell { align-content: start; }
  body.owner aside { display: block; min-width: 0; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  body.owner aside .new-case, body.owner aside .safety { display: none; }
  body.owner aside nav { display: flex; gap: 4px; }
  body.owner aside .nav { width: auto; margin: 0; white-space: nowrap; }
}

/* The day's anonymous address checks, in the owner-only safety panel. It borrows the provider
   box's divider and ink so it reads as one more line of that panel rather than a new thing,
   and turns red only when the cap is actually spent. */
.address-checks {
  border-top: 1px solid #f0d9ae;
  color: #6b4a12;
  font-size: 11px;
  line-height: 1.5;
  margin: 8px 0 0;
  padding-top: 8px;
}

.address-checks.spent { color: var(--red); font-weight: 600; }
/* The letter tools under a letter card (public/draft-tools.js). The list classes are not
   .error/.confirm, which already mean a red alert box on this page. */
.draft-tools { margin-top: 16px; border-top: 1px solid #bcd3f5; padding-top: 12px; }
.draft-tools-title { font-weight: 700; color: var(--ink); font-size: 13px; }
.draft-findings:empty { display: none; }
.draft-findings { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.repair-summary { color: var(--ink); }
.repair-heading { font-weight: 700; color: var(--ink); margin-top: 10px; font-size: 13px; }
.repair-list { list-style: none; margin: 6px 0; padding: 0; }
.repair-list li { border: 1px solid var(--line); border-left-width: 4px; border-radius: 7px; padding: 8px 12px; margin: 6px 0; background: #fff; }
.repair-list li.must { border-left-color: var(--red); }
.repair-list li.confirm { border-left-color: var(--amber); }
.repair-list li strong { display: block; color: var(--ink); }
.repair-list li small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.returned-note { background: #fff; border: 1px solid #fdb022; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; color: var(--ink); }
.returned-note.revised { border-color: #75e0a7; background: #f6fef9; }
.share-text { width: 100%; min-height: 240px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--soft); color: var(--ink); margin-top: 12px; }
.copied-note { color: var(--green); font-weight: 600; min-height: 1.4em; margin-top: 6px; }
.portable-choices { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0 0; padding: 6px 12px 10px; }
.portable-choices legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.inline-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; margin: 6px 0; }
.inline-check input { width: auto; }
.draft-tools-actions { flex-wrap: wrap; }

/* The letter editor, compact (owner, 2026-10-02): labels live inside the boxes as placeholders
   (the hidden span keeps each box's accessible name), short fields share a six-column row, and
   only the letter text grows with the window, so form and buttons fit one laptop screen. */
.compact-form > .eyebrow { display: none; }
.compact-form h2 { margin-bottom: 2px; font-size: 22px; }
.compact-form > p { font-size: 13px; }
.compact-form .section-title { margin: 8px 0 4px; font-size: 11px; }
.compact-form .grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 8px; }
.compact-form .grid6 label, .compact-form .sender-save label { margin: 0; gap: 0; font-weight: 400; }
.compact-form .c1 { grid-column: span 1; } .compact-form .c2 { grid-column: span 2; } .compact-form .c3 { grid-column: span 3; }
.compact-form .c4 { grid-column: span 4; } .compact-form .c6 { grid-column: span 6; }
.compact-form input, .compact-form select { padding: 6px 10px; font-size: 14px; min-width: 0; }
.compact-form input::placeholder, .compact-form textarea::placeholder { color: #8a95a2; }
.compact-form select:has(option[value=""]:checked) { color: #8a95a2; }
.compact-form textarea { min-height: 96px; height: max(96px, calc(100vh - 672px)); }
.compact-form .sender-save { margin-top: 6px; }
.compact-form .sender-save .small { padding: 6px 10px; }
.compact-form .hint:empty { display: none; }
.compact-form .dialog-actions { margin-top: 12px; margin-bottom: -16px; }
#letterDialog .compact-form { padding: 16px 24px 20px; }
@media (max-width: 800px) {
  .compact-form .grid6 { grid-template-columns: repeat(6, 1fr); }
  .compact-form .c3, .compact-form .c4 { grid-column: span 6; }
  .compact-form .c2 { grid-column: span 3; } .compact-form .c1 { grid-column: span 3; }
  .compact-form textarea { height: 220px; }
}
.mailstep.compact-form .grid6 { margin-top: 10px; }
.service-note-fold { margin-top: 8px; font-size: 13px; }
.service-note-fold summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.service-note-fold .service-note { margin-top: 6px; }
/* No dialog scrolls sideways (owner, 2026-10-02): grid children may shrink below their content,
   and a menu with a long option wraps to the box instead of widening the form. */
dialog .grid2 > *, dialog .grid6 > *, dialog label { min-width: 0; }
dialog input, dialog select, dialog textarea { max-width: 100%; min-width: 0; }
dialog select { width: 100%; text-overflow: ellipsis; }
dialog .hash, dialog dd { overflow-wrap: anywhere; }
.danger{background:var(--red);color:#fff}.delete-confirm{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.delete-confirm small{flex-basis:100%;color:var(--muted);font-size:12px}