:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; color: #d6dce5; background: #080b10; font-synthesis: none; --muted: #93a1b4; --line: #a6bad520; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: radial-gradient(ellipse at 80% 0%, #18233655, transparent 47%); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: default; opacity: .45; }
button, a, label { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #bdcfe6; outline-offset: 4px; border-radius: 3px; }
h1, h2, h3, p { margin: 0; }
button, a.secondary { min-height: 44px; }
.masthead, main, footer { width: min(100% - 88px, 1160px); margin-inline: auto; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 33px; }
.wordmark { font-size: 17px; letter-spacing: .32em; font-weight: 300; }
.masthead nav { display: flex; gap: 26px; color: #a4afc0; font-size: 12px; }
.masthead nav a { padding-block: 12px; }
.masthead nav span { margin-left: 7px; }
main { padding-block: 49px 40px; }
.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow { font-size: 10px; letter-spacing: .14em; color: #9babbd; }
h1 { margin-top: 14px; font-size: clamp(30px, 5vw, 40px); font-weight: 400; letter-spacing: -.045em; line-height: 1.4; }
.lead { margin-top: 14px; font-size: 14px; font-weight: 300; line-height: 1.8; color: #b4becc; }
.intro > button { margin-bottom: 3px; padding-inline: 21px; }
.intro > button span { margin-right: 8px; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #a2b6cf45; border-radius: 6px; min-height: 44px; padding: 10px 17px; background: #b2c7e007; color: #c7d2e3; font-size: 12px; line-height: 1.7; text-align: center; }
.primary { background: #c4d0e0; color: #0d1521; border-color: transparent; font-weight: 500; }
.primary:hover:enabled { background: #e0e7f1; }
.secondary:hover:enabled, a.secondary:hover { border-color: #b7c9e17d; background: #b2c7e011; }
.text-button { border: 0; background: transparent; padding: 9px 3px; color: #a8b8cd; font-size: 11px; flex-shrink: 0; }
.text-button:hover:enabled, .masthead a:hover { color: #f2f5fa; }
.status-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-block: 1px solid var(--line); margin-top: 32px; min-height: 60px; padding-block: 7px; }
#records-status { font-size: 11px; color: #aebbd0; line-height: 1.9; }
.workspace { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.25fr); min-height: 560px; }
.library { padding: 15px 30px 20px 0; border-right: 1px solid var(--line); }
.section-heading, .pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h2 { font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: -.02em; }
.section-heading { margin-bottom: 13px; }
.section-heading .text-button { font-size: 10px; }
input:where(:not([type="radio"]):not([type="checkbox"])), textarea, select { border: 1px solid #a6bad52a; border-radius: 5px; background: #101620a3; color: #d6dce5; width: 100%; padding: 12px; font-size: 13px; min-height: 44px; }
input::placeholder, textarea::placeholder { color: #778496; opacity: 1; }
textarea { resize: vertical; line-height: 1.95; }
.search-line { display: flex; align-items: center; border: 1px solid #a6bad52a; border-radius: 5px; background: #101620a3; }
.search-line input { border: 0; background: transparent; font-size: 12px; min-width: 0; }
.search-line input:focus-visible { outline-offset: -2px; }
.search-button { border: 0; background: transparent; color: #b8c5d7; padding: 0 13px; font-size: 11px; flex-shrink: 0; }
.filters { display: flex; align-items: center; gap: 7px; margin-block: 10px 18px; }
.filters select { width: auto; padding: 7px 23px 7px 7px; font-size: 11px; min-width: 0; border: 0; background-color: transparent; }
.private-mark { margin-left: auto; color: #8fa69f; font-size: 10px; white-space: nowrap; }
.record-list { list-style: none; padding: 0; margin: 0; }
.record-views { display: flex; gap: 18px; margin: 0 0 17px; border-bottom: 1px solid var(--line); }
.record-views button { border-radius: 0; border-bottom: 1px solid transparent; padding-inline: 1px; color: #8291a7; }
.record-views button[aria-pressed="true"] { color: #d4deed; border-bottom-color: #b7cbe0; }
.record-list li { border-bottom: 1px solid #a6bad516; }
.record-row { width: 100%; text-align: left; border: 0; border-radius: 5px; background: transparent; padding: 20px 13px; color: inherit; }
.record-row:hover, .record-row[aria-current="true"] { background: #9ebcde0a; }
.record-row[aria-current="true"] { box-shadow: inset 2px 0 #9eb4cd80; }
.row-meta { display: flex; gap: 9px; align-items: center; color: #8b9ab0; font-size: 10px; line-height: 1.6; }
.row-meta time { margin-left: auto; }
.done-mark { color: #abc4b6; }
.row-title { display: block; margin-top: 10px; font-size: 14px; line-height: 1.8; letter-spacing: -.02em; overflow-wrap: anywhere; }
.row-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #94a0b3; font-size: 11px; line-height: 1.9; margin-top: 6px; overflow-wrap: anywhere; white-space: pre-line; }
.load-more { width: 100%; margin-top: 20px; }
.empty-list { text-align: center; padding: 56px 5px 60px; color: #a4afc1; font-size: 12px; line-height: 2; }
.empty-list .subtle { margin-top: 5px; font-size: 11px; }
.quiet-mark { display: block; margin-bottom: 15px; font-size: 25px; color: #7b8da5; }
.record-pane { padding: 30px 0 32px 38px; min-width: 0; }
.blank-pane { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 425px; }
.orbit-mark { width: 45px; height: 45px; border: 1px solid #8ea7ca38; border-radius: 50%; margin-bottom: 29px; position: relative; }
.orbit-mark::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #bdcde1; position: absolute; top: 6px; left: 3px; box-shadow: 0 0 13px #bfd8f870; }
.blank-pane h2 { margin-top: 14px; font-size: 21px; font-weight: 300; }
.blank-pane > p:not(.eyebrow) { color: #8d9caf; font-size: 12px; line-height: 2; margin-top: 13px; }
.blank-pane button { margin-top: 23px; }
.blank-pane button span { margin-left: 8px; }
.subtle { color: var(--muted); font-size: 11px; line-height: 1.9; }
.pane-heading { min-height: 44px; margin-bottom: 15px; }
.record-title { margin-top: 19px; font-size: clamp(23px, 3vw, 29px); line-height: 1.6; letter-spacing: -.035em; overflow-wrap: anywhere; white-space: pre-wrap; }
.record-date { margin-top: 12px; font-size: 10px; color: #8392a7; line-height: 1.9; }
.record-body { font-size: 14px; line-height: 2.1; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 31px; }
.trash-note { margin-top: 20px; padding: 13px 15px; border-left: 1px solid #b9a08570; color: #c4b39c; background: #b9a08509; font-size: 12px; line-height: 1.9; }
.record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 24px; }
.quiet-danger { color: #bba69d; margin-left: auto; }
.export-note { margin-top: 12px; }
.saved-link { display: block; overflow-wrap: anywhere; font-size: 12px; line-height: 1.9; color: #b3c6df; border-left: 1px solid #9ab4d15c; padding-left: 13px; margin-top: 28px; text-decoration: underline; text-underline-offset: 4px; }
.detail-fields { display: grid; grid-template-columns: minmax(0, 100px) minmax(0, 1fr); gap: 12px 19px; margin-top: 30px; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.detail-fields dt { color: #8e9bae; }
.detail-fields dd { margin: 0; color: #c4cedd; white-space: pre-wrap; }
.detail-attachments { display: grid; gap: 12px; margin-block: 25px; }
.detail-attachment { padding: 15px; border: 1px solid var(--line); border-radius: 6px; }
.detail-attachment p { font-size: 11px; color: #9eacbf; overflow-wrap: anywhere; }
.detail-attachment img { display: block; max-width: 100%; max-height: 440px; object-fit: contain; border-radius: 4px; margin-top: 12px; }
.detail-attachment a { display: inline-block; font-size: 11px; padding-block: 12px; color: #b3c6df; }
.kind-choices { display: flex; gap: 6px; padding: 0; margin: 4px 0 16px; border: 0; }
.kind-choices label { cursor: pointer; position: relative; flex: 1; }
.kind-choices input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.kind-choices span { display: block; border: 1px solid #a6bad528; border-radius: 5px; text-align: center; padding: 11px 5px; font-size: 11px; color: #94a4ba; }
.kind-choices input:checked + span { background: #bfd2ed0d; border-color: #a4bbd457; color: #d2ddea; }
.kind-choices input:focus-visible + span { outline: 2px solid #bdcfe6; outline-offset: 3px; }
input.title-input { border: 0; background: transparent; padding: 15px 0; font-size: 23px; line-height: 1.6; }
textarea.body-input { border: 0; background: transparent; padding: 9px 0 18px; font-size: 14px; min-height: 205px; }
.editor-extras { padding-top: 12px; border-top: 1px solid var(--line); }
.field-label { display: block; font-size: 11px; color: #a6b3c6; margin-block: 15px 8px; }
details { margin-top: 24px; border-block: 1px solid var(--line); padding-block: 16px; }
summary { cursor: pointer; font-size: 12px; color: #bcc8da; min-height: 25px; }
summary .subtle { margin-left: 14px; font-size: 10px; }
.record-fields { padding-bottom: 5px; }
.attachment-area { margin-top: 18px; }
.attachment-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 11px; color: #b0bfd3; cursor: pointer; padding: 4px; position: relative; border-radius: 4px; }
.attachment-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.attachment-button:focus-within { outline: 2px solid #bdcfe6; outline-offset: 3px; }
.draft-attachments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.draft-image { margin: 0 0 8px; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 7px; }
.draft-image img { width: 100%; height: 88px; object-fit: contain; display: block; }
.draft-image figcaption { font-size: 9px; color: #9da9bb; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 7px; }
.draft-image button { min-height: 36px; font-size: 10px; width: 100%; }
.editor-actions { display: flex; align-items: center; gap: 18px; margin-top: 26px; border-top: 1px solid var(--line); padding-top: 23px; }
.schema-intro { font-size: 13px; color: #b7c3d5; line-height: 1.95; margin-bottom: 10px; }
.schema-fields { margin-block: 25px 18px; display: grid; gap: 13px; }
.schema-field { border: 1px solid var(--line); border-radius: 6px; padding: 15px; }
.schema-field-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.schema-field-head p { font-size: 10px; color: #8fa0b7; }
.schema-field .field-label { margin-top: 8px; }
.schema-field select, .schema-field textarea { font-size: 12px; }
.conflict-panel { padding: 20px; margin-top: 22px; border: 1px solid #c6ab8a55; border-radius: 6px; background: #b9a08509; }
.conflict-panel p { font-size: 12px; line-height: 1.9; color: #d0bfa9; }
.conflict-panel button { margin-top: 16px; }
.access-panel { padding: 66px 0 70px; max-width: 560px; }
.access-panel h2 { font-size: 25px; margin-top: 17px; font-weight: 300; }
.access-panel > p:not(.eyebrow) { font-size: 13px; line-height: 2; color: #a6b3c6; margin-top: 18px; }
.access-panel a { margin-top: 23px; }
.boundary-note { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.boundary-note p { font-size: 10px; line-height: 1.95; color: #8795a9; max-width: 760px; word-break: keep-all; overflow-wrap: anywhere; }
.noscript-note { margin-top: 20px; font-size: 13px; color: #d4b29d; }
footer { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 26px; border-top: 1px solid #adbed418; color: #8390a3; font-size: 10px; padding-block: 25px 30px; }
footer span { letter-spacing: .28em; }
.skip-link { position: absolute; top: 8px; left: 8px; padding: 10px 15px; background: #c4d0e0; color: #0d1521; z-index: 5; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 850px) {
  .masthead, main, footer { width: calc(100% - 48px); }
  .workspace { grid-template-columns: minmax(230px, .9fr) minmax(0, 1.1fr); }
  .library { padding-right: 20px; }
  .record-pane { padding-left: 25px; }
}
@media (max-width: 650px) {
  .masthead, main, footer { width: calc(100% - 40px); }
  .masthead { padding-block: 20px; }
  .masthead nav { gap: 19px; font-size: 11px; }
  main { padding-top: 28px; }
  .intro { align-items: center; gap: 12px; }
  .intro > button { padding-inline: 13px; white-space: nowrap; }
  .lead { font-size: 12px; max-width: 190px; }
  .status-bar { gap: 13px; margin-top: 26px; }
  .workspace { display: flex; flex-direction: column; }
  .library { padding: 16px 0 24px; border-right: 0; }
  .record-pane { padding: 24px 0 22px; border-top: 1px solid var(--line); }
  .workspace.editing .record-pane { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .blank-pane { min-height: 270px; }
  .orbit-mark { margin-bottom: 19px; width: 34px; height: 34px; }
  .empty-list { padding: 33px 5px 35px; }
  .record-row { padding: 17px 10px; }
  .record-title { font-size: 25px; }
  input.title-input { font-size: 23px; }
  input:where(:not([type="radio"]):not([type="checkbox"])), textarea, select { font-size: 16px; }
  .search-line input { font-size: 16px; }
  .filters select { font-size: 12px; }
  textarea.body-input { font-size: 16px; }
  .record-fields input, .record-fields select, .schema-field input, .schema-field select, .schema-field textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* The archive uses the shared instrument palette while retaining native form
   controls and a document-flow fallback. No animated scene or fictitious data. */
:root { --muted: var(--console-muted, #8796a8); --line: var(--console-line-soft, #19222d); background: var(--console-bg, #06090d); }
body { background: radial-gradient(ellipse at 80% -20%, #25344a33, transparent 55%), #06090d; }
body::before { content: ""; pointer-events: none; position: fixed; inset: 0; opacity: .12; background-image: linear-gradient(#8395ad13 1px, transparent 1px), linear-gradient(90deg, #8395ad13 1px, transparent 1px); background-size: 48px 48px; z-index: 0; }
.masthead, main, footer { position: relative; z-index: 1; width: min(100% - 72px, 1460px); }
.masthead { border-bottom: 1px solid var(--line); padding-block: 18px; gap: 18px; min-height: 75px; }
.wordmark { font-size: 15px; letter-spacing: .3em; white-space: nowrap; }
.brand-star { font-size: 24px; letter-spacing: 0; vertical-align: -2px; margin-right: 12px; color: #e3d4c5; }
.masthead-path, .instrument-text, .instrument-note, .footer-keys, .query-caption, .archive-telemetry dd { font-family: var(--console-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.masthead-path { color: #738296; font-size: 10px; letter-spacing: .12em; }
.masthead nav { margin-left: auto; gap: 22px; }
main { padding-block: 25px 16px; }
.intro { align-items: center; min-height: 70px; }
.intro-title h1 { font-size: 20px; margin-top: 8px; letter-spacing: -.03em; }
.eyebrow { font-family: var(--console-mono, ui-monospace, monospace); font-size: 9px; letter-spacing: .17em; }
.intro-title .eyebrow span { color: #536277; margin-left: 12px; }
.archive-telemetry { display: flex; margin: 0 14px 0 auto; align-items: center; gap: 28px; }
.archive-telemetry > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 12px; }
.archive-telemetry dt { font-size: 10px; color: var(--muted); }
.archive-telemetry dd { margin: 0; font-size: 19px; font-weight: 300; color: #d6e1ef; font-variant-numeric: tabular-nums; }
.primary, .secondary, input:where(:not([type="radio"]):not([type="checkbox"])), textarea, select, .search-line { border-radius: var(--console-radius, 3px); }
.primary { background: #c9d4e2; color: #0b1017; font-size: 11px; letter-spacing: .02em; }
.intro > button { padding-inline: 16px; }
.status-bar { gap: 10px; margin-top: 17px; min-height: 41px; padding-block: 0; }
.status-bar > .text-button { margin-left: auto; font-size: 10px; }
#records-status { font-size: 10px; line-height: 1.6; }
.status-beacon { width: 4px; height: 4px; flex: 0 0 4px; background: #7a8797; }
body[data-state="ready"] .status-beacon { background: #a7c4b8; box-shadow: 0 0 7px #9ab6a91c; }
body[data-state="error"] .status-beacon, body[data-state="logout-error"] .status-beacon { background: #cf8f84; }
.workspace { grid-template-columns: minmax(300px, .84fr) minmax(0, 1.52fr); min-height: 660px; }
.library { padding: 15px 22px 30px 0; }
.section-heading { gap: 10px; margin-bottom: 6px; }
.section-heading h2 { font-size: 11px; }
.section-heading > .text-button { margin-left: auto; }
.instrument-text { color: #73859b; font-size: 9px; letter-spacing: .08em; }
.record-views { gap: 24px; margin-bottom: 14px; }
.record-views button { font-size: 10px; min-height: 40px; padding-block: 8px; }
.record-views .private-mark { align-self: center; }
.search-symbol { color: #91a4ba; font-family: serif; padding-left: 12px; font-size: 21px; }
.search-line { background: #0b1119b3; }
.search-line input { font-size: 12px; }
.filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin: 8px 0; }
.filters select { width: 100%; min-height: 36px; padding: 7px 18px 7px 7px; background-color: #0b1119; border: 1px solid #27344366; border-radius: 2px; font-size: 10px; }
.filters input { min-height: 36px !important; padding: 7px !important; font-size: 11px !important; min-width: 0; }
.query-caption { display: flex; align-items: center; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--line); margin-top: 8px; padding: 0 1px 5px; color: #8191a6; font-size: 9px; }
.query-caption button { font-size: 9px; min-height: 32px; }
.record-list li { position: relative; }
.record-row { border-radius: 0; padding: 13px 10px; min-height: 78px; transition: background .15s; }
.record-row:hover { background: #9ebcde09; }
.record-row[aria-current="true"] { background: linear-gradient(90deg, #9ebcde13, #9ebcde04); box-shadow: inset 2px 0 #b4c9de; }
.row-meta { flex-wrap: wrap; font-size: 10px; gap: 4px 8px; color: #8c9eb3; }
.row-index { color: #78889d; font-family: var(--console-mono, monospace); letter-spacing: .08em; min-width: 22px; }
.row-pin { color: #d5bd96; }
.row-title { font-size: 13px; line-height: 1.65; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-preview { font-size: 11px; -webkit-line-clamp: 1; margin-top: 5px; line-height: 1.8; }
.row-tags { display: flex; gap: 7px; overflow: hidden; font-size: 9px; color: #8fa6bc; margin-top: 7px; }
.row-tags span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-due { margin-left: auto; font-size: 9px; color: #cab792; }
.record-pane { padding: 14px 0 28px 34px; position: relative; }
.pane-toolbar { display: flex; min-height: 36px; align-items: center; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.pane-toolbar .instrument-text { margin-left: auto; }
.pane-toolbar button { min-height: 35px; font-size: 10px; }
.blank-pane { min-height: 0; align-items: stretch; justify-content: flex-start; text-align: left; padding: 28px 0 12px; }
.blank-header { display: flex; align-items: center; gap: 22px; }
.archive-index-mark { display: grid; align-content: center; gap: 7px; flex: 0 0 64px; height: 72px; padding: 10px; border: 1px solid #43506466; background: #101822; }
.archive-index-mark span { display: block; height: 7px; border: 1px solid #71859d77; border-left: 3px solid #c7b182; }
.archive-index-mark span:nth-child(2) { width: 78%; }
.archive-index-mark span:nth-child(3) { width: 55%; }
.blank-pane h2 { font-size: 18px; letter-spacing: -.02em; margin-top: 8px; }
#blank-description { font-size: 12px; color: #96a7ba; line-height: 1.8; margin-top: 6px; }
.blank-actions { display: flex; align-items: center; gap: 20px; margin: 24px 0 30px; }
.blank-actions button { margin: 0; font-size: 12px; }
.blank-actions kbd { font: 10px var(--console-mono, monospace); color: #8093a8; border: 1px solid #53687c66; padding: 1px 5px; margin-left: 22px; }
.recent-section { border-top: 1px solid var(--line); padding-top: 18px; }
.recent-section h3 { font-size: 12px; font-weight: 400; color: #c2cede; }
.recent-section .subtle { font-size: 10px; }
.recent-records { list-style: none; margin: 4px 0 0; padding: 0; }
.recent-record { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 62px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #c9d6e6; text-align: left; }
.recent-record:hover { background: #9ebcde09; }
.recent-label { min-width: 0; display: flex; align-items: baseline; gap: 16px; }
.recent-kind { flex: 0 0 32px; font-size: 10px; color: #8c9eb3; }
.recent-title { font-size: 13px; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.recent-record time { flex-shrink: 0; font-size: 10px; color: #8c9eb3; }
.archive-distribution { display: flex; align-items: baseline; gap: 28px; margin-top: 24px; border: 0; padding: 0; }
.distribution-item { display: flex; align-items: baseline; gap: 10px; color: #8597ab; font-size: 10px; }
.distribution-item strong { color: #c9d7e7; font-family: var(--console-mono, monospace); font-size: 15px; font-weight: 400; }
.blank-pane > .instrument-note { font-size: 10px; color: #8798ad; margin-top: 10px; }
.pane-heading { margin-bottom: 8px; min-height: 38px; }
.pane-heading h2 { font-size: 13px; }
.inline-actions { display: flex; gap: 20px; }
.inline-actions button[aria-pressed="true"] { color: #d5bd96; }
.record-title { font-size: clamp(21px, 2.5vw, 28px); line-height: 1.55; margin-top: 13px; }
#detail-title { width: fit-content; max-width: 100%; }
.record-date { font-size: 9px; line-height: 1.85; margin-top: 10px; color: #8b9bb0; }
.record-body { margin-top: 24px; font-size: 13px; line-height: 2; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; }
.tag-list:empty { display: none; }
.tag-button { color: #b5c7dc; border: 1px solid #637e993d; background: #b0c9e305; font-size: 10px; padding: 4px 8px; min-height: 28px; border-radius: 2px; max-width: 100%; overflow-wrap: anywhere; }
.tag-button:hover { background: #b0c9e313; }
.due-indicator { font-size: 10px; color: #cab792; margin-top: 13px; padding-left: 9px; border-left: 1px solid #cab79277; }
.due-indicator[data-overdue="true"] { color: #d3a296; border-color: #d3a29677; }
.detail-fields { margin-top: 25px; font-size: 11px; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 8px 18px; }
.detail-fields:empty { display: none; }
.detail-attachment { border-radius: 2px; padding: 12px; }
.detail-attachment img { border-radius: 0; }
.relations-panel { margin-block: 25px 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.relations-panel h3 { font-size: 11px; color: #bdcbdb; font-weight: 400; margin-bottom: 8px; }
.relation-direction { color: #8698ae; font-size: 9px; margin: 14px 0 3px; }
.relation-link { display: flex; text-align: left; align-items: center; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid #20304166; background: transparent; color: #c4d2e4; padding: 9px 1px; min-height: 40px; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.relation-link > span:first-child { color: #758aa3; font-size: 9px; flex: 0 0 30px; }
.relation-link:hover { color: #e7edf6; background: #9ebcde07; }
.relation-link > span:nth-child(2) { min-width: 0; }
.relation-link .relation-state { margin-left: auto; font-size: 9px; color: #b3a594; white-space: nowrap; }
.record-actions { border-top: 1px solid var(--line); padding-top: 15px; }
.record-actions button { font-size: 10px; }
.export-note { font-size: 9px; }
input.title-input { font-size: 23px; padding-block: 14px; }
textarea.body-input { font-size: 13px; line-height: 1.95; min-height: 185px; }
.kind-choices span { border-radius: 2px; padding: 9px 3px; font-size: 10px; }
.editor-classification { border-top: 1px solid var(--line); padding-bottom: 8px; }
.field-label { font-size: 10px; margin-block: 12px 7px; }
.field-label .subtle { font-size: 9px; margin-left: 6px; }
.pin-choice { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 10px; color: #a5b8cc; cursor: pointer; }
.pin-choice input { accent-color: #b2c5dd; width: 15px; height: 15px; }
.editor-extras { padding-top: 0; }
#relation-editor, #extra-fields { margin-top: 18px; padding-block: 13px; }
summary { min-height: 26px; font-size: 11px; }
.draft-relations { display: grid; gap: 3px; }
.draft-relation { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.draft-relation > span { font-size: 11px; line-height: 1.7; min-width: 0; overflow-wrap: anywhere; }
.draft-relation button { margin-left: auto; font-size: 10px; }
#relation-query { min-width: 0; }
#relation-status { margin-top: 8px; font-size: 10px; }
.relation-results { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.shortcut-hint { margin-left: auto; font-family: var(--console-mono, monospace); font-size: 9px; color: #7d90a7; }
.schema-intro { font-size: 11px; margin-bottom: 7px; }
.boundary-note { margin-top: 12px; padding-top: 0; }
.boundary-note details { border: 0; margin: 0; padding: 12px 0 0; }
.boundary-note summary { min-height: 32px; color: #8a9aad; font-size: 9px; }
.boundary-note p { font-size: 10px; padding: 0 0 12px; }
footer { padding-block: 18px 24px; font-size: 8px; color: #697c94; }
footer > p { letter-spacing: .12em; }
.footer-keys { margin-left: auto; font-size: 8px; }
@media (min-width: 1050px) { .library { padding-right: 30px; }.record-pane { padding-left: 40px; } }
@media (max-width: 900px) { .masthead, main, footer { width: calc(100% - 40px); }.archive-telemetry { gap: 16px; margin-right: 0; }.archive-telemetry > div { display: flex; flex-direction: column; gap: 4px; }.archive-telemetry dd { font-size: 16px; }.workspace { grid-template-columns: minmax(265px, .85fr) minmax(0, 1.15fr); }.record-pane { padding-left: 22px; }.library { padding-right: 18px; } }
@media (max-width: 650px) {
  .masthead, main, footer { width: calc(100% - 32px); }.masthead { min-height: 66px; padding-block: 10px; gap: 10px; }.wordmark { font-size: 13px; letter-spacing: .2em; }.brand-star { font-size: 20px; margin-right: 4px; }.masthead-path { display: none; }.masthead nav { gap: 14px; font-size: 10px; }.masthead nav a, .masthead nav button { font-size: 10px; }main { padding-top: 17px; }
  .intro { flex-wrap: wrap; gap: 14px; }.intro-title { flex: 1; }.intro-title h1 { font-size: 18px; }.intro-title .eyebrow { font-size: 8px; }.intro > button { order: 1; padding-inline: 13px; min-height: 40px; }.archive-telemetry { order: 2; width: 100%; gap: 23px; padding: 10px 0 0; border-top: 1px solid var(--line); }.archive-telemetry > div { flex-direction: row; align-items: center; gap: 12px; }.archive-telemetry dt { font-size: 9px; }.archive-telemetry dd { font-size: 14px; }.status-bar { margin-top: 13px; }.status-bar p { font-size: 9px !important; }
  .workspace { display: block; min-height: 480px; }.library { padding: 10px 0 20px; border: 0; }.record-pane { padding: 8px 0 22px; border: 0; }.workspace.editing .record-pane { border: 0; }body[data-mode="detail"] .library, body[data-mode="create"] .library, body[data-mode="edit"] .library, body[data-mode="schema"] .library { display: none; }body[data-mode="blank"] .record-pane { border-top: 1px solid var(--line); }.record-row { padding: 13px 6px; }.row-title { font-size: 13px; }.row-preview { font-size: 11px; }.filters select { font-size: 16px; min-height: 44px; padding-inline: 6px 14px; letter-spacing: -.04em; }.filters input { font-size: 16px !important; min-height: 44px !important; }.filters { grid-template-columns: 1fr 1fr 1fr; }.query-caption { font-size: 9px; }.search-line input { font-size: 16px; }.record-title { font-size: 23px; }.record-body { font-size: 14px; }.record-date { font-size: 10px; }.archive-index-mark { height: 62px; flex-basis: 54px; }.blank-pane { min-height: 0; padding-top: 14px; }.archive-distribution { margin-top: 18px; gap: 20px; }.blank-pane > .instrument-note { font-size: 10px; }.pane-toolbar { margin-bottom: 6px; }.shortcut-hint, .footer-keys { display: none; }.record-actions { gap: 8px 15px; }.record-actions button { font-size: 11px; }.text-button { min-height: 44px; }.tag-button { min-height: 36px; }textarea.body-input { font-size: 16px; }input.title-input { font-size: 23px; }.boundary-note { margin-top: 0; }.relation-link { min-height: 44px; }
}
@media (max-width: 350px) { .masthead nav { gap: 9px; }.filters { grid-template-columns: 1fr 1fr; }.filters select:last-child { grid-column: 1 / -1; }.archive-telemetry { gap: 17px; } }
@media (prefers-reduced-motion: reduce) { .record-row { transition: none; } }

/* Compact capture controls remain reachable without scrolling past metadata. */
.shortcut-help { position: relative; margin: 0 0 0 15px; padding: 0; border: 0; }
.shortcut-help > summary { display: grid; place-content: center; min-width: 32px; min-height: 35px; list-style: none; color: #a5b7cd; font: 11px var(--console-mono, monospace); }
.shortcut-help > summary::-webkit-details-marker { display: none; }
.shortcut-help > dl { position: absolute; z-index: 10; right: 0; top: 30px; width: 265px; display: grid; grid-template-columns: auto 1fr; gap: 10px 15px; padding: 18px; border: 1px solid #53677c; background: #0b1017; box-shadow: 0 12px 32px #0008; font-size: 10px; }
.shortcut-help dt { color: #d1bf9d; font-family: var(--console-mono, monospace); }.shortcut-help dd { margin: 0; color: #acbfd2; }
@media (max-width: 650px) {
  .masthead nav { flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; }
  #record-editor { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  #record-editor > .editor-actions { position: fixed; z-index: 20; left: 0; right: 0; bottom: var(--records-keyboard-inset, 0px); margin: 0; padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #354659; background: #0b1017f5; backdrop-filter: blur(12px); box-shadow: 0 -8px 22px #0005; gap: 14px; }
  #record-editor > .editor-actions .primary { min-width: 110px; min-height: 44px; }
  .shortcut-help > summary { min-height: 44px; min-width: 36px; }
  .shortcut-help > dl { top: 36px; }
}

/* Long archives keep the selection and reader within reach. Narrow layouts
   retain one document scroller; keyboard focus can enter either desktop pane. */
@media (min-width: 651px) {
  .workspace { height: min(1000px, calc(100dvh - 245px)); min-height: 520px; }
  .library { display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; }
  .library > :not(.record-list) { flex-shrink: 0; }
  .record-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
  .record-pane { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding-right: 8px; }
  .record-pane:focus-visible { outline-offset: -2px; }
  .load-more { margin-top: 10px; }
}
.library, .intro-title, .status-bar > p { min-width: 0; }
.row-meta time { white-space: nowrap; }
.network-status, .list-state { font-size: 11px; line-height: 1.8; color: #d3bca0; padding: 10px 0; }
.network-status { border-bottom: 1px solid #b89d7855; }
.list-state { color: #a5b8ce; }
.list-state[data-tone="error"], body[data-tone="error"] #records-status { color: #d6a49a; }
body[data-tone="error"] .status-beacon { background: #cf8f84; box-shadow: none; }
body[data-pending]:not([data-pending=""]) .status-beacon, body[data-state="loading"] .status-beacon { background: #d7b989; box-shadow: none; }
.access-panel { padding: 42px 0 48px; }
.access-panel h2 { font-size: 20px; margin-top: 14px; }
.access-panel[aria-busy="true"] { border-bottom: 1px solid var(--line); }
.empty-list { padding: 28px 8px; }
.empty-list .quiet-mark { margin-bottom: 10px; font-size: 22px; }
.empty-list .text-button { margin-top: 8px; }
@media (max-width: 650px) {
  body[data-mode="blank"] .blank-pane { display: none; }
  .library { min-width: 0; }
  .row-title { font-size: 14px; }
  .row-preview { font-size: 12px; }
}

/* Historical content is a separate read-only panel, not the editable record. */
.record-history { border-block: 1px solid #52627866; margin-block: 24px; padding-block: 16px; }
.record-history > .section-heading { margin-bottom: 2px; }
.record-history h3 { font-size: 13px; color: #ced7e4; font-weight: 400; }
#history-heading, #history-title { width: fit-content; max-width: 100%; }
#history-status { min-height: 20px; margin-bottom: 12px; }
.history-layout { display: grid; grid-template-columns: minmax(118px, .32fr) minmax(0, 1fr); gap: 20px; }
.history-index { min-width: 0; }
.history-list { list-style: none; padding: 0; margin: 0; max-height: 310px; overflow-y: auto; overscroll-behavior-y: contain; }
.history-version { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #c4d1e2; padding: 11px 9px; font-size: 12px; }
.history-version[aria-current="true"] { background: #9ebcde0e; box-shadow: inset 2px 0 #c5b28e; }
.history-version:hover { background: #9ebcde09; }
.history-version time { font-size: 10px; color: #8d9eb3; line-height: 1.5; }
.history-preview { min-width: 0; border-left: 1px solid var(--line); padding-left: 20px; }
.history-preview h4 { color: #d7dfeb; font-size: 17px; font-weight: 400; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.history-preview .record-date { margin-top: 0; }
.history-preview .record-body { margin-top: 16px; }
.history-preview .tag-list > span { color: #aebfd3; font-size: 11px; overflow-wrap: anywhere; }
.history-preview .tag-list { gap: 7px 12px; }
.history-preview .detail-fields { grid-template-columns: minmax(0, 80px) minmax(0, 1fr); }
.history-preview .detail-attachments { margin-block: 16px; }
.history-links { font-size: 11px; line-height: 1.8; margin-block: 16px; overflow-wrap: anywhere; }
.history-links > p { color: #879bb0; margin-bottom: 6px; }
.history-links ul { list-style: none; margin: 0; padding: 0; }
.history-links li { padding-block: 5px; border-bottom: 1px solid var(--line); }
#history-restore-note { margin-block: 16px 10px; }
#restore-revision { font-size: 11px; }
@media (max-width: 900px) {
  .inline-actions { flex-wrap: wrap; justify-content: flex-end; gap: 2px 14px; }
  .history-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .history-list { display: flex; max-height: none; overflow-x: auto; overscroll-behavior-x: contain; }
  .history-list > li { flex: 0 0 115px; }
  .history-version[aria-current="true"] { box-shadow: inset 0 -2px #c5b28e; }
  .history-preview { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; }
}

/* Records is a workspace module. These are local views of the same list;
   the shared sticky header owns primary navigation and the gold marker. */
.records-page .skip-link { position: fixed; z-index: 70; }
.records-page main { padding-top: 20px; }
.records-page .intro { min-height: 58px; }
.records-page .intro-title h1 { font-size: 23px; letter-spacing: -.04em; }
.archive-telemetry #archive-summary-scope { white-space: nowrap; color: #a8b5c5; }
.records-page .record-tools { display: flex; align-items: center; gap: 8px; min-height: 56px; margin: 0; border-bottom: 1px solid var(--line); }
.record-tools button, .record-tools .record-transfer { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; min-height: 44px; padding: 8px 13px; font-size: 11px; white-space: nowrap; }
.record-tools button { border: 1px solid transparent; }
.record-tools button[aria-pressed="true"] { border-color: #414b58; background: #c8d4e20a; color: #e6e4de; }
.record-tools .record-transfer { margin-left: auto; color: #a4b1c1; }
.record-tools .record-transfer:hover { color: #e2cc9d; }
.record-tools .record-transfer span { color: #718096; }
.records-page .record-row[aria-current="true"] { box-shadow: inset 2px 0 #d6b56c; background: #e1bc6208; }
.records-page .record-pane [tabindex="-1"], .records-page #search-query { scroll-margin-top: calc(var(--workspace-header-height, 68px) + 18px); }
.records-account-tools { display: flex; justify-content: flex-end; align-items: center; gap: 18px; border-top: 1px solid var(--line); margin-top: 10px; color: #8d9bac; font-size: 10px; }
.records-account-tools a, .records-account-tools button { display: inline-flex; align-items: center; min-height: 44px; font-size: 10px; }
.record-filter-options { margin: 0; padding: 0; border: 0; }
.record-filter-options > summary { display: none; }
@media (min-width: 651px) {
  .records-page .workspace { height: min(1000px, calc(100dvh - var(--workspace-header-height, 68px) - 215px)); min-height: 420px; }
}
@media (max-width: 650px) {
  .records-page main { padding-top: 15px; }
  .record-filter-options { margin-top: 4px; border-bottom: 1px solid var(--line); }
  .record-filter-options > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; min-height: 56px; padding: 9px 2px; list-style: none; font-size: 11px; }
  .record-filter-options > summary::-webkit-details-marker { display: none; }
  .record-filter-options > summary::after { content: '+'; grid-column: 2; grid-row: 1 / 3; align-self: center; font: 16px var(--console-mono, monospace); color: #b2bfd0; }
  .record-filter-options[open] > summary::after { content: '−'; }
  .record-filter-label { display: flex; align-items: baseline; gap: 10px; }
  #record-filter-count { color: #8494a8; font-size: 10px; }
  #record-filter-summary { grid-column: 1; color: #a2b0c2; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
  .record-filter-options .query-caption { border-bottom: 0; }
  .records-page .record-tools { gap: 1px; min-height: 53px; flex-wrap: wrap; padding-block: 4px; }
  .record-tools button, .record-tools .record-transfer { padding-inline: 9px; font-size: 11px; }
  .record-tools .record-transfer { gap: 4px; }
  .record-tools .record-transfer span { display: none; }
  #schema-editor { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  #schema-editor > .editor-actions { position: fixed; z-index: 20; left: 0; right: 0; bottom: var(--records-keyboard-inset, 0px); margin: 0; padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #354659; background: #0b1017f5; backdrop-filter: blur(12px); gap: 14px; }
  #schema-editor > .editor-actions .primary { min-width: 110px; min-height: 44px; }
}
@media (max-width: 350px) {
  .record-tools button, .record-tools .record-transfer { padding-inline: 7px; font-size: 10px; }
}