:root {
  color-scheme: light;
  --paper: #f5f3e8;
  --ink: #192b26;
  --muted: #63705f;
  --line: #dcded0;
  --green: #28655b;
  --green-dark: #1b4c43;
  --danger: #a24434;
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  font-family: var(--body);
  font-size: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }
/* Keep the same content width when pages grow or modal scroll locks change. */
html, .settings-dialog, .delete-dialog, .record-layout, .preview-area, .record-sidebar, .originals pre { scrollbar-width: none; }
html::-webkit-scrollbar,
.settings-dialog::-webkit-scrollbar,
.delete-dialog::-webkit-scrollbar,
.record-layout::-webkit-scrollbar,
.preview-area::-webkit-scrollbar,
.record-sidebar::-webkit-scrollbar,
.originals pre::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  margin: 0; color: var(--ink); line-height: 1.5; min-height: 100dvh;
  background: radial-gradient(ellipse at 5% 10%, #d0d5bb 0, transparent 43%),
    radial-gradient(ellipse at 100% 60%, #d9ddc8 0, transparent 40%),
    radial-gradient(ellipse at 12% 100%, #e4dfc9 0, transparent 42%), #efeee4;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
a { color: inherit; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: none; }
input, select { width: 100%; border: 1px solid #d9dfd4; border-radius: 8px; padding: 12px 14px; background: #fffffaad; outline: none; color: var(--ink); font-size: .9375rem; transition: border-color .18s, box-shadow .18s; }
input:focus, select:focus { border-color: #809f8e; box-shadow: 0 0 0 3px #28655b0b; }
input::placeholder, textarea::placeholder { color: #63705f; opacity: 1; }
#api-key[data-key-saved="true"]::placeholder { font-family: Arial, sans-serif; font-size: .875rem; letter-spacing: .2em; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
textarea:focus { outline: none; }
[hidden] { display: none !important; }
::selection { background: #dbe9df; }

/* A short, staggered entrance keeps navigation light and immediately usable. */
.page-loader { position: fixed; z-index: 50; inset: 0 0 auto; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, #6e947f, #a6b99a); transform-origin: left; animation: page-loading .85s cubic-bezier(.2,.75,.25,1) both; }
.site-header, .login-header { animation: page-enter .55s .02s both; }
.compose-intro { animation: page-enter .65s .07s backwards; }
#drop-area { animation: page-enter .65s .14s backwards; }
.history-section { animation: page-enter .65s .23s backwards; }
.workspace-footer, .login-footer { animation: page-enter .6s .3s backwards; }
.login-card { animation: page-enter .65s .1s backwards; }
@keyframes page-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-loading { 0% { opacity: 0; transform: scaleX(.04); } 20% { opacity: .75; } 75% { opacity: .7; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
.state-transition { position: relative; }
.state-current { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.state-previous { position: absolute; inset: 0; padding: inherit; display: block; overflow: hidden; pointer-events: none; }
.record-field > .state-previous { display: flex; align-items: center; }
.record-field > .state-previous > .state-current { width: 100%; }

/* A quiet glass frame connects the workspace to the onlyPT brand. */
.workspace-shell { width: min(1200px, 100%); min-height: 100dvh; margin: 0 auto; padding: 26px 34px 0; background: linear-gradient(120deg, #fffff77a, #f9f7ed94); border-inline: 1px solid #fffff8b3; box-shadow: 0 0 90px #3e4d2d09, inset 0 0 40px #fffff730; }
.site-header { height: 64px; padding: 0 16px 0 22px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #fffffff0; background: #fcfcf38a; border-radius: 10px; box-shadow: 0 5px 20px #3c4b3004; }
.brand-lockup { display: flex; gap: 20px; align-items: center; }
.wordmark { font-family: var(--body); font-size: 30px; font-weight: 700; text-decoration: none; letter-spacing: -1.5px; color: #192922; line-height: 1; }
.brand-divider { width: 1px; height: 21px; background: #cdd5c5; }
.workspace-name { font-size: .8125rem; color: #63705f; }
.icon-button { border: 1px solid transparent; border-radius: 8px; width: 38px; height: 38px; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: #697a6e; transition: background .16s, color .16s; }
.icon-button:hover { background: #fffffcb3; border-color: #fff; color: var(--green); }
.compose-section { min-height: calc(73vh - 90px); display: flex; align-items: center; justify-content: center; padding: 44px 28px 70px; }
.composer-wrap { width: min(760px, 100%); }
.compose-intro { text-align: center; margin-bottom: 36px; }
.compose-intro h1 { width: fit-content; max-width: 100%; margin: 0 auto; font-family: var(--display); font-size: clamp(48px, 5vw, 70px); font-weight: 500; line-height: 1.03; letter-spacing: -2.3px; transform: scale(1.16); transform-origin: center 65%; transition: transform .46s cubic-bezier(.2,.75,.25,1); }
.composer-wrap.is-editing .compose-intro h1 { transform: scale(1); }
.compose-intro h1 span { color: #416456; }
.composer { position: relative; width: 88%; margin-inline: auto; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: end; gap: 12px; padding: 8px; border: 1px solid #fffffff7; outline: 1px solid #c8d0bc70; background: linear-gradient(115deg, #fffffff0, #fffff9c9); border-radius: 15px; box-shadow: 0 10px 35px #3848270a, 0 2px 5px #38482703; transition: width .46s cubic-bezier(.2,.75,.25,1), padding .46s cubic-bezier(.2,.75,.25,1), outline-color .18s, box-shadow .18s; }
.composer-wrap.is-editing .composer { width: 100%; padding: 12px; }
.composer:focus-within { outline-color: #9cb3a2; box-shadow: 0 12px 40px #3848270d, 0 0 0 4px #28655b04; }
.composer.dragover { outline-color: var(--green); background: #edf5eb; }
.composer textarea { resize: none; flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; margin: 0; line-height: 26px; height: 42px; max-height: 260px; font-size: 1rem; overflow-y: hidden; color: var(--ink); }
.composer textarea { transition: height .22s cubic-bezier(.2, .75, .25, 1); scrollbar-width: thin; scrollbar-color: #b6c2ad transparent; overscroll-behavior: contain; }
.composer .composer-measure { position: absolute; top: 0; left: 0; height: 0 !important; min-height: 0; max-height: none; visibility: hidden; pointer-events: none; overflow: hidden; transition: none !important; }
@supports selector(::-webkit-scrollbar) {
  .composer textarea, .composer .attachments { scrollbar-width: auto; scrollbar-color: auto; }
  .composer textarea::-webkit-scrollbar, .composer .attachments::-webkit-scrollbar { width: 5px; height: 5px; }
  .composer textarea::-webkit-scrollbar-track, .composer .attachments::-webkit-scrollbar-track { background: transparent; }
  .composer textarea::-webkit-scrollbar-thumb, .composer .attachments::-webkit-scrollbar-thumb { background: #b6c2ad; border-radius: 99px; }
  .composer textarea::-webkit-scrollbar-thumb:hover, .composer .attachments::-webkit-scrollbar-thumb:hover { background: #899e7d; }
  .composer textarea::-webkit-scrollbar-button, .composer .attachments::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .composer textarea::-webkit-scrollbar-corner, .composer .attachments::-webkit-scrollbar-corner { background: transparent; }
}
.attach-button { border: 0; background: transparent; color: #788676; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; flex: none; }
.attach-button:hover { background: #eff2e8; color: var(--green); }
.send-button { border: 1px solid #1c514a; display: grid; place-items: center; background: var(--green); color: #fff; width: 42px; height: 42px; flex: none; border-radius: 9px; box-shadow: 0 2px 3px #123d2510; transition: background .15s; }
.send-button:hover:enabled { background: var(--green-dark); }
.send-button:disabled { background: #e8ebe2; border-color: #e2e6dc; color: #a3afa1; box-shadow: none; }
.send-button.busy svg { animation: pulse 1s infinite; }
.compose-caption { position: relative; z-index: 0; width: 88%; margin-inline: auto; display: flex; justify-content: space-between; gap: 16px; font-size: .75rem; color: #63705f; padding: 13px 3px; opacity: 0; visibility: hidden; transform: translateY(-22px); pointer-events: none; transition: width .46s cubic-bezier(.2,.75,.25,1), transform .24s ease-in, opacity .18s, visibility 0s .24s; }
.composer-wrap.is-focused .compose-caption { opacity: 1; visibility: visible; transform: translateY(0); transition: width .46s cubic-bezier(.2,.75,.25,1), transform .32s .46s cubic-bezier(.2,.75,.25,1), opacity .24s .46s, visibility 0s .46s; }
.composer-wrap > .composer { z-index: 1; }
.composer-wrap.is-editing .compose-caption { width: 100%; }
.attachments { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; overflow-x: auto; padding: 3px 3px 7px; scrollbar-width: thin; scrollbar-color: #cad4c0 transparent; }
.attachments:empty { display: none; }
.attachment-image { position: relative; flex: 0 0 104px; width: 104px; height: 104px; border: 1px solid #dce2d2; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px #263a2205; }
.attachment-image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
.attachment-image .attachment-remove { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid #dae0d4; border-radius: 50%; background: #fffffff5; color: #52624e; box-shadow: 0 1px 4px #263a221a; }
.attachment-image .attachment-remove svg { width: 13px; height: 13px; stroke-width: 1.8; }
.attachment-image .attachment-remove:hover:enabled { background: #edf2e7; color: var(--ink); }
.attachment-remove:disabled { opacity: .45; }

.attachment-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; max-width: 100%; background: #fffffaba; border: 1px solid #dce2d2; border-radius: 8px; padding: 6px 7px 6px 11px; font-size: .8125rem; }
.attachment-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.attachment-chip small { color: var(--muted); }
.attachment-chip button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; color: var(--muted); }
.attachment-chip svg { width: 14px; height: 14px; }
.attachment-chip button:hover { background: #eef2e7; }

.history-section { padding: 0 22px 30px; }
.history-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.history-heading h2 { font-family: var(--display); font-size: 31px; line-height: 1.15; font-weight: 500; letter-spacing: -.6px; margin: 0; }
.heading-period { color: #5a7b64; }
.archive-count { font-size: .75rem; color: #63705f; border: 1px solid #dae0d1; background: #fffffa52; padding: 4px 10px; border-radius: 6px; }
.archive-tools { display: flex; align-items: center; gap: 14px; }
.archive-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #d8dfce; border-radius: 8px; background: #fffef75c; transition: background .2s, border-color .2s; }
.archive-search:focus-within { background: #fffef7; border-color: #93ab95; }
.archive-search > svg { width: 16px; height: 16px; color: #798975; flex: none; }
.archive-search input { width: 180px; border: 0; border-radius: 0; padding: 0; outline: none; background: transparent; box-shadow: none; font-size: .8125rem; min-width: 0; }
.archive-search input:focus { outline: none; box-shadow: none; }
.archive-search input::-webkit-search-cancel-button { display: none; }
.search-clear { display: grid; place-items: center; width: 18px; height: 18px; border: 0; padding: 0; color: #74826d; background: none; }
.search-clear svg { width: 13px; height: 13px; }
.history-loader { min-height: 36px; display: flex; justify-content: center; align-items: center; gap: 14px; font-size: .75rem; color: #7b8772; padding-top: 12px; }
.history-loader .text-button { font-size: .75rem; }
.history-loader.is-loading::before { content: ''; width: 12px; height: 12px; border: 1.5px solid #d2dcc9; border-top-color: #678775; border-radius: 50%; animation: loading-spin .75s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.history-table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; font-size: .875rem; }
.history-table th { font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #63705f; padding: 13px 16px; background: #e4e8d64d; border-block: 1px solid #dce1d2; }
.history-table th:first-child { width: 25%; }
.history-table th:nth-child(2) { width: 28%; }
.history-table th:nth-child(3) { width: 28%; }
.history-table th:nth-child(4) { width: 16%; }
.history-table th:last-child { width: 3%; padding: 0; }
.history-table td { border-bottom: 1px solid #dce1d280; padding: 22px 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #63705f; }
.record-row { transition: background .15s; }
.history-table .record-row > td { padding: 0; overflow: visible; }
.record-shell { position: relative; overflow: hidden; }
.record-surface { position: relative; z-index: 1; width: 100%; min-height: 65px; display: grid; grid-template-columns: 25% 28% 28% 16% 3%; align-items: center; text-align: left; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; transition: width .28s cubic-bezier(.2,.75,.25,1), background .2s, border-radius .28s; }
.record-field { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 22px 16px; color: #63705f; }
.record-field:first-child { font-weight: 600; color: #293e2f; }
.record-field:nth-child(3) { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.record-actions { position: absolute; z-index: 2; inset: 0 4px 0 auto; display: flex; align-items: center; gap: 4px; opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity .2s, transform .28s cubic-bezier(.2,.75,.25,1); }
.record-action { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #6c806a; }
.record-action svg { width: 17px; height: 17px; stroke-width: 1.6; }
.record-action:hover, .record-action:focus-visible { background: #fffef9; border-color: #d8e0ce; color: var(--green); }
.record-action.delete-record:hover, .record-action.delete-record:focus-visible { background: #faeee7; border-color: #edd6c9; color: var(--danger); }
.record-row:hover .record-surface, .record-row:focus-within .record-surface { width: calc(100% - 84px); background: #fffffab3; border-radius: 8px; }
.record-row:hover .record-actions, .record-row:focus-within .record-actions { opacity: 1; transform: translateX(0); pointer-events: auto; }
.record-surface:focus-visible { outline: 2px solid #839f88; outline-offset: -3px; }
.record-row.record-arriving { opacity: 0; pointer-events: none; transform-origin: left center; }
.submission-overlay { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 8; }
.submission-strip { position: absolute; top: 0; left: 0; overflow: hidden; transform-origin: 0 0; will-change: transform, opacity; }
.submission-overlay .composer-flight-copy { position: absolute; margin: 0; padding: 12px; visibility: visible; pointer-events: none; }
.submission-overlay *, .submission-overlay *::before { animation: none !important; transition: none !important; }
.composer-in-flight { visibility: hidden; pointer-events: none; }
.composer-resetting textarea { transition: none !important; }
.composer-compact-transfer { overflow: hidden; transform-origin: center; }
.composer-surfacing::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(175deg, transparent 25%, #ffffffb0 53%, transparent 73%); animation: surface-light var(--surface-duration) cubic-bezier(.18,.8,.25,1) var(--surface-delay) both; }
@keyframes surface-light { from { opacity: 0; transform: translateY(16px); } 35% { opacity: .7; } to { opacity: 0; transform: translateY(-18px); } }
.record-row:hover { background: #ffffff26; }
.record-row:focus-visible { outline: 2px solid #839f88; outline-offset: -2px; }
.record-row .row-chevron { padding: 0; color: #99a58f; }
.row-chevron svg { width: 15px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 400; white-space: nowrap; color: #63705f; transition: color .3s; }
.status::before { content: ''; width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex: none; }
.status.complete { color: #3f735b; }
.status.active { color: #7c6027; }
.status.failed { color: var(--danger); }
.status.active::before { animation: pulse 1.5s infinite; }
.empty-history { display: flex; align-items: center; gap: 17px; padding: 30px 16px; border-bottom: 1px solid #dce1d280; }
.empty-icon { display: grid; place-items: center; width: 44px; height: 48px; border: 1px solid #d8dfcd; border-radius: 9px; background: #fffff873; color: #859879; }
.empty-history svg { width: 23px; height: 23px; stroke-width: 1.25; }
.empty-history p { margin: 0 0 4px; font-size: .875rem; color: #53664d; }
.empty-history div > span { font-size: .8125rem; color: #63705f; }
.workspace-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 25px; font-size: .6875rem; color: #63705f; letter-spacing: .02em; }
.muted { font-size: .8125rem; color: var(--muted); }

/* Dialogs use the same paper and ink, keeping the document preview neutral. */
.message { font-size: .8125rem; padding: 12px; background: #e8efe3; border: 1px solid #d6e2ce; border-radius: 8px; color: var(--green); white-space: pre-wrap; overflow-wrap: anywhere; animation: appear .24s ease-out; }
.message.error { background: #fbefea; border-color: #f0dbcf; color: var(--danger); }
.message:empty { display: none; }
dialog { padding: 0; border: 1px solid #ffffffe6; border-radius: 15px; color: var(--ink); box-shadow: 0 32px 120px #182b2640, 0 3px 15px #182b260a; background: #faf9f0; }
dialog::backdrop { background: #26352d40; backdrop-filter: blur(7px); }
dialog[open] { animation: dialog-enter .28s cubic-bezier(.2,.75,.25,1); }
dialog[open]::backdrop { animation: backdrop-enter .25s ease-out; }
dialog[data-closing]::backdrop { animation: backdrop-exit .17s ease-in forwards; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-exit { to { opacity: 0; } }
.delete-dialog { width: min(420px, calc(100vw - 32px)); padding: 30px; }
.delete-dialog .dialog-heading { margin-bottom: 18px; }
.delete-dialog .dialog-heading h2 { font-size: 30px; }
.delete-candidate { font-size: .9375rem; font-weight: 600; margin: 0 0 10px; overflow-wrap: anywhere; }
#delete-description { font-size: .8125rem; line-height: 1.7; color: #6c7864; margin: 0; }
.delete-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 26px; }
.button.danger { background: #954e41; color: #fff; border-color: #87473c; }
.button.danger:hover { background: #814237; }
.dialog-heading, .record-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-heading h2 { margin: 0; font-family: var(--display); font-size: 32px; font-weight: 500; letter-spacing: -.7px; }
.settings-dialog { width: min(470px, calc(100vw - 32px)); padding: 26px 30px; max-height: calc(100dvh - 40px); overflow: auto; background: linear-gradient(145deg, #fffef7, #f4f4e9); }
.dialog-heading { margin-bottom: 28px; }
.field-label { display: block; font-size: .8125rem; color: #465c4d; margin: 20px 0 8px; }
.field-label span { color: var(--green); font-size: .6875rem; font-weight: 400; margin-left: 6px; }
.field-help { color: #63705f; font-size: .75rem; line-height: 1.6; margin: 8px 0 20px; }
.button { border: 1px solid transparent; border-radius: 7px; padding: 11px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: .8125rem; font-weight: 600; text-decoration: none; line-height: 1.45; cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.button.primary { background: var(--green); border-color: #20574e; color: #fff; box-shadow: 0 3px 8px #244a3810; }
.button.primary:hover { background: var(--green-dark); }
.button.secondary { background: #fffffa94; border-color: #d9dfd0; color: #52684f; }
.button.secondary:hover { background: #fffef7; border-color: #bbcbb6; }
.button:disabled { opacity: .5; cursor: default; }
.full-width { width: 100%; }
.settings-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 24px; }
.settings-actions .primary { min-width: 100px; }
.password-details { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 20px; font-size: .8125rem; }
.disclosure-toggle { width: 100%; padding: 3px 0; display: flex; align-items: center; justify-content: space-between; border: 0; background: none; color: #53684e; font-size: inherit; text-align: left; }
.disclosure-icon { position: relative; width: 16px; height: 16px; color: #85967c; }
.disclosure-icon::before, .disclosure-icon::after { content: ''; position: absolute; inset: 7px 3px auto; height: 1px; background: currentColor; }
.disclosure-icon::after { transform: rotate(90deg); transition: transform .32s, opacity .32s; }
.disclosure-toggle[aria-expanded="true"] .disclosure-icon::after { transform: rotate(0); opacity: 0; }
.disclosure-panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .36s cubic-bezier(.2,.75,.25,1), opacity .22s, visibility 0s .36s; }
.disclosure-panel.is-expanded { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .4s cubic-bezier(.2,.75,.25,1), opacity .28s .05s, visibility 0s; }
.disclosure-content { min-height: 0; overflow: hidden; }
.disclosure-content form { padding: 1px 3px 4px; }
.originals summary { cursor: pointer; color: #53684e; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.originals summary::-webkit-details-marker { display: none; }
.originals summary::after { content: '+'; color: #85967c; font-size: 18px; font-weight: 400; }
.originals[open] summary::after { content: '−'; }
.password-details form > .button { margin-top: 18px; }
.settings-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; color: var(--muted); font-size: .6875rem; }
.text-button { border: 0; background: none; color: #617756; font-size: .75rem; padding: 0; }
.text-button:hover { color: var(--ink); }
.record-dialog { width: min(1340px, calc(100vw - 64px)); height: calc(100dvh - 72px); max-height: 1050px; overflow: hidden; }
.record-mobile-tabs { display: none; }
.record-dialog-header { height: 66px; padding: 0 25px; border-bottom: 1px solid var(--line); }
.record-dialog-header h2 { margin: 0; font-family: var(--display); font-size: 25px; font-weight: 500; letter-spacing: -.35px; }
.record-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; height: calc(100% - 66px); }
.preview-column { min-width: 0; min-height: 0; background: #e9ece1; }
.preview-area { width: 100%; height: 100%; overflow: auto; position: relative; }
.preview-area iframe { display: block; width: 100%; height: 100%; border: 0; background: #e9ece1; }
.preview-empty { height: 100%; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #63705f; text-align: center; padding: 30px; }
.preview-empty svg { width: 38px; height: 38px; stroke-width: 1.1; }
.preview-loading { animation: pulse 1.2s ease-in-out infinite; }
.preview-empty h3 { font-family: var(--display); font-size: 26px; color: #526b46; font-weight: 500; margin: 5px 0; }
.preview-empty p { font-size: .8125rem; line-height: 1.7; max-width: 320px; margin: 0; }
.pdf-pages { padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pdf-pages img { display: block; width: 100%; max-width: 780px; height: auto; background: white; box-shadow: 0 3px 16px #25362012; }
.pdf-pages { animation: appear .38s ease-out; }
.record-sidebar { overflow-y: auto; padding: 29px 24px; background: #fafaf1; border-left: 1px solid var(--line); font-size: .8125rem; }
.record-sidebar h3 { font-family: var(--display); font-size: 31px; line-height: 1.16; letter-spacing: -.6px; margin: 22px 0 9px; font-weight: 500; overflow-wrap: anywhere; }
.candidate-position { margin: 0; color: #63705f; overflow-wrap: anywhere; }
.candidate-info { margin: 27px 0; font-size: .8125rem; }
.candidate-info dt { color: #63705f; margin: 18px 0 5px; font-size: .6875rem; }
.candidate-info dd { margin: 0; color: #53644b; overflow-wrap: anywhere; }
.download-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.download-buttons .button { padding: 10px 12px; flex: 1; }
.review-notes { margin-top: 22px; padding: 12px; border: 1px solid #e9dfc3; border-radius: 8px; background: #f5f0dd; color: #82703b; font-size: .75rem; overflow-wrap: anywhere; }
.review-notes h4 { margin: 0 0 7px; font-weight: 600; }
.review-notes ul { padding-left: 16px; margin: 0; }
.review-notes li + li { margin-top: 6px; }
.version-label { margin-top: 28px; font-size: .75rem; color: #63705f; }
#version-select { font-size: .6875rem; padding: 10px 8px; white-space: normal; }
.originals { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; margin: 22px 0; }
.originals summary { font-size: .8125rem; }
.originals summary span { margin-left: auto; margin-right: 10px; color: #63705f; font-size: .6875rem; }
#original-files { list-style: none; margin: 12px 0 0; padding: 0; }
#original-files li { margin: 9px 0; overflow-wrap: anywhere; }
#original-files a { font-size: .75rem; text-decoration: none; color: var(--green); }
#original-files a:hover { text-decoration: underline; }
.originals h4 { font-size: .75rem; font-weight: 500; margin: 17px 0 8px; }
.originals pre { font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 250px; overflow: auto; font-size: .75rem; color: #63705f; background: #edf0e5; padding: 10px; border-radius: 5px; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 20; background: #264e40; color: white; padding: 12px 20px; border: 1px solid #ffffff24; border-radius: 9px; font-size: .8125rem; box-shadow: 0 8px 25px #172b1c25; max-width: 90vw; }

.login-page { position: relative; isolation: isolate; }
.login-shell { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; padding: 36px 5% 24px; }
.login-header { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; }
.private-label { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: #63705f; }
.private-label svg { width: 13px; height: 13px; stroke-width: 1.5; }
.login-card { align-self: center; justify-self: center; width: min(460px, 100%); margin: 45px 0; padding: 47px 48px 31px; border: 1px solid #fffffff0; border-radius: 16px; background: linear-gradient(125deg, #fffef3d9, #f9f9efb3); box-shadow: 0 25px 80px #4758340d, 0 3px 12px #47583404; }
.eyebrow { margin: 0 0 27px; font-size: .625rem; font-weight: 600; letter-spacing: .14em; color: #63705f; }
.login-card h1 { font-family: var(--display); font-size: 59px; font-weight: 500; line-height: .98; letter-spacing: -1.9px; margin: 0 0 20px; }
.login-description { font-size: .8125rem; color: #63705f; line-height: 1.7; margin: 0 0 27px; max-width: 290px; }
.login-card .field-label { font-size: .75rem; }
.login-card input { padding: 13px 14px; font-size: .8125rem; }
.login-card .button { margin-top: 26px; padding: 13px 16px; justify-content: space-between; }
.login-card .button svg { width: 17px; height: 17px; }
.login-note { font-size: .6875rem; color: #63705f; text-align: center; margin: 18px 0 0; }
.login-footer { text-align: center; font-size: .6875rem; color: #63705f; letter-spacing: .035em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes pulse { 50% { opacity: .4; } }
@keyframes appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) { .compose-section { padding-top: 85px; padding-bottom: 95px; } }
@media (max-width: 900px) {
  .record-field { padding-inline: 10px; }
  .workspace-shell { padding: 20px 20px 0; }
  .history-section { padding-inline: 5px; }
  .compose-section { padding-inline: 20px; min-height: calc(68svh - 84px); }
  .history-table th, .history-table td { padding-inline: 10px; }
  .record-dialog { position: fixed; top: calc(var(--viewport-top, 0px) + 12px); bottom: auto; margin: 0 auto; width: calc(100% - 24px); height: calc(var(--viewport-height, 100dvh) - 24px); max-height: none; }
  .record-mobile-tabs { height: 52px; display: flex; align-items: center; gap: 5px; padding: 4px 18px; border-bottom: 1px solid var(--line); }
  .record-mobile-tabs button { flex: 1; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .875rem; transition: background .2s, color .2s; }
  .record-mobile-tabs button[aria-pressed="true"] { background: #e5edde; color: var(--green-dark); }
  .record-layout { display: block; height: calc(100% - 118px); overflow: auto; overscroll-behavior: contain; }
  .record-dialog[data-mobile-view="preview"] .record-sidebar, .record-dialog[data-mobile-view="details"] .preview-column { display: none; }
  .record-dialog[data-mobile-view="preview"] .preview-column, .record-dialog[data-mobile-view="details"] .record-sidebar { animation: appear .2s ease-out; }
  .preview-column { height: auto; min-height: 100%; }
  .preview-area { height: auto; overflow: visible; }
  .preview-area iframe { height: calc(var(--viewport-height, 100dvh) - 160px); }
  .preview-empty { min-height: min(380px, calc(var(--viewport-height, 100dvh) - 160px)); }
  .record-sidebar { padding: 24px; overflow: visible; border-left: 0; }
  .pdf-pages { padding: 18px; }
  .settings-dialog, .delete-dialog { position: fixed; top: calc(var(--viewport-top, 0px) + max(12px, env(safe-area-inset-top))); bottom: auto; margin: 0 auto; max-height: calc(var(--viewport-height, 100dvh) - 24px - env(safe-area-inset-top)); overflow: auto; overscroll-behavior: contain; }
  .settings-dialog .dialog-heading { position: sticky; top: -26px; z-index: 2; padding: 14px 0; margin-top: -14px; background: #faf9f0; }
}
@media (max-width: 900px), (pointer: coarse) {
  input, select, .login-card input, .archive-search input, #version-select, .composer textarea { font-size: 16px; }
  .icon-button, .button, .disclosure-toggle, .text-button, .originals summary { min-height: 44px; }
  .icon-button { width: 44px; }
  .attach-button, .send-button { width: 44px; height: 44px; }
  .composer { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .attachment-image .attachment-remove { width: 32px; height: 32px; }
  .attachment-remove::after { content: ''; position: absolute; inset: -6px; }
  .attachment-chip button { position: relative; width: 36px; height: 36px; flex: none; }
  .search-clear { width: 36px; height: 36px; }
  .download-buttons .button { min-height: 48px; }
  .record-action { width: 44px; height: 44px; }
}
.compact-ui .compose-caption { justify-content: center; }
.compact-ui .compose-caption span:first-child { display: none; }
@media (max-width: 700px) {
  body { background-attachment: scroll; }
  .history-heading { align-items: flex-start; flex-wrap: wrap; gap: 15px; }
  .archive-tools { width: 100%; gap: 10px; }
  .archive-search { flex: 1; min-width: 0; min-height: 46px; padding: 3px 9px; }
  .archive-search input { width: 100%; }
  .archive-count { white-space: nowrap; }
  .history-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .history-table .record-row > td { border: 0; }
  .record-shell { display: grid; grid-template-columns: minmax(0, 1fr) 52px; margin: 9px 0; border: 1px solid #dce1d2; border-radius: 12px; background: #fffff96b; }
  .record-row .record-surface, .record-row:hover .record-surface, .record-row:focus-within .record-surface { width: 100%; min-height: 114px; padding: 15px 12px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name name' 'position position' 'date status'; gap: 6px 8px; background: transparent; border-radius: 10px; }
  .record-field { padding: 0; font-size: .8125rem; }
  .record-field:first-child { grid-area: name; white-space: normal; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.35; }
  .record-field:nth-child(2) { grid-area: position; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
  .record-field:nth-child(3) { grid-area: date; display: block; font-size: .6875rem; margin-top: 5px; }
  .record-field:nth-child(4) { grid-area: status; margin-top: 5px; }
  .record-field.row-chevron { display: none; }
  .record-actions { position: static; inset: auto; opacity: 1; transform: none; pointer-events: auto; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 4px; }
  .record-action { width: 44px; height: 44px; }
  .record-action svg { width: 18px; height: 18px; }
  .record-row:hover { background: transparent; }
  .workspace-shell { padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); border: 0; }
  .site-header { height: 60px; padding: 0 7px 0 15px; }
  .wordmark { font-size: 27px; }
  .brand-lockup { gap: 12px; }
  .workspace-name { font-size: .75rem; }
  .brand-divider { height: 17px; }
  .compose-section { min-height: clamp(300px, 57svh, 510px); padding: 48px 0 32px; }
  .compose-intro { margin-bottom: 30px; }
  .compose-intro h1 { font-size: clamp(34px, 10vw, 52px); letter-spacing: -1.4px; transform: scale(1.1); }
  .composer { width: 96%; grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 6px; gap: 4px; border-radius: 13px; }
  .composer-wrap.is-editing .composer, .submission-overlay .composer-flight-copy { padding: 8px; }
  .composer textarea { font-size: 16px; line-height: 26px; scroll-margin-block: 20px; }
  .compose-caption { width: 96%; font-size: .6875rem; padding: 12px 0; justify-content: center; }
  .compose-caption span:last-child { display: inline; }
  .attachments { gap: 9px; }
  .attachment-image { width: 88px; height: 88px; flex-basis: 88px; }
  .history-section { padding: 0 2px 24px; }
  .history-heading { margin-bottom: 18px; }
  .history-heading h2 { font-size: 28px; }
  .archive-count { font-size: .6875rem; }
  .status { font-size: .6875rem; gap: 5px; }
  .empty-history { padding: 25px 8px; gap: 12px; }
  .empty-history div > span { font-size: .6875rem; }
  .workspace-footer { padding: 10px 2px max(22px, env(safe-area-inset-bottom)); font-size: .625rem; gap: 12px; flex-wrap: wrap; }
  .record-dialog { top: var(--viewport-top, 0px); width: 100%; max-width: none; height: var(--viewport-height, 100dvh); border: 0; border-radius: 0; }
  .record-dialog-header { height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); }
  .record-dialog-header h2 { font-size: 25px; }
  .record-mobile-tabs { padding-inline: 14px; height: 54px; }
  .record-mobile-tabs button { height: 44px; }
  .record-layout { height: calc(100% - 114px - env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
  .record-sidebar { padding: 20px; }
  .pdf-pages { padding: 12px; gap: 16px; }
  .candidate-info { display: grid; grid-template-columns: 76px 1fr; gap: 12px; margin: 22px 0; }
  .candidate-info dt { margin: 0; }
  .settings-dialog, .delete-dialog { padding: 20px; width: calc(100% - 20px); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .settings-dialog .dialog-heading { top: -20px; }
  .settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .settings-actions .button, .delete-actions .button { padding-inline: 10px; }
  .settings-footer { margin-top: 16px; padding-top: 10px; }
  .attachment-chip { max-width: 100%; }
  .attachment-chip > span { max-width: min(180px, 42vw); }
  .toast { bottom: max(18px, env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); width: max-content; text-align: center; font-size: .8125rem; }
  .login-shell { min-height: var(--viewport-height, 100dvh); padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .login-card { padding: 30px 24px 24px; margin: 28px 0; }
  .login-card h1 { font-size: clamp(42px, 12vw, 52px); }
  .private-label { font-size: .625rem; }
}
@media (max-height: 500px) and (max-width: 900px) {
  .compose-section { min-height: 0; padding-top: 28px; padding-bottom: 24px; }
  .compose-intro { margin-bottom: 22px; }
  .compose-intro h1 { font-size: 38px; }
  .login-card { margin-block: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after, *::backdrop { animation: none !important; transition: none !important; } .page-loader { display: none; } }
@media (hover: none) and (min-width: 701px), (min-width: 701px) and (max-width: 900px) {
  .record-row .record-surface, .record-row:hover .record-surface, .record-row:focus-within .record-surface { width: calc(100% - 100px); }
  .record-actions { opacity: 1; transform: none; pointer-events: auto; }
}