/* Open When Letters Maker. Mobile first; tokens only so dark mode works. Print styles at the end. */
.tool.ow { gap: 16px; scroll-margin-top: 88px; }
.tool.ow .tool-sub, .tool.ow .tool-note, .tool.ow .tool-hint { color: rgb(var(--ink) / .7); }
.tool .ow-maker { gap: 16px; }

/* Steps */
.tool .ow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 22px; background: rgb(var(--ink) / .07); }
.tool .ow-steps button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 6px; border-radius: 18px;
  font-size: 13px; line-height: 16px; font-weight: 800; color: rgb(var(--ink) / .62); background: transparent;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.tool .ow-steps button[aria-selected="true"] { background: var(--surface); color: rgb(var(--ink)); box-shadow: 0 1px 3px rgb(var(--ink) / .14); }
.tool .ow-steps button:disabled { opacity: .45; }
.tool .ow-step-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 10px; background: rgb(var(--ink) / .1); font-size: 12px; flex: 0 0 auto; }
.tool .ow-steps button[aria-selected="true"] .ow-step-n { background: rgb(var(--accent)); color: #fff; }

.tool .ow-pick, .tool .ow-write, .tool .ow-finish { display: flex; flex-direction: column; gap: 14px; }

/* Ready sets */
.tool .ow-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .ow-pack {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 20px; text-align: left;
  background: var(--surface); color: rgb(var(--ink)); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .06); transition: transform .16s var(--ease-out);
}
.tool .ow-pack:active { transform: scale(.97); }
.tool .ow-pack b { font-size: 16px; line-height: 22px; font-weight: 850; }
.tool .ow-pack span { font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(var(--ink) / .62); }
@media (min-width: 600px) { .tool .ow-packs { grid-template-columns: repeat(5, 1fr); } }

/* Category filter */
.tool .ow-cats { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.tool .ow-cats::-webkit-scrollbar { display: none; }
.tool .ow-cats button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 14px; font-weight: 750; background: var(--surface); color: rgb(var(--ink) / .75); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); }
.tool .ow-cats button[aria-pressed="true"] { background: rgb(var(--ink)); color: var(--surface); box-shadow: none; }
@media (min-width: 600px) { .tool .ow-cats { margin: 0 -24px; padding: 2px 24px 4px; } }

/* Prompt list */
.tool .ow-prompts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tool .ow-group { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--ink) / .62); padding: 12px 4px 2px; }
.tool .ow-prompt {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 16px; text-align: left;
  background: var(--surface); color: rgb(var(--ink)); font-size: 16px; line-height: 22px; font-weight: 700;
  transition: background-color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out);
}
.tool .ow-prompt:active { transform: scale(.985); }
.tool .ow-prompt small { font-size: inherit; font-weight: 650; color: rgb(var(--ink) / .55); }
.tool .ow-check { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; background: rgb(var(--ink) / .07); color: rgb(var(--ink) / .55); transition: background-color .2s ease, color .2s ease; }
.tool .ow-check .tool-icon { width: 16px; height: 16px; }
.tool .ow-prompt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.tool .ow-prompt[aria-pressed="true"] .ow-check { background: rgb(var(--accent)); color: #fff; }
.tool .ow-custom { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.tool .ow-addrow { display: flex; gap: 8px; }
.tool .ow-addrow input { flex: 1; min-width: 0; }
.tool .ow-addrow .btn { width: auto !important; flex: 0 0 auto; padding: 0 20px; }

/* Sticky bar */
.tool .ow-bar {
  position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 26px; background: rgb(var(--ink)); color: var(--surface); box-shadow: 0 12px 32px rgb(var(--ink) / .3);
}
.tool .ow-bar-n { font-size: 15px; font-weight: 750; color: var(--surface); }
.tool .ow-bar-n b { font-size: 20px; font-weight: 900; }
.tool .ow-bar .btn { width: auto !important; flex: 0 0 auto; min-height: 44px; padding: 0 22px; }
.tool .ow-bar .btn:disabled { opacity: .5; }

/* Envelopes */
.tool .ow-names { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.tool .ow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 600px) { .tool .ow-grid { grid-template-columns: repeat(3, 1fr); } }
.tool .ow-env {
  position: relative; overflow: hidden; min-height: 148px; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
  padding: 62px 14px 14px; border-radius: 18px; text-align: left; color: rgb(var(--ink));
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%); box-shadow: var(--shadow), inset 0 0 0 1px rgb(var(--ink) / .06);
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.tool .ow-env:active { transform: scale(.97); }
@media (hover: hover) { .tool .ow-env:hover { transform: translateY(-2px); } }
.tool .ow-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 48px; background: rgb(var(--accent) / .12);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transition: background-color .2s ease;
}
.tool .ow-env.is-done .ow-flap { background: rgb(var(--accent) / .28); }
.tool .ow-env-w { position: relative; font-size: 15px; line-height: 19px; font-weight: 800; flex: 1; overflow-wrap: anywhere; }
.tool .ow-env-w small { display: block; font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--ink) / .55); }
.tool .ow-env-s { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 750; color: rgb(var(--ink) / .55); }
.tool .ow-env.is-done .ow-env-s { color: var(--link); }
.tool .ow-env-s .tool-icon { width: 14px; height: 14px; }
.tool .ow-env-lock { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: rgb(var(--ink) / .6); background: var(--surface); padding: 2px 8px 2px 6px; border-radius: 10px; }
.tool .ow-env-lock .tool-icon { width: 12px; height: 12px; }
.tool .ow-addenv { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 18px; background: transparent; color: var(--link); font-size: 15px; font-weight: 800; box-shadow: inset 0 0 0 2px rgb(var(--accent) / .25); }
.tool .ow-addenv .tool-icon { width: 18px; height: 18px; }

/* Received: sealed, locked, opened */
.tool .ow-env.is-sealed .ow-flap { background: rgb(var(--accent) / .22); }
.tool .ow-wax { position: absolute; left: 50%; top: 48px; width: 30px; height: 30px; margin: -17px 0 0 -15px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #D88BFF, #A73CFF 45%, #6A1BB0); color: #fff; font-size: 14px; font-weight: 900; line-height: 1;
  box-shadow: 0 2px 6px rgb(121 35 192 / .4), inset 0 -2px 3px rgb(0 0 0 / .2), inset 0 0 0 3px rgb(255 255 255 / .14); }
.tool .ow-wax .tool-icon { width: 14px; height: 14px; }
.tool .ow-env.is-locked .ow-wax { background: rgb(var(--ink) / .35); }
.tool .ow-env.is-locked { opacity: .78; }
.tool .ow-env.is-open .ow-flap { transform: scaleY(-1); transform-origin: top; opacity: .5; }
.tool .ow-env.is-open .ow-env-s { color: var(--link); }

/* Editor */
.tool .ow-ed-bar { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .7); }
.tool .ow-ed-nav { margin-left: auto; display: flex; gap: 6px; }
.tool .ow-paper {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 12px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow);
}
.tool .ow-paper.is-new { animation: card-in .4s var(--ease-out) both; }
.tool .ow-ed-title { resize: none !important; overflow: hidden; line-height: 24px !important; font-size: 18px !important; font-weight: 850 !important; box-shadow: none !important; padding: 4px 0 !important; min-height: 36px !important; border-radius: 0 !important; background: transparent !important; border-bottom: 2px solid rgb(var(--ink) / .08) !important; }
.tool .ow-ed-text {
  min-height: 220px; box-shadow: none !important; padding: 8px 0 !important; border-radius: 0 !important; background: transparent !important; resize: none !important;
  font-size: 17px !important; line-height: 28px !important; font-weight: 600 !important;
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgb(var(--ink) / .07) 27px, rgb(var(--ink) / .07) 28px) !important; background-position: 0 7px !important;
}
.tool .ow-ed-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool .ow-starter { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 20px; background: var(--surface-2); color: var(--link); font-size: 14px; font-weight: 800; }
.tool .ow-starter .tool-icon { width: 16px; height: 16px; }
.tool .ow-count { font-size: 13px; font-weight: 700; color: rgb(var(--ink) / .55); font-variant-numeric: tabular-nums; }
.tool .ow-more { border-radius: 16px; background: var(--surface); padding: 0 16px; }
.tool .ow-more summary { min-height: 48px; display: flex; align-items: center; font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .75); cursor: pointer; list-style: none; }
.tool .ow-more summary::-webkit-details-marker { display: none; }
.tool .ow-more summary::after { content: '+'; margin-left: auto; font-size: 20px; color: rgb(var(--ink) / .45); }
.tool .ow-more[open] summary::after { content: '\2212'; }
.tool .ow-more .tool-field { padding-bottom: 14px; }
.tool .ow-del { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: 24px; background: transparent; color: rgb(var(--ink) / .6); font-size: 14px; font-weight: 800; }
.tool .ow-del .tool-icon { width: 16px; height: 16px; }

/* Finish */
.tool .ow-option { display: grid; grid-template-columns: 44px 1fr; gap: 12px 14px; padding: 18px 16px; border-radius: 22px; background: var(--surface); }
.tool .ow-option > .tool-actions, .tool .ow-option > .tool-chips { grid-column: 1 / -1; }
.tool .ow-opt-i { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--surface-2); color: var(--link); }
.tool .ow-option b { display: block; font-size: 17px; line-height: 24px; font-weight: 850; color: rgb(var(--ink)); }
.tool .ow-option p { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .7); }
.tool .ow-tips { padding: 16px; border-radius: 20px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.tool .ow-tips ul { display: grid; gap: 6px; }
.tool .ow-tips li { font-size: 14px; line-height: 20px; padding-left: 18px; position: relative; }
.tool .ow-tips li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 3px; background: rgb(var(--accent)); }

/* Received view */
.tool .ow-read { display: flex; flex-direction: column; gap: 14px; }
.tool .ow-read-eyebrow { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--link); }
.tool .ow-read-prog { display: flex; flex-direction: column; gap: 6px; }
.tool .ow-read-count { font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .7); }
.tool .ow-stage { display: flex; flex-direction: column; gap: 14px; }
.tool .ow-sealed { align-items: center; text-align: center; padding: 32px 20px; gap: 10px; }
.tool .ow-seal { width: 64px; height: 64px; border-radius: 32px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #D88BFF, #A73CFF 45%, #6A1BB0); color: #fff; font-size: 26px; font-weight: 900; box-shadow: 0 6px 18px rgb(121 35 192 / .4), inset 0 -3px 4px rgb(0 0 0 / .2), inset 0 0 0 4px rgb(255 255 255 / .14); }
.tool .ow-seal .tool-icon { width: 26px; height: 26px; fill: currentColor; }
.tool .ow-q { font-size: 22px !important; line-height: 30px !important; font-weight: 900 !important; color: rgb(var(--ink)) !important; text-wrap: balance; }
.tool .ow-letter { padding: 24px 22px; gap: 12px; }
.tool .ow-letter.is-opening { animation: ow-open .7s var(--ease-out) both; transform-origin: 50% 0; }
.tool .ow-letter-w { font-size: 14px !important; font-weight: 850 !important; color: var(--link) !important; text-transform: none; }
.tool .ow-letter-to { font-size: 18px !important; font-weight: 800 !important; }
.tool .ow-letter-t { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 18px; line-height: 30px; font-weight: 600; color: rgb(var(--ink)); }
.tool .ow-letter-from { font-size: 17px !important; font-weight: 800 !important; text-align: right; }
.tool .ow-read-back { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); flex-wrap: wrap; }
.tool .ow-read-back .btn { width: auto !important; }

@keyframes ow-open { 0% { opacity: 0; transform: translateY(40px) scale(.94); clip-path: inset(100% 0 0 0 round 22px); } 60% { opacity: 1; } 100% { transform: none; clip-path: inset(0 0 0 0 round 22px); } }

@media (max-width: 599px) {
  .tool .ow-steps button { font-size: 12px; gap: 4px; }
  .tool .ow-ed-actions { flex-direction: row !important; }
  .tool .ow-ed-actions .btn { flex: 1; }
  .tool .ow-ed-actions .ow-del { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tool .ow-env, .tool .ow-prompt, .tool .ow-pack { transition: none; }
  .tool .ow-letter.is-opening, .tool .ow-paper.is-new { animation: none; }
}

/* Print: only the generated sheet (assets/tools/open-when-letters.js hides the rest while printing) */
.tool .ow-print { display: none; }
@media print {
  html.ow-printing, html.ow-printing body { background: #fff !important; }
  html.ow-printing .tool.ow { display: block !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
  html.ow-printing .tool .ow-print { display: block; color: #000; font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; }
  html.ow-printing .tool .ow-p-page { break-after: page; page-break-after: always; }
  html.ow-printing .tool .ow-p-page:last-child { break-after: auto; page-break-after: auto; }
  html.ow-printing .tool .ow-p-head { font: 700 13pt/1.4 system-ui, sans-serif; color: #333; margin: 0 0 12pt; text-align: center; }
  html.ow-printing .tool .ow-p-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  html.ow-printing .tool .ow-p-label { border: 1px dashed #999; padding: 16pt 12pt; min-height: 92pt; display: flex; flex-direction: column; justify-content: center; text-align: center; break-inside: avoid; }
  html.ow-printing .tool .ow-p-label small { font: 700 8pt/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #666; }
  html.ow-printing .tool .ow-p-label b { font-size: 16pt; line-height: 1.25; margin-top: 4pt; color: #000; }
  html.ow-printing .tool .ow-p-label span { font-size: 10pt; margin-top: 6pt; color: #444; font-style: italic; }
  html.ow-printing .tool .ow-p-title { font-size: 20pt; font-weight: 700; margin: 0 0 18pt; color: #000; border-bottom: 1px solid #ccc; padding-bottom: 8pt; }
  html.ow-printing .tool .ow-p-to { font-size: 13pt; margin: 0 0 12pt; color: #000; }
  html.ow-printing .tool .ow-p-body { white-space: pre-wrap; font-size: 13pt; line-height: 1.7; color: #000; }
  html.ow-printing .tool .ow-p-lines span { display: block; height: 22pt; border-bottom: 1px solid #999; }
  html.ow-printing .tool .ow-p-from { font-size: 13pt; margin: auto 0 0; padding-top: 24pt; text-align: right; color: #000; }
  html.ow-printing .tool .ow-p-letter { min-height: 9.1in; display: flex; flex-direction: column; }
  html.ow-printing .tool .ow-p-letter::before { content: '\2661'; display: block; text-align: center; font-size: 18pt; color: #A73CFF; margin-bottom: 6pt; }
  html.ow-printing .tool .ow-p-title { text-align: center; border-bottom: 0; letter-spacing: .01em; }
  html.ow-printing .tool .ow-p-letter { padding: 18pt 10pt; }
  html.ow-printing .tool .ow-p-label { border: 1.5px dashed #888; border-radius: 6pt; margin: 4pt; }
  html.ow-printing .tool .ow-p-label::before { content: '\2661'; display: block; color: #A73CFF; font-size: 13pt; line-height: 1; margin-bottom: 6pt; }
  html.ow-printing .tool .ow-p-label { border: 0.5pt dashed #555; border-radius: 0; margin: 0; min-height: 1.75in; }
}

/* Round 2 */
.tool .ow-bar .btn:disabled { background: rgb(255 255 255 / .2); color: rgb(255 255 255 / .75); box-shadow: none; opacity: 1; }
.tool .ow-prompt { font-weight: 650; }
.tool .ow-hints { padding: 14px 16px; border-radius: 18px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.tool .ow-hints ul { display: grid; gap: 4px; }
.tool .ow-hints li { font-size: 14px; line-height: 20px; font-weight: 600; padding-left: 16px; position: relative; }
.tool .ow-hints li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 3px; background: rgb(var(--accent)); }
.tool .ow-empties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.tool .ow-empty { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 18px; background: var(--surface); color: var(--link); font-size: 13px; font-weight: 750; text-align: left; }
.tool .ow-empty .tool-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.tool .ow-preview { grid-column: 1 / -1; justify-self: center; min-height: 40px; background: transparent; color: var(--link); font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tool .ow-option .tool-actions { flex-direction: row !important; }
.tool .ow-option .tool-actions .btn { flex: 1 1 0; width: auto !important; min-width: 0; }
.tool.ow .btn-secondary { color: rgb(var(--ink)); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .14); }

/* Round 3 */
.tool .ow-steps button { color: rgb(var(--ink) / .72); }
.tool .ow-flap { background: rgb(var(--accent) / .18); }
.tool .ow-env-w small { color: rgb(var(--ink) / .62); }
.tool .ow-stack { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.tool .ow-stack > .btn { width: 100% !important; }
.tool .ow-row2 { display: flex; gap: 8px; }
.tool .ow-row2 .btn { flex: 1 1 0; width: auto !important; min-width: 0; }
.tool .ow-keep { grid-column: 1 / -1; font-size: 13px !important; color: rgb(var(--ink) / .7) !important; text-align: center; }
.tool .ow-days { font-size: 28px !important; line-height: 34px !important; font-weight: 900 !important; color: var(--link) !important; }
.tool .ow-lockrow { padding: 12px 16px; border-radius: 16px; background: var(--surface); }
.tool .ow-option .tool-chips { display: grid; grid-template-columns: 1fr 1fr; }
.tool .ow-option .tool-chips button { padding: 0 10px; }

/* Round 4 */
.tool .ow-read-title { font-size: 26px !important; line-height: 32px !important; font-weight: 900 !important; color: rgb(var(--ink)) !important; letter-spacing: -.01em; text-wrap: balance; }
.tool .ow-letter { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; background-image: repeating-linear-gradient(180deg, transparent 0, transparent 29px, rgb(var(--ink) / .06) 29px, rgb(var(--ink) / .06) 30px); background-position: 0 14px; }
.tool .ow-letter-t { font-family: inherit; font-size: 19px; line-height: 30px; font-weight: 500; }
.tool .ow-letter-to, .tool .ow-letter-from { font-family: inherit !important; font-weight: 700 !important; }
.tool .ow-env.is-locked { opacity: 1; }
.tool .ow-env.is-locked .ow-flap { background: repeating-linear-gradient(135deg, rgb(var(--ink) / .08) 0 6px, rgb(var(--ink) / .04) 6px 12px); }
.tool .ow-env.is-locked .ow-env-s { font-size: 14px; font-weight: 900; color: rgb(var(--ink) / .8); }
.tool .ow-env-s { color: rgb(var(--ink) / .7); }
.tool .ow-links { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; }
.tool .ow-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; background: transparent; color: var(--link); font-size: 15px; font-weight: 800; }
.tool .ow-textlink .tool-icon { width: 18px; height: 18px; }
.tool .ow-bar-btns { display: flex; align-items: center; gap: 6px; }
.tool .ow-bar-print { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 22px; background: rgb(255 255 255 / .14); color: var(--surface); font-size: 14px; font-weight: 800; }
.tool .ow-bar-print .tool-icon { width: 18px; height: 18px; }
.tool .ow-bar .btn { padding: 0 18px !important; }
.tool .ow-pick { padding-bottom: 8px; }
.tool .ow-packs { display: flex; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.tool .ow-packs::-webkit-scrollbar { display: none; }
.tool .ow-pack { flex: 0 0 148px; }
@media (min-width: 600px) { .tool .ow-packs { display: grid; margin: 0; padding: 0; overflow: visible; } }
.tool .ow-paper > .ow-starter { align-self: flex-start; }
.tool .ow-hint-btns { display: flex; gap: 8px; margin-top: 4px; }
.tool .ow-lockbtn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--surface); color: rgb(var(--ink) / .8); font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); }
.tool .ow-lockbtn[aria-pressed="true"] { color: var(--link); background: var(--surface-2); }
.tool .ow-lockbtn .tool-icon { width: 16px; height: 16px; }
.tool .ow-bar-print, .tool .ow-bar-n { white-space: nowrap; }


@media print {
  html.ow-printing .tool .ow-p-ps { margin-top: 16pt; }
  html.ow-printing .tool .ow-p-ps em { font-size: 11pt; color: #444; }
  html.ow-printing .tool .ow-p-to { border-bottom: 0; }
  html.ow-printing .tool .ow-p-env { display: block; width: 6.2in; height: auto; margin: 10pt auto; }
  html.ow-printing .tool .ow-p-cut { fill: none; stroke: #222; stroke-width: 1.2; }
  html.ow-printing .tool .ow-p-fold { fill: none; stroke: #777; stroke-width: 1; stroke-dasharray: 6 5; }
}
/* Round 5 */
.tool .ow-packs { display: grid !important; grid-template-columns: 1fr 1fr; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.tool .ow-pack { flex: none; }
@media (min-width: 600px) { .tool .ow-packs { grid-template-columns: repeat(3, 1fr); } }
.tool .ow-cats { flex-wrap: wrap; overflow: visible; margin: 0 !important; padding: 0 !important; -webkit-mask-image: none; mask-image: none; }
.tool .ow-letter { font-family: inherit; background-color: var(--surface-2); box-shadow: var(--shadow), inset 0 0 0 1px rgb(var(--ink) / .1); background-image: repeating-linear-gradient(180deg, transparent 0, transparent 29px, rgb(var(--ink) / .1) 29px, rgb(var(--ink) / .1) 30px); }
.tool .ow-letter-w { font-size: 15px !important; }
.tool .ow-letter-t { font-size: 19px; font-weight: 600; }
.tool .ow-env-lock { gap: 4px; }
.tool .ow-check-row { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .8); cursor: pointer; }
.tool .ow-check-row input { width: 20px; height: 20px; margin-top: 0; accent-color: rgb(var(--accent)); flex: 0 0 auto; }
.tool .ow-wax { box-shadow: 0 3px 8px rgb(121 35 192 / .45), inset 0 -3px 4px rgb(0 0 0 / .25), inset 0 2px 3px rgb(255 255 255 / .35), 0 0 0 3px rgb(255 255 255 / .6); }
.tool .ow-letter { background-image: none; }
.tool .ow-pick { padding-bottom: 76px; }
.tool .ow-env:not(.is-done):not(.is-sealed):not(.is-open):not(.is-locked) { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .14); background: transparent; }
.tool .ow-env:not(.is-done):not(.is-sealed):not(.is-open):not(.is-locked) .ow-flap { background: rgb(var(--accent) / .1); }
.tool .ow-bar { gap: 8px; padding-left: 16px; }
.tool .ow-bar .btn { padding: 0 16px !important; }

/* ---------- Round 6 ---------- */
/* Pick your own: the full prompt list opens on request, so the ready sets come first. */
.tool .ow-ownbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 26px; font-size: 16px; font-weight: 800; color: rgb(var(--ink)); background: var(--surface); box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / .14); }
.tool .ow-ownbtn .tool-icon { width: 18px; height: 18px; }
.tool .ow-ownlabel { margin-top: 4px; }

/* Seal colours: the sender picks one, it travels in the link and colours every seal on their phone. */
.tool .ow-seal-plum { --ow-wax-hi: #D88BFF; --ow-wax: #A73CFF; --ow-wax-lo: #6A1BB0; --ow-wax-glow: 121 35 192; }
.tool .ow-seal-rose { --ow-wax-hi: #FF9DB5; --ow-wax: #E0456B; --ow-wax-lo: #9C1F40; --ow-wax-glow: 176 36 72; }
.tool .ow-seal-gold { --ow-wax-hi: #FFE29A; --ow-wax: #D9A03A; --ow-wax-lo: #8F6114; --ow-wax-glow: 150 104 24; }
.tool .ow-seal-forest { --ow-wax-hi: #9BE0B4; --ow-wax: #2F9A5C; --ow-wax-lo: #15603A; --ow-wax-glow: 24 96 58; }
.tool [class*="ow-seal-"] .ow-wax, .tool [class*="ow-seal-"] .ow-seal { background: radial-gradient(circle at 35% 30%, var(--ow-wax-hi), var(--ow-wax) 45%, var(--ow-wax-lo)); }
.tool [class*="ow-seal-"] .ow-wax { box-shadow: 0 3px 8px rgb(var(--ow-wax-glow) / .45), inset 0 -3px 4px rgb(0 0 0 / .25), inset 0 2px 3px rgb(255 255 255 / .35), 0 0 0 3px rgb(255 255 255 / .6); }
.tool [class*="ow-seal-"] .ow-env.is-locked .ow-wax { background: rgb(var(--ink) / .35); }
.tool .ow-sealrow { display: flex; flex-direction: column; gap: 8px; }
.tool .ow-sealpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tool .ow-sealbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 76px; padding: 10px 4px 8px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); font-size: 13px; font-weight: 800; color: rgb(var(--ink) / .75); }
.tool .ow-sealbtn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgb(var(--accent)); color: rgb(var(--ink)); }
.tool .ow-sealbtn .ow-wax-demo { position: static; margin: 0; width: 32px; height: 32px; }
.tool .ow-sends { margin: 0; }

/* Print style picker with a small live preview of one printed page. */
.tool .ow-themerow { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.tool .ow-pv { position: relative; display: flex; flex-direction: column; gap: 7px; width: 76px; height: 100px; padding: 14px 9px 9px; border-radius: 6px; background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px rgb(var(--ink) / .12); overflow: hidden; }
.tool .ow-pv-t { font: 700 7px/1.2 'Bradley Hand', 'Segoe Print', 'Noteworthy', 'Chalkboard SE', cursive; text-align: center; color: rgb(var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool .ow-pv-l { display: block; height: 1px; background: rgb(var(--ink) / .25); }
.tool .ow-pv-l.is-short { width: 50%; margin-left: auto; }
.tool .ow-pv.ow-th-soft { box-shadow: var(--shadow), inset 0 0 0 3px rgb(var(--accent) / .28), inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgb(var(--accent) / .4); }
.tool .ow-pv.ow-th-doodle::before, .tool .ow-pv.ow-th-doodle::after { content: '\2661'; position: absolute; font-size: 12px; line-height: 1; color: rgb(var(--accent)); }
.tool .ow-pv.ow-th-doodle::before { left: 5px; top: 3px; }
.tool .ow-pv.ow-th-doodle::after { content: '\2606'; right: 5px; bottom: 3px; }
.tool .ow-pv.ow-th-plain .ow-pv-t { font-family: Georgia, serif; }

@media print {
  html.ow-printing .tool .ow-print { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Blank name lines so handwritten sets need no typed names. */
  html.ow-printing .tool .ow-p-name { display: inline-block; width: 2.2in; height: 1em; border-bottom: 1px solid #999; vertical-align: -2pt; margin: 0 2pt; }
  /* Labels: envelope-front cards (3.6 x 2 in, two per row), dashed cut lines, room for a doodle. */
  html.ow-printing .tool .ow-p-labels { grid-template-columns: repeat(2, 3.6in); justify-content: center; gap: .18in; }
  html.ow-printing .tool .ow-p-label { position: relative; min-height: 2in; margin: 0; padding: 14pt 16pt; border: 1pt dashed #777; border-radius: 10pt; }
  html.ow-printing .tool .ow-p-label::before { content: none; }
  html.ow-printing .tool .ow-p-label b { font-family: 'Bradley Hand', 'Segoe Print', 'Noteworthy', 'Chalkboard SE', 'Iowan Old Style', Georgia, serif; font-size: 17pt; }
  html.ow-printing .tool .ow-p-doodle { position: absolute; right: 10pt; bottom: 8pt; width: .7in; height: .5in; border: .75pt dotted #bbb; border-radius: 6pt; }
  html.ow-printing .tool .ow-p-doodle::after { content: 'doodle'; position: absolute; left: 0; right: 0; bottom: 2pt; text-align: center; font: 600 6pt/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #bbb; }
  /* Soft border: a double rounded frame in the brand lavender, handwritten-style title. */
  html.ow-printing .tool .ow-th-soft .ow-p-letter { border: 2.5pt solid #E6D2FA; border-radius: 16pt; box-shadow: inset 0 0 0 5pt #fff, inset 0 0 0 5.75pt #C9A2F2; padding: 30pt 32pt; }
  html.ow-printing .tool .ow-th-soft .ow-p-label { border-color: #B98BE8; }
  html.ow-printing .tool .ow-th-soft .ow-p-title, html.ow-printing .tool .ow-th-doodle .ow-p-title { font-family: 'Bradley Hand', 'Segoe Print', 'Noteworthy', 'Chalkboard SE', 'Iowan Old Style', Georgia, serif; font-size: 24pt; }
  /* Doodles: small hand-drawn hearts and stars in the corners. */
  html.ow-printing .tool .ow-th-doodle .ow-p-letter { position: relative; padding: 34pt 30pt; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' fill='none' stroke='%23A73CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 30c-6-8-18-2-12 8l12 12 12-12c6-10-6-16-12-8z'/%3E%3Cpath d='M62 14l4 9 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath d='M92 40c3-6 12-6 14 0M88 52c8 6 20 6 26 0' stroke='%23E0456B'/%3E%3C/svg%3E") no-repeat left 10pt top 8pt / 1.3in auto, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' fill='none' stroke='%23A73CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M100 50c-6-8-18-2-12 8l12 12 12-12c6-10-6-16-12-8z'/%3E%3Cpath d='M40 30l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z'/%3E%3Cpath d='M8 60q10-14 20 0t20 0' stroke='%23D9A03A'/%3E%3C/svg%3E") no-repeat right 10pt bottom 8pt / 1.3in auto; }
  html.ow-printing .tool .ow-th-doodle .ow-p-letter::before { content: none; }
  html.ow-printing .tool .ow-th-doodle .ow-p-label { border-color: #A73CFF; }
  html.ow-printing .tool .ow-th-plain .ow-p-doodle { display: none; }
  /* Keep the body, P.S. and signature together at the bottom of the page. */
  html.ow-printing .tool .ow-p-ps, html.ow-printing .tool .ow-p-from { break-inside: avoid; }
}
@media print {
  /* Written letters: sign-off right under the body, then the P.S. lines, as in a real letter. */
  html.ow-printing .tool .ow-p-from.is-after { margin-top: 0; padding-top: 18pt; }
}
.tool .ow-option > .ow-sealrow, .tool .ow-option > .ow-sends, .tool .ow-option > .ow-themerow, .tool .ow-option > .ow-stack, .tool .ow-option > .ow-keep { grid-column: 1 / -1; }
.tool .ow-themerow .tool-chips { grid-template-columns: 1fr; gap: 6px; }
.tool .ow-sends { text-align: left; }
/* After round 6: the share button keeps the full button height at every width. */
.tool .ow-option .ow-stack > .btn { min-height: 52px; }