/* Paragraph: the supplied design contract. Legacy letter IDs remain readable. */
:root{--motion-open:160ms;--motion-close:120ms;--motion-color:150ms;--motion-travel:6px}
:root{--accent:#405e82;--accent-paper:#e5eaf0;--ui:#364039;--muted:#4a5248;--menu:#e7ddcc;--hover:#e5ded2;--pressed:#d9d3c8;--input-line:#62695e;--accent-text:#354f70;--success:#45634e;--error:#8a473e;--app-header:#eeeae2;--correspondence-canvas:#efe4cf;--palette-hover:#dedad2;--header-divider:#c9c7bd;--header-height:72px;--side-width:min(320px,calc(100vw - 44px));--open-ease:cubic-bezier(.2,.7,.2,1);--close-ease:cubic-bezier(.4,0,1,1)}
body,.letter-sheet{transition:background-color var(--motion-open) linear}.letter-sheet{isolation:isolate;min-height:var(--workspace-height,100dvh)}.letter:before{content:none}.letter-sheet:before,.letter-tools:before,.reply-reference:before,.letter-unfold:before,.account-popover:before,.paper-icon-menu:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--paper-grain);background-size:240px 240px;background-repeat:repeat;opacity:.4;mix-blend-mode:multiply}.header,.drawer,.palette-menu,.account-popover,.paper-icon-menu{isolation:isolate}.letter-sheet:before{z-index:-1}.letter-sheet:before,.letter-tools:before,.reply-reference:before{background-image:var(--paper-texture,var(--paper-grain))}.header:before{content:none}.reply-reference,.conversation-letter{position:relative;isolation:isolate}.reply-reference{background:var(--paper)}.letter-unfold:before{background-image:var(--letter-texture,var(--paper-grain))}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;transition:none!important}button,input,summary{touch-action:manipulation}button:disabled{opacity:1;cursor:default;transition:none!important}.icon{width:20px;height:20px;stroke-width:1.5}.plain-btn,.pill-btn,.quiet-btn,.icon-btn,.account-text,.drawer-reset{min-height:44px;border:0;box-shadow:none;background:transparent;color:var(--ui);border-radius:0;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ui) 35%,transparent);text-underline-offset:4px;transition:background-color var(--motion-color) linear,color var(--motion-color) linear}.plain-btn:hover,.pill-btn:hover,.account-text:hover{background:transparent;color:var(--accent-text)}.plain-btn:active,.pill-btn:active,.account-text:active{color:#2f455f}.icon-btn,.quiet-btn{width:44px;min-width:44px;height:44px;border:0;border-radius:50%;text-decoration:none}.design-btn{width:44px;height:44px;border:0;border-radius:50%;background:transparent;box-shadow:none;color:var(--ui);transition:background-color var(--motion-color) linear,color var(--motion-color) linear}.design-btn:after,.send-btn:after,.apply-btn:after{content:none}.design-btn:hover,.icon-btn:hover,.quiet-btn:hover{background:var(--hover);box-shadow:none;border:0}.design-btn:active,.icon-btn:active,.quiet-btn:active{background:var(--pressed);box-shadow:none}.send-btn,.apply-btn{min-height:44px;border:0;background:#405e82;color:#fffdf5;box-shadow:none;border-radius:999px;font-weight:500;transition:background-color var(--motion-color) linear,color var(--motion-color) linear}.send-btn:hover,.apply-btn:hover{background:#375170;box-shadow:none}.send-btn:active,.apply-btn:active{background:#2f455f;box-shadow:none}.send-btn:disabled,.apply-btn:disabled{background:#d9d5cd;color:#686c65}.account-text:disabled,.icon-btn:disabled,.design-btn:disabled{color:#86897f;background:transparent}
.header{max-width:none;min-height:72px;margin-inline:auto;padding:12px max(32px,calc((100% - 976px)/2));gap:16px;background:var(--app-header);border-bottom:1px solid var(--header-divider)}.header-actions{gap:8px;flex-wrap:wrap}.header-actions button{min-height:44px}.header-actions .button-label{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap}.header-actions .quiet-btn{width:44px}#inbox{width:44px;height:44px;min-height:44px;padding:12px}#accountMenu summary{width:44px;height:44px;min-height:44px;padding:12px}.header-actions .icon{width:20px;height:20px}
.letter-tools{position:sticky;top:var(--header-height);z-index:9;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;gap:8px;max-width:1040px;margin-inline:auto;padding:8px 32px 0;min-height:52px;background:var(--paper)}.letter-tools .reader-reply{flex:none;min-height:44px;padding:0;text-decoration:none;font:400 12px/1 'DM Sans',sans-serif;white-space:nowrap;margin-left:auto}.reader-actions:not(:has(button:not([hidden]))){display:none}
.letter-tools .send-btn{width:auto;padding-inline:16px}.letter-tools .icon{width:20px;height:20px}.letter-tools .send-btn .icon{width:18px;height:18px}.letter-tools .button-label{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap}.letter-tools:not(:has(button:not([hidden]))){display:none}body[data-account-view=mailboxes] .letter-tools,body[data-account-view=drafts] .letter-tools{display:none}
.letter{width:100%;max-width:1088px;margin-inline:auto;padding:24px 32px 64px;min-height:calc(var(--workspace-height,100dvh) - var(--header-height) - 52px)}.letter-inner{width:100%;max-width:640px;margin-inline:auto}.editable-letter{width:100%;max-width:600px;margin-inline:auto}.greeting,.signature,.reply-reference .greeting,.reply-reference .signature{font-family:var(--font);font-weight:400;font-size:var(--size);line-height:var(--leading);letter-spacing:normal}.greeting{margin:0 0 24px}.signature{margin:0}.hand{font-weight:400;letter-spacing:normal;text-shadow:none;filter:none}.writing{min-height:calc(3 * var(--size) * var(--leading));caret-color:var(--ink);cursor:text;scroll-margin-top:calc(var(--header-height) + 84px)}.writing,.name-input{font-synthesis:none}.date{font:400 12px/20px 'DM Sans',sans-serif;color:var(--muted);opacity:1;letter-spacing:normal;margin:32px 0 8px}.reader-body{min-height:calc(3 * var(--size) * var(--leading))}.reader-actions{margin-top:48px}.address-line>label{flex:none;white-space:nowrap}.reply-reference .date{font:400 12px/20px 'DM Sans',sans-serif;margin:32px 0 8px}.reply-reference .greeting{margin-bottom:24px}.reply-zoom button{min-height:44px;width:44px;height:44px}.reply-zoom #replyZoomReset{width:52px;font-size:12px}.reply-context[open] summary{padding-right:160px}.conversation-letter .letter-date{font:400 12px/20px 'DM Sans',sans-serif;opacity:1;color:var(--muted);margin:32px 0 8px}.conversation-letter .letter-greeting,.conversation-letter .letter-signature{font-weight:400;line-height:var(--letter-leading,1.45)}
input:not([type=range]):not([type=checkbox]):not([type=hidden]),.account-dialog input:not([type=checkbox]){font-size:max(16px,1em);padding-inline:0;border:0;border-bottom:1px solid var(--input-line);border-radius:0;background:transparent;outline:0;box-shadow:none;transition:border-color var(--motion-color) linear;caret-color:var(--ink)}input:not([type=range]):not([type=checkbox]):not([type=hidden]):hover{border-bottom-color:var(--muted)}input:not([type=range]):not([type=checkbox]):not([type=hidden]):focus,.account-dialog input:focus-visible{border-bottom-color:var(--accent);outline:0;box-shadow:none;transition:none}.account-dialog label:has(+input:focus){color:var(--accent)}input[aria-invalid=true],input[aria-invalid=true]:focus{border-bottom-color:var(--error)!important}.account-dialog label:has(+input[aria-invalid=true]){color:var(--error)}.input-helper{font:400 12px/20px 'DM Sans',sans-serif;color:var(--ui);margin-top:8px}.account-dialog input{font-size:16px}.name-input{font-size:inherit!important}.name-input:focus-visible{box-shadow:none}.linkbox input{font-size:16px}
/* Palette controls keep their geometry; choices float in the top layer. */
.sheet-overlay{pointer-events:none;background:transparent}.settings-panel{position:fixed;left:var(--palette-left,clamp(24px,calc(50% + 352px),calc(100% - 304px)));top:var(--palette-top,calc(var(--header-height) + 32px));width:280px;height:auto;max-height:var(--palette-max-height,calc(100dvh - var(--header-height) - 64px));box-shadow:none;opacity:0;transform:translateY(var(--motion-travel));transition:opacity var(--motion-close) var(--close-ease),transform var(--motion-close) var(--close-ease);pointer-events:auto}.style-open .settings-panel{opacity:1;transform:translateY(0);transition-duration:var(--motion-open);transition-timing-function:var(--open-ease)}.drawer{height:auto;max-height:var(--palette-max-height,calc(100dvh - var(--header-height) - 64px));padding:24px;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:24px;background:var(--app-header);color:var(--ui);border:0;border-radius:0}.drawer-top{margin-bottom:24px;gap:8px;align-items:center}.drawer h2{font-size:30px;font-weight:400}.drawer button,.drawer input{scroll-margin-block:24px}.palette-group+.palette-group{margin-top:24px}.palette-label{display:block;font:400 12px/20px 'DM Sans',sans-serif;margin:0 0 8px;color:var(--muted)}.palette-trigger{display:flex;width:100%;min-height:44px;align-items:center;justify-content:space-between;gap:8px;border:0;border-bottom:1px solid var(--input-line);padding:8px 0;background:transparent;color:var(--ui);font:400 16px/24px 'DM Sans',sans-serif;text-align:left;transition:background-color var(--motion-color) linear}.palette-trigger:hover{background:var(--palette-hover)}.palette-trigger .icon{width:18px;height:18px}.palette-trigger[aria-expanded=true]{color:var(--accent-text);border-bottom-color:var(--accent);box-shadow:inset 0 -1px var(--accent)}.palette-menu{position:fixed;inset:auto;background:var(--app-header);color:var(--ui);padding:8px;margin:0;border:1px solid var(--input-line);border-radius:8px;box-shadow:0 8px 24px #36403920;list-style:none;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:8px}.palette-menu::backdrop{background:transparent;pointer-events:none}.palette-option{display:grid;grid-template-columns:1fr 20px;align-items:center;gap:8px;width:100%;min-height:44px;border:0;border-radius:4px;background:transparent;text-align:left;color:var(--ui);padding:8px;font-family:'DM Sans',sans-serif}.palette-option:hover,.palette-option:focus{background:var(--palette-hover)}.palette-option[aria-checked=true]{color:var(--accent-text);background:var(--accent-paper);transition:none}.palette-option .selection-mark{visibility:hidden;width:18px;height:18px}.palette-option[aria-checked=true] .selection-mark{visibility:visible}.palette-sample{display:block;font-weight:400;font-size:var(--letter-base-size);line-height:1.45;font-synthesis:none}.palette-color{display:block;flex:none;width:28px;height:28px;border:1px solid var(--input-line);border-radius:50%;background:var(--sample-color)}.palette-swatches:popover-open{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr))}.palette-swatches .palette-option{display:grid;place-items:center;padding:8px 0;min-width:44px;background:transparent}.palette-swatches .palette-option:hover{background:var(--palette-hover)}.palette-swatches .palette-option[aria-checked=true] .palette-color{outline:2px solid var(--accent);outline-offset:3px}.palette-option:focus-visible{outline-offset:-2px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.palette-defaults{display:flex;align-items:center;gap:12px;min-height:44px;margin:24px 0 0;font:400 13px/20px 'DM Sans',sans-serif}.palette-defaults input{appearance:none;width:18px;height:18px;flex:none;margin:0;border:1px solid var(--input-line);border-radius:2px;background:var(--app-header);cursor:pointer}.palette-defaults input:checked{border-color:var(--accent);background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3.25 3.25L14 5.5' fill='none' stroke='%23fffdf5' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:18px 18px;background-position:center;background-repeat:no-repeat}.design-actions{position:relative;background:transparent;margin:16px 0 0;padding:0}.design-actions .account-text{min-height:44px}.style-swipe{left:var(--side-offset);top:0;bottom:0;width:44px;transition:left var(--motion-close) var(--close-ease)}.style-open .style-swipe{transition-duration:var(--motion-open);transition-timing-function:var(--open-ease)}
.letter-sheet{transition:transform var(--motion-close) var(--close-ease),background-color var(--motion-open) linear}.style-open .letter-sheet{transition:transform var(--motion-open) var(--open-ease),background-color var(--motion-open) linear}
.account-popover,.paper-icon-menu{color:var(--ui);box-shadow:none;border:0}.account-popover{background:var(--app-header)}.account-popover:before{content:none}.paper-icon-menu{background:var(--menu)} .paper-icon-choices{grid-template-columns:repeat(5,minmax(44px,1fr))} .paper-icon-choices button{min-width:44px;min-height:44px}.account-notice,.toast{border:1px solid color-mix(in srgb,var(--ui) 12%,var(--app-header));border-radius:16px;box-shadow:0 2px 10px #3640390d,0 1px 2px #36403905;background:var(--app-header);color:var(--ui);padding:12px 17px;transition:none;box-sizing:border-box;overflow-wrap:anywhere}.feedback{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;margin:24px 0;align-items:start;text-align:left}.feedback-mark{width:20px;height:20px;display:grid;place-items:center;color:var(--success)}.feedback-mark svg{width:18px;height:18px}.feedback-text{grid-column:2}.feedback-label{font:400 13px/20px 'DM Sans',sans-serif;color:var(--ui)}.feedback-helper{font:400 12px/20px 'DM Sans',sans-serif;color:var(--ui);margin-top:4px!important}.feedback[data-kind=error] .feedback-mark,.feedback[data-kind=error] .feedback-label{color:var(--error)}.feedback[data-kind=pending] .feedback-mark{color:var(--ui)}.activity-mark{animation:activity-turn 1s linear infinite}@keyframes activity-turn{to{transform:rotate(360deg)}}.account-dialog{border:0;box-shadow:none;background:var(--paper);opacity:0;translate:0 var(--motion-travel);transition:opacity var(--motion-close) var(--close-ease),translate var(--motion-close) var(--close-ease),display var(--motion-close) allow-discrete,overlay var(--motion-close) allow-discrete}.account-dialog[open]{opacity:1;translate:0 0;transition-duration:var(--motion-open);transition-timing-function:var(--open-ease)}.account-dialog::backdrop{backdrop-filter:none;background:#36403940;opacity:0;transition:opacity var(--motion-close) linear,display var(--motion-close) allow-discrete,overlay var(--motion-close) allow-discrete}.account-dialog[open]::backdrop{opacity:1;transition-duration:var(--motion-open)}@starting-style{.account-dialog[open]{opacity:0;translate:0 var(--motion-travel)}.account-dialog[open]::backdrop{opacity:0}}
@media(min-width:960px){.letter-sheet,.style-open .letter-sheet{transform:none;width:100%}.style-swipe{display:none}.style-open .header{padding-inline:max(32px,calc((100% - 976px)/2));gap:16px}.style-open .header-actions{gap:8px}.style-open .brand{font-size:28px}}
@media(max-width:767px){.header{padding-inline:24px}.letter,.letter-tools{padding-inline:24px}.settings-panel{top:var(--palette-top,calc(var(--header-height) + 32px))}}
@media(max-width:959px){.letter-sheet,.style-open .letter-sheet{width:100%;transform:translateX(var(--side-offset))}.style-swipe{display:block}.style-open{--side-offset:var(--side-width)}.settings-panel{left:0;top:0;width:var(--side-width);height:100dvh;max-height:none;opacity:1;transform:translateX(calc(var(--side-offset) - var(--side-width)));transition:transform var(--motion-close) var(--close-ease)}.style-open .settings-panel{transform:translateX(0);transition-duration:var(--motion-open);transition-timing-function:var(--open-ease)}.drawer{height:100dvh;max-height:none}.letter{padding-top:24px;padding-bottom:48px}.reader-actions{margin-top:32px}}
@media(max-width:479px){.header{min-height:72px;flex-direction:row;align-items:center;padding:12px 20px;gap:16px}.header-actions{width:auto;justify-content:flex-end;gap:8px;flex-wrap:nowrap}.letter,.letter-tools{padding-inline:20px}.drawer{padding:20px}.brand{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0ms!important;animation-duration:0ms!important;scroll-behavior:auto!important}.activity-mark{animation:none}.settings-panel{transform:none}.account-dialog{translate:none}@starting-style{.account-dialog[open]{translate:none}}}
.feedback[data-kind=info]{grid-template-columns:1fr}.feedback[data-kind=info] .feedback-text{grid-column:1}.account-dialog .feedback-label,.account-dialog .feedback-helper{color:var(--ui)}.account-dialog .feedback[data-kind=error] .feedback-label{color:var(--error)}.account-dialog .feedback-mark:empty{visibility:hidden}.google-button{min-height:44px;box-shadow:none;font-weight:500} .paper-icon-choices button[aria-pressed=true]{border-bottom:2px solid var(--accent);color:var(--accent);position:relative} .paper-icon-choices button[aria-pressed=true]:after{content:'✓';position:absolute;right:2px;bottom:0;font-size:12px;color:var(--accent)}.account-dialog label{font-size:12px}.account-close{width:44px;height:44px;min-height:44px}.conversation-heading{transition:none}

.palette-menu{opacity:0;transform:translateY(var(--motion-travel));transition:opacity var(--motion-close) var(--close-ease),transform var(--motion-close) var(--close-ease)}.palette-menu.is-open{opacity:1;transform:translateY(0);transition-duration:var(--motion-open);transition-timing-function:var(--open-ease)}.reply-reference .greeting,.reply-reference .signature{font-size:calc(var(--size)*var(--reply-zoom,1))}.account-dialog:has(.feedback[data-kind=success]) .send-btn,.account-dialog:has(.feedback[data-kind=error]) .send-btn{transition:none}.modal-overlay{background:none;opacity:0;transition:opacity var(--motion-close) linear,display var(--motion-close) allow-discrete}.modal-overlay:not([hidden]){opacity:1;transition-duration:var(--motion-open)}.modal-overlay:before{content:"";position:fixed;inset:0;background:#36403940;z-index:-1}.modal{background:var(--paper);border:0;box-shadow:none;transform:translateY(var(--motion-travel));transition:transform var(--motion-close) var(--close-ease)}.modal-overlay:not([hidden]) .modal{transform:translateY(0);transition-duration:var(--motion-open);transition-timing-function:var(--open-ease)}@starting-style{.modal-overlay:not([hidden]){opacity:0}.modal-overlay:not([hidden]) .modal{transform:translateY(var(--motion-travel))}}
@media(prefers-reduced-motion:reduce){.palette-menu,.modal{transform:none}.letter-sheet{transition:none}}

.account-dialog .feedback-label{font:400 13px/20px 'DM Sans',sans-serif}.account-dialog .feedback-helper{font:400 12px/20px 'DM Sans',sans-serif}

.writing::placeholder,.writing:focus::placeholder{color:var(--muted);opacity:1}.name-input::placeholder{color:inherit;opacity:1}.account-dialog{color:var(--ui)}.account-dialog input:not([type=checkbox]),.linkbox input{color:var(--ui);caret-color:var(--ui)}

.google-button{border:0;border-radius:999px;background:#405e82;color:#fffdf5;transition:background-color var(--motion-color) linear}.google-button:hover{background:#375170}.google-button:active{background:#2f455f}.google-button:disabled{background:#d9d5cd;color:#686c65;transition:none}.paper-icon-trigger{width:44px;height:44px;min-height:44px;min-width:44px;border:0;border-radius:50%;padding:12px;color:var(--ui)}.paper-icon-trigger:hover{background:var(--hover)}.paper-icon-trigger:active{background:var(--pressed)}.account-page,.paper-person,.paper-icon-control,.mailbox-name{color:var(--ui)}.mailbox-name{font-family:'DM Sans',sans-serif;font-weight:400}.paper-icon-choices button{background:transparent;border:0;border-bottom:2px solid transparent;box-shadow:none}.paper-icon-choices button[aria-pressed=true]{background:transparent;border-bottom-color:var(--accent);box-shadow:none}

.paper-icon-trigger svg{width:18px;height:18px;opacity:1}#accountMenu summary.has-doodle{padding:4px}.paper-icon-choice:focus-visible,.paper-icon-trigger:focus-visible,.paper-icon-avatar:focus-visible,#accountMenu summary:focus-visible,.palette-option:focus-visible,.palette-trigger:focus-visible,.account-text:focus-visible,.send-btn:focus-visible,.design-btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.reply-zoom button:disabled{opacity:1;color:#86897f}.reply-reference .date{font-size:calc(12px*var(--reply-zoom,1));line-height:calc(20px*var(--reply-zoom,1))}.thread{max-width:640px}.paper-person{transition:background-color var(--motion-color) linear,color var(--motion-color) linear}.mailbox-tile:hover .paper-icon-avatar>.paper-person{transform:rotate(var(--person-tilt,0deg));box-shadow:inset 0 1px 0 #fff9,1px 3px 0 #8b745316,0 5px 12px #6e563411}.conversation-letter summary{color:var(--bubble-ink)}#deliveryTo{font-family:'DM Sans',sans-serif;color:var(--ui)}.header{transition:transform var(--motion-open) var(--open-ease),opacity var(--motion-open) var(--open-ease),background-color var(--motion-open) linear}.hand{transition:color var(--motion-open) linear}.writing,.name-input,.writing:focus-visible,.name-input:focus-visible{transition:color var(--motion-open) linear,caret-color var(--motion-open) linear!important}
@media(prefers-reduced-motion:reduce){.writing,.name-input,.writing:focus-visible,.name-input:focus-visible{transition-duration:0ms!important}}
@media(forced-colors:active){.header{background:Canvas;border-bottom-color:CanvasText}.palette-texture:before{display:none}.letter-sheet:before,.reply-reference:before,.letter-unfold:before,.account-popover:before,.paper-icon-menu:before{display:none}.writing,.name-input{color:CanvasText;caret-color:CanvasText}}
#accountMenu .account-avatar-summary.has-doodle{width:44px;height:44px;min-width:44px;min-height:44px;padding:4px}
.paper-icon-menu{opacity:0;translate:0 var(--motion-travel);transition:opacity var(--motion-close) var(--close-ease),translate var(--motion-close) var(--close-ease),display var(--motion-close) allow-discrete,overlay var(--motion-close) allow-discrete}
.paper-icon-menu:popover-open{opacity:1;translate:0 0;transition-duration:var(--motion-open);transition-timing-function:var(--open-ease)}
@starting-style{.paper-icon-menu:popover-open{opacity:0;translate:0 var(--motion-travel)}}
@media(prefers-reduced-motion:reduce){.paper-icon-menu{translate:none}@starting-style{.paper-icon-menu:popover-open{translate:none}}}

.palette-texture{background-color:var(--paper);background-image:var(--sample-texture);background-size:240px 240px}.palette-texture-choice{display:flex;align-items:center;gap:12px}
/* Floating feedback is one rounded paper container; in-context helpers stay bare. */
.account-notice.feedback{opacity:1;backdrop-filter:none;width:460px;max-width:calc(100vw - 40px);bottom:max(24px,env(safe-area-inset-bottom));margin:0;padding:22px 56px 22px 24px}.account-notice[data-kind=error]{border-color:color-mix(in srgb,var(--ui) 12%,var(--app-header))}.account-notice .feedback-label{font-size:14px;line-height:22px}.account-notice .feedback-helper{font-size:13px;line-height:21px}.account-notice .account-text{margin-top:10px;min-height:44px;font-size:13px}
.account-notice .notice-close{position:absolute;top:8px;right:8px;width:44px;height:44px;padding:0;display:grid;place-items:center;color:var(--muted)}.notice-close .icon{width:18px;height:18px}
@media(forced-colors:active){.account-notice,.toast{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}.account-notice[data-kind=error]{border-color:CanvasText}}

@media(forced-colors:active){.palette-defaults input,.palette-defaults input:checked{appearance:auto;background:none;border:0}}

/* Conversation navigation stays visible on phone scrolls as well as desktop. */
body[data-account-view="conversation"] .header,body[data-account-view="conversation"] .header.is-hidden:not(:focus-within){transform:none;opacity:1;pointer-events:auto}

/* All writing styles share one rhythm; only local viewing zoom changes scale. */
.view-zoom{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex:none;gap:0;margin:0}
.letter-tools #customize{margin-left:auto}
.view-zoom button,.reply-zoom button,.letter-zoom button{width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ui);font:400 14px/1 'DM Sans',sans-serif}
.reply-zoom #replyZoomReset{width:40px;border-radius:4px;font-size:11px}
.view-zoom button:hover,.letter-zoom button:hover{background:var(--hover)}.view-zoom button:active,.letter-zoom button:active{background:var(--pressed)}.view-zoom button:disabled,.letter-zoom button:disabled{color:#86897f;background:transparent}
.letter-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:0 0 16px}
.letter-topbar .letter-zoom{grid-column:2}
.letter-topbar .open-paper{grid-column:3;justify-self:end;min-height:32px;height:32px;padding:0 8px;border-radius:6px;color:var(--ui);font:400 12px/1 'DM Sans',sans-serif;white-space:nowrap;text-decoration:none}
.letter-topbar .open-paper:hover{background:var(--hover)}.letter-topbar .open-paper:active{background:var(--pressed)}.letter-topbar .open-paper:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.letter-zoom{display:flex;align-items:center;justify-content:center;gap:0;margin:0}
.letter-zoom button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.conversation-letter p,.conversation-letter .letter-greeting,.conversation-letter .letter-signature{font-size:calc(var(--letter-base-size)*var(--letter-view-zoom,var(--view-zoom)));line-height:var(--leading)}
.date{font-size:calc(12px*var(--view-zoom));line-height:calc(20px*var(--view-zoom))}
.conversation-letter .letter-date{font-size:calc(12px*var(--letter-view-zoom,var(--view-zoom)));line-height:calc(20px*var(--letter-view-zoom,var(--view-zoom)))}
.reply-reference .date{font-size:calc(12px*var(--view-zoom)*var(--reply-zoom,1));line-height:calc(20px*var(--view-zoom)*var(--reply-zoom,1))}
@media(max-width:399px){.letter-tools .send-btn{padding-inline:8px;gap:4px}.letter-tools .send-btn .icon{width:14px;height:14px}}
@media(max-width:359px){.letter-tools{gap:2px;padding-inline:12px}}

.thread-item h3,.thread-item p{font-family:var(--font);font-size:var(--size);line-height:var(--leading);color:var(--ink)}

/* Native editable greeting and closing use the same ink and sizing as names. */
.phrase-field{max-width:calc(100% - 2ch);margin-inline-end:0}.phrase-field .name-measure{padding:0}.phrase-field .name-input{border:0!important;box-shadow:none!important}
/* Send separates private correspondence from link invitations. */
.sharing-modal{max-width:440px;max-height:calc(100dvh - 36px);overflow:auto;border-radius:20px;padding:28px;text-align:left;color:var(--ui)}
.sharing-modal h2{padding-right:32px;margin:0}
.share-methods{display:flex;gap:8px;margin:28px 0}
.share-method{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:var(--ui);font:400 12px/20px 'DM Sans',sans-serif;text-decoration:none;cursor:pointer}
.share-method-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--hover);transition:background-color var(--motion-color) linear,color var(--motion-color) linear}
.share-method svg{width:26px;height:26px}.share-method:hover .share-method-icon{background:var(--pressed);color:var(--accent)}.share-method:active .share-method-icon{background:var(--accent-paper)}
.share-method:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.share-link-row{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 14px;border-radius:10px;background:var(--hover)}
.sharing-modal #shareUrl{display:block;flex:1;width:0;min-width:0;margin:0;padding:8px 0;border:0;background:transparent;color:var(--muted);font:400 13px/24px 'DM Sans',sans-serif;text-overflow:ellipsis}
.sharing-modal #shareUrl:focus{outline:0;border-radius:0;box-shadow:none}
.sharing-modal #shareUrl:focus-visible{box-shadow:inset 0 -1px var(--accent)}
.sharing-modal #copy{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:12px;border:0;border-radius:8px;background:transparent;color:var(--ui)}
.sharing-modal #copy:hover{background:var(--pressed)}.sharing-modal #copy svg{width:20px;height:20px}.copy-done{display:none}#copy[data-copied=true] .copy-mark{display:none}#copy[data-copied=true] .copy-done{display:block}
.sharing-modal .sharing-note{font:400 11px/18px 'DM Sans',sans-serif;color:var(--muted);margin:8px 0 0}
.paragraph-share{margin-top:20px}.paragraph-share .account-text{font-size:12px}
.sharing-modal #storageDisclosure{font:400 12px/20px 'DM Sans',sans-serif;margin:24px 0 16px}.sharing-modal #createShortLink{padding:10px 18px}
@media(max-width:400px){.sharing-modal{padding:24px 20px}.share-methods{gap:4px}.share-method-icon{width:48px;height:48px}.share-method{font-size:11px}}

/* Link sharing and private correspondence live together in the Send modal. */
.recipient-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 8px;margin:20px 0;max-height:240px;overflow:auto;padding:16px 5px}
.recipient-method .share-method-icon{position:relative;width:76px;height:76px;border:2px solid transparent;font:400 25px/1 'Newsreader',Georgia,serif}
.recipient-method[aria-pressed=true] .share-method-icon{border-color:var(--accent);background:var(--accent-paper);color:var(--accent)}
.recipient-name{max-width:100%;overflow-wrap:anywhere}.recipient-check{display:none;position:absolute;bottom:-3px;right:-3px;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--paper)}
.recipient-method[aria-pressed=true] .recipient-check{display:grid}.recipient-check svg{width:14px;height:14px}
.paragraph-share .account-dialog-actions{justify-content:flex-end;margin-top:20px}
@media(max-width:400px){.recipient-methods{gap:20px 4px}.recipient-method .share-method-icon{width:56px;height:56px}}

.send-tabs{display:flex;justify-content:center;gap:28px;margin:24px 0 0}
.send-tabs [role=tab]{min-height:44px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font:400 13px/20px 'DM Sans',sans-serif;box-shadow:none}
.send-tabs [role=tab][aria-selected=true]{color:var(--accent);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.send-tabs [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Both panels size one grid row; only the active panel is visible and interactive. */
.send-panels.with-accounts{display:grid}
.send-panels.with-accounts>section{grid-area:1/1;min-width:0}
.send-panels.with-accounts>section[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.send-panels.with-accounts>.paragraph-share{display:flex!important;flex-direction:column}
.send-panels.with-accounts .paragraph-share #delivery{display:flex;flex-direction:column;flex:1}
.send-panels.with-accounts .paragraph-share .account-dialog-actions{margin-top:auto;padding-top:20px}

.recipient-method .paper-person{border:0;box-shadow:none;transform:none}
.recipient-method .paper-person svg{width:60%;height:60%}
.recipient-method[aria-pressed=true] .paper-person{background:transparent;color:var(--accent)}

/* Compact control previews have their own scale, independent of letter typography. */
.palette-menu .palette-sample{font-size:18px;line-height:24px;overflow-wrap:anywhere}
.palette-menu .palette-option{font-size:14px;line-height:20px;min-height:44px}
.palette-menu .palette-color{width:24px;height:24px}
/* Keep the original placement beneath the account trigger. */
.account-popover{top:50px;width:min(220px,calc(100vw - 16px));max-height:calc(100dvh - var(--header-height) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:10px 12px;border:1px solid color-mix(in srgb,var(--ui) 12%,var(--app-header));box-shadow:0 8px 24px #36403914,0 2px 6px #36403908}
#accountMenu{--profile-motion:60ms}
.account-popover{opacity:0;translate:none;transition:opacity var(--profile-motion) linear}
#accountMenu[open] .account-popover{opacity:1}
@starting-style{#accountMenu[open] .account-popover{opacity:0}}
.account-popover .profile-row{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 0;font:400 13px/20px 'DM Sans',sans-serif;color:var(--ui);text-decoration:none;text-align:left}
.account-popover button.profile-row:hover,.account-popover button.profile-row:active{text-decoration:none}
.account-popover .profile-row>svg{width:18px;height:18px;flex:0 0 18px;margin:0;stroke-width:1.5}
.account-popover .profile-row>[data-i18n]{margin:0;font:inherit;color:inherit}
.account-popover .profile-identity{gap:12px;padding-block:10px 16px;margin-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--ui) 12%,var(--app-header))}
.account-popover .profile-avatar{display:block;width:48px;height:48px;flex:0 0 48px;margin:0}
.account-popover .profile-avatar .paper-person{display:grid;margin:0;color:var(--ui);transform:none}
.account-popover .profile-name{display:flex;align-items:center;min-width:0;flex:1;margin:0;color:inherit}
.account-popover #settingsButton{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin-left:auto;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted)}
.account-popover #settingsButton svg{width:18px;height:18px;margin:0;stroke-width:1.5}
.account-popover #settingsButton:hover{background:var(--hover);color:var(--ui)}
.account-popover #identity{display:block;min-width:0;font:inherit;color:inherit;margin:0;overflow-wrap:anywhere}
/* Newsreader's visible letters sit above its line-box center. */
.account-popover .profile-identity #identity{font:400 20px/24px 'Newsreader',Georgia,serif;position:relative;top:2px}
.account-popover #signOut{color:var(--error)}

/* Shared disclosure motion. Keep Profile's absolute menu in place while its
   native details content exits; it must not clip into the header. */
#accountMenu::details-content{
 content-visibility:hidden;
 transition:content-visibility var(--profile-motion) allow-discrete;
}
#accountMenu[open]::details-content{content-visibility:visible}
#accountMenu:not([open]) .account-popover{pointer-events:none}
.modal-overlay[hidden]{pointer-events:none}
.compose-history{
 opacity:1;translate:0 0;
 transition:opacity var(--motion-open) var(--open-ease),translate var(--motion-open) var(--open-ease),display var(--motion-open) allow-discrete;
}
.compose-history[hidden]{
 opacity:0;translate:0 var(--motion-travel);pointer-events:none;
 transition-duration:var(--motion-close);transition-timing-function:var(--close-ease);
}
@starting-style{.compose-history:not([hidden]){opacity:0;translate:0 var(--motion-travel)}}
.palette-trigger .icon,.folded-chevron,.reply-context summary>.reply-chevron{
 transition:transform var(--motion-close) var(--close-ease);
}
.palette-trigger[aria-expanded=true] .icon{transform:rotate(180deg)}
.palette-trigger[aria-expanded=true] .icon,.conversation-letter[open] .folded-chevron,.reply-context[open] summary>.reply-chevron{
 transition-duration:var(--motion-open);transition-timing-function:var(--open-ease);
}
/* Modern browsers interpolate intrinsic height. Native details remains the
   immediate functional fallback where ::details-content is unsupported. */
.conversation-letter::details-content,.reply-context::details-content{
 block-size:0;overflow:clip;interpolate-size:allow-keywords;
 transition:block-size var(--motion-close) var(--close-ease),content-visibility var(--motion-close) allow-discrete;
}
.conversation-letter[open]::details-content,.reply-context[open]::details-content{
 block-size:auto;transition-duration:var(--motion-open);transition-timing-function:var(--open-ease);
}
/* Send tab panels replace each other immediately, then introduce the incoming
   controls. No retained outgoing panel competes for focus or layout. */
#paragraphShare:not([hidden]),#inviteShare:not([hidden]),.object-controls:not([hidden]),.object-list:not([hidden]){
 animation:controls-enter var(--motion-open) var(--open-ease);
}
@keyframes controls-enter{from{opacity:0;translate:0 var(--motion-travel)}to{opacity:1;translate:0 0}}
/* Validation and confirmed notices appear immediately; only dismissal fades. */
.account-notice,.toast{transition:opacity var(--motion-close) var(--close-ease),display var(--motion-close) allow-discrete}
.account-notice[hidden],.toast:not(.show){opacity:0;pointer-events:none}
.account-notice:not([hidden]),.toast.show{opacity:1;transition-duration:0s}
@media(prefers-reduced-motion:reduce){
 :root{--motion-open:0ms;--motion-close:0ms;--motion-color:0ms;--motion-travel:0px}
 #accountMenu::details-content,.conversation-letter::details-content,.reply-context::details-content{transition:none}
 #paragraphShare:not([hidden]),#inviteShare:not([hidden]),.object-controls:not([hidden]),.object-list:not([hidden]){animation:none}
 .compose-history{translate:none}
 @starting-style{.compose-history:not([hidden]){translate:none}}
}

/* Optional identity sits above the salutation in the letter's own ink and font. */
.letter-title{display:block;margin:0 0 24px;font-family:var(--font);font-size:calc(var(--size)*1.2);font-weight:500;font-synthesis:none;-webkit-text-stroke:.15px currentColor;line-height:var(--leading);color:var(--ink);overflow-wrap:anywhere;letter-spacing:normal}
.letter-title[hidden]{display:none}.title-input#letterTitle{font-family:var(--font);font-size:calc(var(--size)*1.2);font-weight:500;line-height:var(--leading);color:var(--ink);width:100%;min-width:0;padding:0;border:0;border-radius:0;background:transparent;outline:0;caret-color:var(--ink);font-synthesis:none;-webkit-text-stroke:.15px currentColor}.title-input:focus-visible{box-shadow:0 1px 0 var(--accent)}
.reply-reference .letter-title{font-size:calc(var(--size)*1.2*var(--reply-zoom,1))}
.conversation-letter .letter-title{font-family:var(--letter-font);color:var(--letter-ink);font-size:calc(var(--letter-base-size)*1.2*var(--letter-view-zoom,var(--view-zoom)))}

.add-title{display:block;min-height:44px;margin:0 0 8px;padding:0;border:0;background:transparent;color:var(--muted);font:400 12px/20px "DM Sans",sans-serif;cursor:pointer}.add-title:hover{color:var(--accent-text)}.add-title[hidden]{display:none}

/* Korean names begin at the writing edge; the editable recipient phrase follows the name. */
#writeGreeting.is-suffix>.name-field:not(.phrase-field){order:-1}
#writeGreeting.is-suffix .name-field,#writeSignature.is-korean .name-field{margin-inline-end:0}
#writeGreeting.is-suffix .name-measure,#writeGreeting.is-suffix .name-input,#writeSignature.is-korean .name-measure,#writeSignature.is-korean .name-input{padding-inline:0}
#writeGreeting.is-suffix #greeting{border-bottom:1px solid var(--input-line)!important;transition:border-color 150ms linear}
#writeGreeting.is-suffix:has(#to:hover,#greeting:hover) .name-input{border-bottom-color:var(--muted)!important}
#writeGreeting.is-suffix:has(#to:focus,#greeting:focus) .name-input{border-bottom-color:var(--accent)!important;transition:none}
.phrase-field:has(.name-measure:empty){min-width:0;width:0}
.phrase-field:has(.name-measure:empty):focus-within{min-width:1ch;width:auto}

#writeSignature.is-korean #fromSuffix{border-bottom:1px solid var(--input-line);transition:border-color 150ms linear}
#writeSignature.is-korean:has(#from:hover) #fromSuffix{border-bottom-color:var(--muted)}
#writeSignature.is-korean:has(#from:focus) #fromSuffix{border-bottom-color:var(--accent);transition:none}