:root { --ink: #111; --paper: #fff; }
* { box-sizing: border-box; }
body { margin: 0; background: #e7eaed; color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
.toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px max(24px, calc((100% - 850px) / 2)); background: #1d2d3b; color: white; font-family: system-ui, sans-serif; box-shadow: 0 2px 8px #0004; }
.toolbar h1 { margin: 0; font-size: 20px; }.toolbar p { margin: 3px 0 0; font-size: 13px; opacity: .8; }.toolbar-actions { display: flex; align-items: center; gap: 10px; }.toolbar button { border: 0; border-radius: 5px; padding: 10px 14px; font-weight: 650; cursor: pointer; }.primary { background: #e9b84c; }.secondary { background: #fff; color: #1d2d3b; }.view-switch { display: flex; overflow: hidden; border: 1px solid #8fa1af; border-radius: 5px; }.view-switch button { border-radius: 0; color: white; background: transparent; }.view-switch button.active { background: #54758b; }
.classic-form { width: min(960px, calc(100% - 32px)); margin: 28px auto; padding: 30px; background: #fff; box-shadow: 0 2px 16px #0003; font-family: system-ui, sans-serif; }.form-heading { margin-bottom: 22px; }.form-heading h2 { margin: 0; text-align: left; font-size: 25px; }.form-heading p { margin: 5px 0 0; color: #617080; }.classic-form fieldset { margin: 0 0 20px; padding: 19px; border: 1px solid #c8d1d7; border-radius: 7px; }.classic-form legend { padding: 0 8px; font-weight: 750; color: #253e50; }.classic-form label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 650; }.classic-form input, .classic-form textarea { min-height: 35px; padding: 7px 9px; border: 1px solid #aebcc6; border-radius: 4px; background: #fff; font-family: inherit; font-weight: 400; }.classic-form textarea { min-height: 100px; resize: vertical; }.form-grid { display: grid; gap: 15px; }.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.measurements-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.measurements-grid span { font-size: 12px; color: #637280; font-weight: 400; }.valve-form-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 7px; align-items: center; }.valve-form-grid strong { font-size: 13px; text-align: center; }.segment-form { display: grid; grid-template-columns: 130px repeat(6, minmax(0, 1fr)); gap: 9px; align-items: end; }.segment-form > label:nth-child(7n + 1) { align-self: center; color: #253e50; }.segment-form label { font-size: 12px; }.signature-fields { margin-top: 15px; }
.sheet { width: 148mm; min-height: 210mm; margin: 24px auto; padding: 9mm 9mm 7mm; background: var(--paper); box-shadow: 0 2px 16px #0003; font-size: 8.3pt; line-height: 1.12; }
input, textarea { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid #555; border-radius: 0; background: #f6f8fa; color: inherit; font: inherit; padding: 1px 3px; outline-offset: 1px; } input:focus, textarea:focus { outline: 2px solid #3385c6; background: #fff; }
.clinic-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; font-weight: 700; }.clinic-head > div { width: 62%; }.clinic-head input { display: block; font-weight: inherit; border: 0; background: transparent; padding-left: 0; }.clinic-name { font-size: 8.8pt; }.address { width: 30%; text-align: right; }
h2 { margin: 6mm 0 3mm; font-size: 13pt; text-align: center; } h3 { margin: 3.5mm 0 1.5mm; font-size: 9pt; text-align: center; }.patient-line { display: flex; gap: 4mm; margin-bottom: 2mm; }.patient-line label:first-child { flex: 1; }.patient-line label:last-child { width: 42mm; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; } th, td { border: 1px solid var(--ink); height: 5.2mm; padding: 1px 2px; text-align: center; vertical-align: middle; } th { font-weight: 700; } table > tbody > tr > th { text-align: left; }.sheet table input { display: block; height: 100%; padding: 0 2px; border: 0; text-align: center; background: transparent; }.valves th:first-child { width: 26%; }.valves th:not(:first-child) { width: 18.5%; }.segments { font-size: 7.6pt; }.segments th:first-child { width: 15%; }.segments th:not(:first-child) { width: 14.16%; }.segments th, .segments td { height: 5.1mm; }.line-field { display: flex; align-items: end; gap: 2mm; margin-top: 2mm; font-weight: 700; white-space: nowrap; }.line-field input { flex: 1; }.diastolic { margin-top: 4mm; }.conclusion { display: block; margin-top: 4mm; min-height: 25mm; font-weight: 700; }.conclusion textarea { display: block; min-height: 20mm; margin-top: 1mm; resize: vertical; border: 1px solid #777; line-height: 1.25; }.signatures { display: flex; justify-content: space-between; gap: 20mm; margin-top: 7mm; }.signatures label { display: flex; align-items: end; gap: 2mm; width: 50%; white-space: nowrap; }.signatures input { flex: 1; }
@media (max-width: 650px) { .toolbar { position: static; align-items: flex-start; flex-direction: column; }.sheet { margin: 0; transform-origin: top left; }.toolbar-actions { width: 100%; }.toolbar button { flex: 1; } }
@page { size: A5 portrait; margin: 0; }
body.blank-active .classic-form, body:not(.blank-active) .blank-form { display: none; }
@media print { body { background: #fff; } .toolbar, .classic-form { display: none !important; } .blank-form { display: block !important; } .sheet { width: 148mm; min-height: 210mm; margin: 0; padding: 9mm 9mm 7mm; box-shadow: none; } input, textarea { border-color: transparent !important; background: transparent !important; outline: 0 !important; } .conclusion textarea { border-color: transparent !important; resize: none; } }