/* ERKAL screen typography. Roles and extension rules: docs/ERKAL-TYPOGRAPHY.md. */ /* Font faces generated by scripts/build-font-subsets.py; originals load on demand. */ @media screen { @font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/erkal/BarlowSemiCondensed-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0100-0113, U+0116-011D, U+0120-012B, U+012D-012F, U+0133-0137, U+0139-013E, U+0140-0148, U+014A-014D, U+014F-0151, U+0154-015D, U+0160-0177, U+0179-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01CE, U+01D4, U+01E5, U+01E7, U+01E9, U+01EF, U+01FF, U+0218-021B, U+021F, U+0228-0229, U+0237, U+0259, U+0292, U+02BB, U+02C7, U+02C9, U+02D8-02D9, U+02DB, U+02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+1EA0-1EF9, U+FB01-FB02; } @font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/erkal/BarlowSemiCondensed-SemiBold-ui-v1.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+0178, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0304, U+0306-030C, U+0312-0313, U+031B, U+0323, U+0326-0328, U+0335-0338, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2070, U+2074-2079, U+20A3, U+20AC, U+20BA, U+20BD, U+2113, U+2122, U+2126, U+212E, U+215B-215E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+27E9; } @font-face { font-family: "Inter"; src: url("/fonts/erkal/InterVariable-4.1.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; unicode-range: U+0100-011D, U+0120-012F, U+0132-0148, U+014A-0151, U+0154-015D, U+0160-0177, U+0179-01C3, U+01C5-0254, U+0256-027B, U+027E-0284, U+0286-0290, U+0292-02A4, U+02A6-02BB, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0374-0376, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03D7, U+03DC-03DD, U+03F0-03F6, U+03F9-03FA, U+03FC-0479, U+0480-049D, U+04A0-04FF, U+052F, U+0E3F, U+1D00, U+1D0D, U+1D1B, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1E9B, U+1E9D, U+1E9F-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+A69F, U+A7FF, U+A92E, U+E000, U+E002-E05E, U+E06A-E0BD, U+E0C8-E0CC, U+E0DC-E0E6, U+E0F3-E0F5, U+E106, U+E109-E10A, U+E10C-E10F, U+E111-E113, U+E117-E118, U+E121-E122, U+E124, U+E12A-E15E, U+E163, U+E1C3, U+E1D2-E1DF, U+E1E1-E2DC, U+EE01-EE07, U+EE09-EE0A, U+EE0C-EE12, U+EE14, U+EE17, U+EE1D-EE45, U+EE47-EE84, U+EE87-EED6, U+EED8-EEE1, U+F6C3, U+1F12F-1F149, U+1F16A-1F16B, U+1F850, U+1F852; } @font-face { font-family: "Inter"; src: url("/fonts/erkal/InterVariable-4.1-ui-v1.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+0178, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0304, U+0306-030A, U+030C, U+030F, U+0313, U+0315, U+031B, U+0323, U+0326-0328, U+032C, U+0337-0338, U+0342-0343, U+0346-036F, U+1E9E, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AF, U+20B1-20B5, U+20B8-20BA, U+20BC-20C0, U+20DB-20DE, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2122, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+2150-217F, U+2183-2186, U+2189, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2202, U+2205-2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2295-2298, U+2303-2305, U+2318, U+2325-2327, U+232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2423, U+2460-2468, U+24B6-24CF, U+24EA, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A-266B, U+26A0, U+2713, U+2717, U+2756, U+2764, U+2780-2788, U+27EF, U+27F5-27FA, U+2913, U+2A38, U+2B06, U+2B12-2B13, U+2B1C, U+2B24, U+FEFF; } } /* Apply the same token block to the screen root as well: mobile WebKit must retain these values across navigation when this stylesheet is reused. */ :root, body.erkal-typography { --erkal-font-heading: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif; --erkal-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --erkal-font-data: var(--erkal-font-body); --erkal-text-body: .9375rem; --erkal-text-small: .875rem; --erkal-text-control: 1rem; --erkal-text-table: .875rem; --erkal-text-page: clamp(1.625rem, 1.5rem + .4vw, 1.875rem); --erkal-text-section: clamp(1.375rem, 1.3rem + .25vw, 1.5rem); --erkal-text-card: 1.125rem; --erkal-text-metric: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); --erkal-text-operator: 1.125rem; --erkal-weight-regular: 400; --erkal-weight-medium: 500; --erkal-weight-semibold: 600; --erkal-leading-heading: 1.2; --erkal-leading-body: 1.5; --erkal-leading-table: 1.45; --erkal-space-heading: .5rem; --erkal-space-section: 1rem; } /* Inheritance is deliberately screen-only, including the body and form controls. PDF, email and label layouts neither include this sheet nor receive these roles. */ @media screen { body.erkal-typography { font-family: var(--erkal-font-body); font-size: var(--erkal-text-body); font-weight: var(--erkal-weight-regular); line-height: var(--erkal-leading-body); font-optical-sizing: auto; } /* In-app reader and recipe text have explicit legacy font shorthands. */ body.erkal-typography :is(.manual-reader, .manual-watermark, .recipe-copy-text) { font-family: var(--erkal-font-body); } body.erkal-typography .manual-reader { line-height: var(--erkal-leading-body); } body.erkal-typography .recipe-copy-text { font-size: var(--erkal-text-body); font-weight: var(--erkal-weight-regular); line-height: var(--erkal-leading-body); } .erkal-typography :is(button, input, select, textarea) { font-family: var(--erkal-font-body); } body.erkal-typography :is(.erkal-page-title, .erkal-section-title) { font-family: var(--erkal-font-heading); font-weight: var(--erkal-weight-semibold); line-height: var(--erkal-leading-heading); letter-spacing: normal; text-transform: none; margin-block: 0 var(--erkal-space-heading); overflow-wrap: anywhere; } body.erkal-typography .erkal-page-title { font-size: var(--erkal-text-page); } body.erkal-typography .erkal-section-title { font-size: var(--erkal-text-section); margin-block-end: var(--erkal-space-section); } body.erkal-typography .erkal-card-title { font-family: var(--erkal-font-body); font-size: var(--erkal-text-card); font-weight: var(--erkal-weight-semibold); line-height: 1.35; letter-spacing: normal; text-transform: none; margin-block: 0 var(--erkal-space-heading); overflow-wrap: anywhere; } .erkal-typography :is(.erkal-description, .page-head p, .welcome p, .ai-page-head p) { font-size: var(--erkal-text-body); line-height: var(--erkal-leading-body); } body.erkal-typography .erkal-data { font-family: var(--erkal-font-data); text-transform: none; } body.erkal-typography :is(.erkal-code, .work-code, .ops-work-reference) { font-family: var(--erkal-font-data); font-weight: inherit; font-feature-settings: "zero", "cv05", "cv08"; font-variant-numeric: lining-nums tabular-nums; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; } /* These legacy containers can hold names/codes as well as captions. */ body.erkal-typography :is(.operator-now-card, .operator-summary, .order-summary, .report-summary, .machine-summary, .machine-kpi-grid, .machine-location, .machine-facts-grid, .record-collaboration__users) :is(span, small) { text-transform: none; letter-spacing: normal; } .erkal-typography :is(.erkal-number, .num, .erkal-metric) { font-family: var(--erkal-font-data); font-variant-numeric: lining-nums tabular-nums; } .erkal-typography :is(td, th).erkal-number, .erkal-typography :is(td, th).num { text-align: right; } .erkal-typography td.erkal-number::before { text-align: left; } body.erkal-typography :is(.erkal-metric, .metric-card strong, .operator-summary strong, .operator-queue-grid a > strong) { font-family: var(--erkal-font-data); font-size: var(--erkal-text-metric); font-weight: var(--erkal-weight-semibold); line-height: var(--erkal-leading-heading); font-variant-numeric: lining-nums tabular-nums; text-transform: none; } body.erkal-typography .operator-summary strong:not(.erkal-metric) { font-size: var(--erkal-text-card); font-variant-numeric: normal; line-height: var(--erkal-leading-body); } body.erkal-typography :is(time, .erkal-date) { font-family: var(--erkal-font-data); font-variant-numeric: lining-nums tabular-nums; } body.erkal-typography .metric-card > span { font-size: var(--erkal-text-small); font-weight: var(--erkal-weight-semibold); text-transform: none; letter-spacing: normal; } body.erkal-typography .page-head > .actions { display: flex; flex-wrap: wrap; gap: .5rem; } body.erkal-typography .page-head > .button-row .button { overflow-wrap: normal; word-break: normal; } body.erkal-typography .data-table td.actions .button { min-inline-size: 5rem; overflow-wrap: normal; } body.erkal-typography td.erkal-number { white-space: nowrap; } body.erkal-typography td.erkal-number :is(small, .muted, .system-estimate) { white-space: normal; } body.erkal-typography :is(strong, b) { font-weight: var(--erkal-weight-semibold); } body.erkal-typography :is(.button, button, .side-nav a, .tabs a, .tab-button, .pagination a) { font-family: var(--erkal-font-body); font-size: var(--erkal-text-small); font-weight: var(--erkal-weight-semibold); line-height: var(--erkal-leading-body); text-transform: none; letter-spacing: normal; } body.erkal-typography :is(.app-shell main, .public-main, .guest-main) :is(input, select, textarea), body.erkal-typography :is(input, select, textarea) { font-family: var(--erkal-font-body); font-size: var(--erkal-text-control); font-weight: var(--erkal-weight-regular); line-height: var(--erkal-leading-body); } body.erkal-typography :is(.app-shell main, .public-main, .guest-main) label, body.erkal-typography label { font-size: var(--erkal-text-small); font-weight: var(--erkal-weight-semibold); line-height: var(--erkal-leading-body); } body.erkal-typography :is(.data-table, table) { font-size: var(--erkal-text-table); line-height: var(--erkal-leading-table); } body.erkal-typography :is(.data-table, table) th { font-family: var(--erkal-font-body); font-size: var(--erkal-text-small); font-weight: var(--erkal-weight-semibold); line-height: var(--erkal-leading-table); text-transform: none; letter-spacing: normal; } body.erkal-typography :is(.data-table, table) td { line-height: var(--erkal-leading-table); } body.erkal-typography :is(.table-wrap, .table-responsive) { min-width: 0; overflow-x: auto; } body.erkal-typography :is(.app-shell main, .public-main, .guest-main) :is(small, .help, .system-estimate, .muted, .form-help), body.erkal-typography :is(.eyebrow, .nav-group, .badge, .status) { font-size: var(--erkal-text-small); line-height: var(--erkal-leading-body); text-transform: none; letter-spacing: normal; } body.erkal-typography :is(.eyebrow, .nav-group) { font-weight: var(--erkal-weight-semibold); } /* Keep status and due-date text at the shared reading size even when the corporate surface supplies more specific legacy 12/13px rules. */ body.erkal-typography .app-shell :is(.badge, .status-chip, .health-status-badge), body.erkal-typography .app-shell .term-badge :is(time, small) { font-size: var(--erkal-text-small); } body.erkal-typography .order-product-summary span:not(.badge) { font-size: var(--erkal-text-small); } /* Summary captions are block-level; a due date still needs separate rows for its date and remaining time inside the available card width. */ body.erkal-typography .order-summary .term-badge { display: inline-grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: normal; word-break: normal; } body.erkal-typography .order-summary .term-badge :is(time, small) { min-width: 0; } body.erkal-typography :is(.page-head, .section-head, .ai-page-head) { min-width: 0; gap: 1rem; } body.erkal-typography :is(.page-head, .section-head, .ai-page-head) > div { min-width: 0; } /* Workshop primary text is intentionally larger than dense office tables. */ body.erkal-typography.operator-role { font-size: var(--erkal-text-operator); } body.erkal-typography.operator-role :is(.manual-reader, .recipe-copy-text) { font-size: var(--erkal-text-operator); } body.erkal-typography.operator-role :is(.app-shell main label, .app-shell main input, .app-shell main select, .app-shell main textarea, .work-card, .work-card p, .work-card strong, .work-next-action, .operator-now-card p, .ops-work-product, .operator-summary, .erkal-description, .page-head p, .welcome p, .button, button) { font-size: var(--erkal-text-operator); line-height: var(--erkal-leading-body); } body.erkal-typography.operator-role :is(.app-shell main small, .app-shell main .help, .app-shell main .muted, .app-shell main .system-estimate, .app-shell main .form-help) { font-size: 1rem; } body.erkal-typography.operator-role main :is(input, select, textarea):not([type=hidden]):not([type=checkbox]):not([type=radio]) { font-size: var(--erkal-text-operator); } body.erkal-typography.operator-role .physical-source-dialog :is(input, .source-option strong) { font-size: var(--erkal-text-operator); line-height: var(--erkal-leading-body); } body.erkal-typography.operator-role .physical-source-dialog :is(small, footer) { font-size: 1rem; line-height: var(--erkal-leading-body); } body.erkal-typography.operator-role .erkal-page-title { font-size: var(--erkal-text-page); } body.erkal-typography.operator-role .erkal-card-title { font-size: 1.25rem; } @media (max-width: 850px) { /* A zero flex basis lets six actions shrink to single-letter columns. Size the action cells independently of their label length. */ body.erkal-typography .page-head:has(> .button-row) { flex-direction: column; align-items: stretch; } body.erkal-typography .page-head > .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; width: 100%; gap: .5rem; } body.erkal-typography .page-head > .button-row > * { min-width: 0; margin: 0; } body.erkal-typography .page-head > .button-row > .button, body.erkal-typography .page-head > .button-row > form > .button { width: 100%; height: 100%; min-height: 3rem; padding: .625rem .75rem; white-space: normal; } } @media (min-width: 600px) and (max-width: 850px) { body.erkal-typography .page-head > .button-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 701px) { /* Unlike anywhere, break-word preserves the longest word's intrinsic width while the native order table distributes its columns. */ body.erkal-typography .order-main-row .customer-name { overflow-wrap: break-word; } } @media (max-width: 760px) { body.erkal-typography :is(.data-table, table) td::before { font-size: var(--erkal-text-small); font-weight: var(--erkal-weight-semibold); white-space: normal; line-height: var(--erkal-leading-table); text-transform: none; letter-spacing: normal; } body.erkal-typography :is(.button, button) { min-height: 2.75rem; } body.erkal-typography main :is(.button, button) { min-height: 3rem; } } }