/* Simulated app, desktop screens: Tests page, wallboard, alert page, notification settings. */
.d-page { position: absolute; inset: 0; padding: 1.6em 2em; display: flex; flex-direction: column; gap: 1.1em; overflow: hidden; }
/* the real app shell: ink sidebar, top bar with the organisation and panel pickers */
.s-shell { position: absolute; inset: 0; display: grid; grid-template-columns: 15.5em minmax(0, 1fr); background: #f8f7fa; }
.s-side { background: #2f3349; padding: 1.3em 0.9em; display: flex; flex-direction: column; gap: 0.15em; overflow: hidden; }
.s-side img { width: 9.5em; margin: 0 0 1.1em 0.5em; }
.s-h { margin: 1em 0 0.3em 0.7em; font-size: 0.72em; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); }
.s-item { display: flex; align-items: center; gap: 0.8em; padding: 0.55em 0.8em; border-radius: 0.45em; color: rgba(255,255,255,0.86); font-size: 0.95em; }
.s-item i { width: 1.05em; height: 1.05em; border-radius: 0.25em; border: 1.5px solid currentColor; opacity: 0.8; flex-shrink: 0; }
.s-item.is-on { background: #fe8f1d; color: #fff; font-weight: 500; }
.s-main { min-width: 0; display: flex; flex-direction: column; gap: 1em; padding: 1em 1.4em 0; overflow: hidden; }
.s-top { display: flex; align-items: center; gap: 1.6em; background: #fff; border-radius: 0.6em; box-shadow: 0 0.15em 0.45em rgba(39,40,61,0.08); padding: 0.75em 1.2em; flex-shrink: 0; }
.s-top .a-av { margin-left: auto; }
.s-pick { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 500; color: #2f3349; }
.s-pick i { width: 1.1em; height: 1.1em; border-radius: 0.2em; background: #fe8f1d; } .s-pick .s-pan { background: #1f9d6b; }
.s-demo { font-size: 0.8em; font-weight: 600; color: #6d6f85; background: #eeeef3; border-radius: 0.3em; padding: 0.15em 0.6em; }
.s-page { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1em; overflow: hidden; }
.d-title h1 { font-size: 1.7em; font-weight: 600; display: flex; align-items: center; gap: 0.6em; }
.d-title h1 .a-chip { font-size: 0.5em; }
.d-title p { margin: 0.1em 0 0; color: #6d6f85; }
.d-card { background: #fff; border-radius: 0.7em; box-shadow: 0 0.15em 0.45em rgba(39,40,61,0.08); }
.d-card--pad { padding: 1.2em 1.4em; }
.d-card h2 { font-size: 1.15em; font-weight: 600; }
.d-card__head { padding: 1.1em 1.4em 0.7em; }
.d-card__head p { margin: 0.1em 0 0; color: #6d6f85; font-size: 0.92em; }
.d-card__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 0.4em; }
.d-table { display: grid; }
.d-tr { display: grid; align-items: center; gap: 1em; padding: 0.75em 1.4em; border-top: 1px solid #ececf2; transition: background-color 250ms var(--ease); }
.d-table--stands .d-tr { grid-template-columns: 1.5fr 1fr 1fr 1.5fr 0.6fr; }
.d-table--tests .d-tr { grid-template-columns: 1fr 1.5fr 0.8fr 0.8fr 0.7fr 0.8fr 1.1fr 0.3fr; }
.d-tr--head { font-size: 0.82em; font-weight: 600; color: #6d6f85; text-transform: uppercase; letter-spacing: 0.05em; border-top: 0; }
.d-tr.is-hover, .d-mr.is-hover { background: #fff8ef; }
.d-link { color: #a85300; font-weight: 600; }
.d-annual { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.7em; }
.d-annual b { font-variant-numeric: tabular-nums; } .d-annual u { text-decoration: none; color: #a85300; font-weight: 500; white-space: nowrap; }
.d-tiles { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1em; padding: 0 1.4em 1.1em; }
.d-tile { border: 1px solid #ececf2; border-radius: 0.7em; padding: 0.9em 1.1em; display: grid; gap: 0.2em; align-content: start; }
.d-tile--ok { background: #dff3e9; border-color: #c5e8d6; } .d-tile--ok b { color: #146a47; }
.d-tile b { font-size: 1.15em; } .d-tile .d-big { font-size: 2.6em; line-height: 1; }
.d-tile .a-bar { margin: 0.3em 0; }
.d-mr { display: grid; grid-template-columns: 0.7fr 1.3fr 1.3fr 1fr 0.6fr; gap: 1em; align-items: start; padding: 0.8em 1.4em; border-top: 1px solid #ececf2; font-weight: 500; color: #2f3349; transition: background-color 250ms var(--ease); }
.d-mr--head { font-size: 0.88em; font-weight: 600; align-items: end; }
.d-mr--head span { display: grid; } .d-mr--head small { font-weight: 400; }
.d-end { justify-self: end; text-align: right; }
.d-cell { display: grid; font-weight: 400; }
.d-togo { font-weight: 600; color: #6e5200; } .d-done { font-weight: 600; color: #146a47; }
.d-sub { font-size: 0.85em; color: #6d6f85; } .d-sub--alarm { color: #9b1c35; }
.d-follow { margin: 0 1.4em 0.8em; padding: 0.7em 1em; border-radius: 0.5em; background: #fff6d6; color: #6e5200; font-size: 0.92em; }
.d-follow b { color: #6e5200; }
.d-scroll { display: flex; flex-direction: column; gap: 1.1em; transition: transform 900ms var(--ease); }
.d-scroll.is-scrolled { transform: translateY(-19.5em); }
.d-pdf { position: absolute; right: 2em; top: 4.5em; bottom: 1.4em; width: 38%; background: #fff; border-radius: 0.7em; padding: 1.4em; display: grid; gap: 0.7em; align-content: start; box-shadow: 0 0.8em 2.5em rgba(39,40,61,0.25); opacity: 0; transform: translateX(2em); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.d-pdf.is-in { opacity: 1; transform: none; }
.d-pdf > b { font-size: 1.2em; }
.d-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.1em; align-items: start; }
.d-plain { margin: 0.5em 0 0; font-size: 1.15em; line-height: 1.5; color: #2f3349; }
.app .d-card .d-h2b { margin-top: 1.1em; }
.d-raw { display: block; margin-top: 0.5em; padding: 0.7em 0.9em; border-radius: 0.5em; background: #f8f7fa; font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; color: #494a66; }
.d-wait { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.9em 1.4em; border-radius: 0.7em; background: #fdecec; border: 1px solid #f6c9cb; transition: background-color 350ms var(--ease), border-color 350ms var(--ease); }
.d-wait span:first-child { display: grid; } .d-wait b { color: #9b1c35; font-size: 1.1em; }
.d-wait.is-acked { background: #dff3e9; border-color: #b9e3cf; } .d-wait.is-acked b { color: #146a47; }
.d-wait .a-btn { min-height: 2.6em; padding: 0 1.4em; }
.a-cursor { position: absolute; z-index: 9; width: 1.5em; height: 1.5em; margin: -0.2em 0 0 -0.2em; border-radius: 50% 50% 50% 0; background: #2f3349; border: 0.15em solid #fff; transform: rotate(135deg) skew(8deg, 8deg) scale(0.8); box-shadow: 0 0.2em 0.6em rgba(0,0,0,0.3); transition: left 1400ms var(--ease), top 1400ms var(--ease), background-color 150ms var(--ease); }
.a-cursor.is-click { background: #fe8f1d; }

/* notifications */
.n-row { display: flex; align-items: center; gap: 0.8em; padding: 0.6em 0; border-top: 1px solid #ececf2; }
.n-row > span:nth-child(2) { flex: 1; display: grid; }
.n-st { display: grid; justify-items: end; gap: 0.15em; }
.n-hours { display: grid; gap: 0.15em; }
.n-kind { padding: 1.1em 1.4em; }
.n-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 6em); align-items: center; row-gap: 0.6em; }
.n-name { font-size: 1.15em; font-weight: 600; color: #2f3349; }
.n-col { grid-column: span 2; text-align: center; font-size: 0.85em; font-weight: 600; color: #6d6f85; padding: 0.3em 0; border-radius: 0.4em; }
.n-col.is-now { background: #eeeef3; color: #2f3349; }
.n-ch { text-align: center; font-size: 0.85em; color: #6d6f85; }
.n-tk { justify-self: center; width: 1.7em; height: 1.7em; border-radius: 0.4em; border: 1.5px solid #c9cad6; background: #fff; position: relative; transition: background-color 200ms var(--ease), border-color 200ms var(--ease); }
.n-tk.is-on { background: #2f3349; border-color: #2f3349; }
.n-tk.is-on::after { content: ""; position: absolute; left: 50%; top: 46%; width: 26%; height: 50%; border: solid #fff; border-width: 0 0.16em 0.16em 0; transform: translate(-50%, -50%) rotate(45deg); }
.n-says { margin: 0; padding: 0.9em 1.4em; border-radius: 0.7em; background: #fff; box-shadow: 0 0.15em 0.45em rgba(39,40,61,0.08); font-size: 1.1em; color: #2f3349; }

/* wallboard */
.w-board { position: absolute; inset: 0; padding: 1.2em 1.6em; display: flex; flex-direction: column; gap: 1em; background: #f8f7fa; transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.w-board.is-alarm { background: #fff5f5; box-shadow: inset 0 0 0 0.5em #e5484d; }
.w-head { display: flex; align-items: center; gap: 1em; }
.w-head b { font-size: 1.3em; } .w-head .s-demo { margin-left: 0.4em; } .w-clock { margin-left: auto; font-variant-numeric: tabular-nums; color: #6d6f85; }
.w-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1em; }
.w-tile { background: #fff; border-radius: 0.7em; box-shadow: 0 0.15em 0.45em rgba(39,40,61,0.08); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 300ms var(--ease); }
.w-tile.is-alarm { box-shadow: 0 0 0 0.3em #e5484d; }
.w-tile__body { padding: 0.7em 0.9em; display: grid; gap: 0.2em; justify-items: start; }
.w-tile__body span[data-status] { font-size: 0.9em; color: #6d6f85; }
.w-tile.is-alarm span[data-status] { color: #9b1c35; font-weight: 600; }
.w-plan { position: relative; flex: 1; min-height: 4em; background: #eef0f6; }
.w-plan i { position: absolute; border: 1.5px solid #b9c2d8; background: #fff; border-radius: 2px; }
.w-plan em { position: absolute; left: 0.6em; top: 0.4em; font-style: normal; font-size: 0.7em; font-weight: 600; letter-spacing: 0.06em; color: #6d6f85; }
.w-plan i:nth-child(1) { background: #fdf3e3; } .w-plan i:nth-child(2) { background: #eaf3fb; } .w-plan i:nth-child(3) { background: #eaf6ee; } .w-plan i:nth-child(4) { background: #f3eefa; }
.w-take { position: absolute; inset: 4.2em 1.6em 1.6em; display: flex; flex-direction: column; gap: 0.8em; opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease); }
.w-board.is-alarm .w-take { opacity: 1; } .w-board.is-alarm .w-grid { opacity: 0; }
.w-take__bar { display: flex; align-items: center; gap: 0.8em; } .w-take__bar b { font-size: 1.6em; margin-right: auto; }
.w-take__bar .a-btn { min-height: 2.6em; padding: 0 1.2em; }
.w-take__map { position: relative; flex: 1; min-height: 0; background: #fff; border-radius: 0.7em; overflow: hidden; display: flex; box-shadow: 0 0.15em 0.45em rgba(39,40,61,0.08); }
.w-pin { position: absolute; left: 76%; top: 26%; width: 1.4em; height: 1.4em; margin: -0.7em; border-radius: 50%; background: #e5484d; border: 0.2em solid #fff; box-shadow: 0 0 0 0.5em rgba(229,72,77,0.25); animation: w-pulse 1.4s ease-in-out infinite; }
.w-box { position: absolute; left: 1.2em; top: 1.2em; width: 34%; background: #fff; border: 1px solid #e5484d; border-radius: 0.7em; padding: 1.1em 1.2em; display: grid; gap: 0.35em; box-shadow: 0 0.6em 1.8em rgba(39,40,61,0.18); }
.w-box__top { display: flex; justify-content: space-between; align-items: center; color: #6d6f85; font-size: 0.9em; }
.w-box > b { font-size: 1.3em; line-height: 1.3; }
.w-box__ack { color: #9b1c35; margin-top: 0.3em; }
@keyframes w-pulse { 0%, 100% { box-shadow: 0 0 0 0.3em rgba(229,72,77,0.35); } 50% { box-shadow: 0 0 0 1em rgba(229,72,77,0.08); } }
@media (prefers-reduced-motion: reduce) { .w-pin { animation: none; } .a-cursor, .d-scroll, .d-pdf, .w-take { transition: none; } }