/* Fistula Risk Score — "The Study Group" design system. Source of truth: DESIGN.md (repo root). Loaded last. Nothing here applies unless the opts in through a scope class: .frs-landing (public), .frs-auth (sign-in), .frs-lock (lock screen), .frs-app (Operate mode). */ /* ---------- Fonts: self-hosted, SIL OFL (wwwroot/fonts/OFL-*.txt) ---------- */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-600-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-latin.woff2") format("woff2-variations"), url("../fonts/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2-variations"), url("../fonts/source-sans-3-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-cyrillic.woff2") format("woff2-variations"), url("../fonts/source-sans-3-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ---------- Tokens (DESIGN.md frontmatter) ---------- */ :root { --frs-ink-navy: #001E53; /* the mark's outline stroke; action, headlines */ --frs-chart-room: #00133A; /* dark panels */ --frs-steel: #0B2E6B; /* links, focus on light */ --frs-navy-tint: #E6ECF5; --frs-select: #D3DDEE; --frs-ink: #161A2B; --frs-ink-muted: #525866; --frs-on-dark: #FFFFFF; --frs-on-dark-muted: #B7C3DC; --frs-paper: #F6F3EC; /* Persuade surfaces */ --frs-surface: #FFFFFF; /* figures, inputs, Operate surfaces */ --frs-surface-alt: #F4F5F7; --frs-rule: #DDD7CA; /* hairlines on paper; decorative only */ --frs-border: #D8DBE2; --frs-border-input: #848AA0; --frs-placeholder: #6B7185; --frs-risk-negligible: #0B7A2E; --frs-risk-negligible-bg: #E7F6EC; --frs-risk-low: #0E6E6E; --frs-risk-low-bg: #E3F3F3; --frs-risk-moderate: #8A5B08; --frs-risk-moderate-solid: #E7A829; --frs-risk-moderate-bg: #FCF1DC; --frs-risk-high: #A30000; --frs-risk-high-bg: #FBE7E7; --frs-focus-on-light: #0B2E6B; --frs-focus-on-dark: #FFFFFF; --frs-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --frs-font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --frs-font-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace; --frs-radius-sm: .375rem; --frs-radius-md: .625rem; --frs-radius-lg: 1rem; --frs-shadow-lift: 0 .75rem 2rem rgba(22, 26, 43, .10), 0 .125rem .375rem rgba(22, 26, 43, .06); --frs-target: 3rem; /* 48px: Android minimum, above the iOS 44pt */ --frs-ease-out: cubic-bezier(.16, 1, .3, 1); } /* ---------- Page base ---------- */ html:has(> body.frs-landing), html:has(> body.frs-auth) { background: var(--frs-paper); /* iOS overscroll shows the page, not white */ scrollbar-color: #B9B2A2 transparent; } .frs-landing, .frs-auth { margin: 0; font-family: var(--frs-font-sans); font-size: 1rem; line-height: 1.6; color: var(--frs-ink); background: var(--frs-paper); caret-color: var(--frs-ink-navy); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .frs-landing ::selection, .frs-auth ::selection { background: var(--frs-select); color: var(--frs-ink); } .frs-landing a, .frs-auth a { color: var(--frs-steel); text-decoration-thickness: 1px; text-underline-offset: .2em; } .frs-landing a:hover, .frs-auth a:hover { color: var(--frs-ink-navy); } .frs-landing :focus-visible, .frs-auth :focus-visible { outline: 3px solid var(--frs-focus-on-light); outline-offset: 2px; } .frs-on-dark :focus-visible { outline-color: var(--frs-focus-on-dark); } .frs-landing main:focus, .frs-auth main:focus { outline: none; } .frs-landing h1, .frs-auth h1, .frs-landing h2, .frs-auth__pitch-title { font-family: var(--frs-font-serif); font-weight: 600; color: var(--frs-ink-navy); text-wrap: balance; } .frs-skip { position: absolute; left: 1rem; top: -4rem; z-index: 1100; display: inline-flex; align-items: center; min-height: var(--frs-target); padding: 0 1rem; border-radius: var(--frs-radius-sm); background: var(--frs-surface); color: var(--frs-ink-navy); font-weight: 600; } .frs-skip:focus { top: 1rem; box-shadow: var(--frs-shadow-lift); } .frs-num { font-family: var(--frs-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } /* ---------- Buttons ---------- */ .frs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--frs-target); padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: var(--frs-radius-sm); font-family: var(--frs-font-sans); font-size: 1rem; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out; } .frs-landing a.frs-btn, .frs-auth a.frs-btn, .frs-btn:hover { text-decoration: none; } .frs-landing .frs-btn--primary, .frs-auth .frs-btn--primary { background: var(--frs-ink-navy); border-color: var(--frs-ink-navy); color: var(--frs-on-dark); } .frs-landing .frs-btn--primary:hover, .frs-auth .frs-btn--primary:hover { background: var(--frs-chart-room); border-color: var(--frs-chart-room); color: var(--frs-on-dark); } .frs-landing .frs-btn--secondary, .frs-auth .frs-btn--secondary { background: transparent; border-color: var(--frs-steel); color: var(--frs-steel); } .frs-landing .frs-btn--secondary:hover, .frs-auth .frs-btn--secondary:hover { background: var(--frs-navy-tint); color: var(--frs-ink-navy); } .frs-btn--block { display: flex; width: 100%; } .frs-btn:disabled { opacity: .72; cursor: progress; } .frs-busy { display: none; } .is-busy .frs-busy { display: inline-block; } /* ---------- Brand lockup ---------- */ .frs-brand { display: inline-flex; align-items: center; gap: .625rem; min-height: var(--frs-target); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.005em; white-space: nowrap; } .frs-landing a.frs-brand, .frs-auth a.frs-brand { color: var(--frs-ink); text-decoration: none; } .frs-auth .frs-on-dark a.frs-brand { color: var(--frs-on-dark); } .frs-brand img { width: 2.25rem; height: 2.25rem; border-radius: .5rem; } /* ---------- FRS risk zones (Views/Shared/_FrsZoneScale.cshtml) ---------- */ .frs-zones { padding: 1.5rem 1.5rem 1.25rem; border-radius: var(--frs-radius-lg); background: var(--frs-surface); color: var(--frs-ink); box-shadow: var(--frs-shadow-lift); /* the one lifted surface on a page */ } .frs-on-dark .frs-zones { box-shadow: none; /* white on navy already separates */ } .frs-zones__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.125rem; } .frs-zones__head img { width: 2.5rem; height: 2.5rem; border-radius: .5rem; } .frs-zones .frs-zones__title { margin: 0; font-family: var(--frs-font-sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--frs-ink); } .frs-zones__bar { display: grid; grid-template-columns: 1fr 2fr 4fr 4fr; /* FRS 0 | 1-2 | 3-6 | 7-10 on the 0-10 scale */ gap: 3px; height: .625rem; margin-bottom: .375rem; } .frs-zones__bar span { transform-origin: left center; animation: frs-grow .9s var(--frs-ease-out) both; } .frs-zones__bar span:nth-child(2) { animation-delay: .08s; } .frs-zones__bar span:nth-child(3) { animation-delay: .16s; } .frs-zones__bar span:nth-child(4) { animation-delay: .24s; } .frs-zones__bar span:first-child { border-radius: 99px 0 0 99px; } .frs-zones__bar span:last-child { border-radius: 0 99px 99px 0; } @keyframes frs-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .frs-zones__ticks { display: grid; grid-template-columns: 1fr 2fr 4fr 4fr; gap: 3px; margin-bottom: 1rem; font-size: .8125rem; color: var(--frs-ink-muted); } .frs-zones table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9375rem; } .frs-zones thead th { padding: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-zones td, .frs-zones tbody th { padding: .5625rem 0; border-top: 1px solid var(--frs-border); vertical-align: middle; } .frs-zones tbody th { font-weight: inherit; text-align: left; } .frs-zones .frs-zones__num { text-align: right; white-space: nowrap; } .frs-zone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; } .frs-zone::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: currentColor; } .frs-zone--negligible { color: var(--frs-risk-negligible); } .frs-zone--low { color: var(--frs-risk-low); } .frs-zone--moderate { color: var(--frs-risk-moderate); } .frs-zone--high { color: var(--frs-risk-high); } .frs-fill--negligible { background: var(--frs-risk-negligible); } .frs-fill--low { background: var(--frs-risk-low); } .frs-fill--moderate { background: var(--frs-risk-moderate-solid); } .frs-fill--high { background: var(--frs-risk-high); } .frs-zones__note { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--frs-ink-muted); } /* ---------- Operate mode: the signed-in app (body.frs-app on Views/Shared/_Layout.cshtml) ---------- The AdminLTE shell keeps its structure; these rules give it the design system's voice. Component work (sidebar, tables, modals, the calculator) lands in its own slice. */ .frs-app { font-family: var(--frs-font-sans); color: var(--frs-ink); caret-color: var(--frs-ink-navy); -webkit-font-smoothing: antialiased; } .frs-app ::selection { background: var(--frs-select); color: var(--frs-ink); } .frs-app h1, .frs-app h2, .frs-app h3, .frs-app h4, .frs-app h5, .frs-app .h1, .frs-app .h2, .frs-app .h3 { font-family: var(--frs-font-sans); font-weight: 700; color: var(--frs-ink); letter-spacing: -.01em; } .frs-app a { color: var(--frs-steel); text-decoration-thickness: 1px; text-underline-offset: .2em; } .frs-app a:hover { color: var(--frs-ink-navy); } .frs-app :focus-visible { outline: 3px solid var(--frs-focus-on-light); outline-offset: 2px; } .frs-app .content-wrapper { background: var(--frs-surface-alt); } .frs-app .card { border: 1px solid var(--frs-border); border-radius: var(--frs-radius-md); box-shadow: none; } .frs-app .card-header { border-bottom-color: var(--frs-border); background: var(--frs-surface); } .frs-app .btn { border-radius: var(--frs-radius-sm); font-weight: 600; } .frs-app .btn-primary, .frs-app .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--frs-ink-navy); border-color: var(--frs-ink-navy); color: var(--frs-on-dark); } /* The label is restated: on a link styled as a button, .frs-app a:hover would turn it navy on navy. */ .frs-app .btn-primary:hover, .frs-app .btn-primary:focus { background-color: var(--frs-chart-room); border-color: var(--frs-chart-room); color: var(--frs-on-dark); } .frs-app .btn-default { background-color: var(--frs-surface); border-color: var(--frs-border-input); color: var(--frs-ink); } /* Bootstrap's link blue on white is 3.1:1 — below AA for text. */ .frs-app .btn-link { color: var(--frs-steel); } .frs-app .btn-link:hover, .frs-app .btn-link:focus { color: var(--frs-ink-navy); } .frs-app .form-control { border-color: var(--frs-border-input); border-radius: var(--frs-radius-sm); color: var(--frs-ink); } .frs-app .form-control:focus { border-color: var(--frs-steel); box-shadow: none; } .frs-app .form-control::placeholder { color: var(--frs-placeholder); opacity: 1; } /* --- Shell chrome. Widths and margins stay AdminLTE's: sidebar-mini depends on them. --- */ .frs-app .main-header.navbar { background: var(--frs-surface); border-bottom: 1px solid var(--frs-border); } .frs-app .main-header .nav-link, .frs-app .main-header .btn { display: inline-flex; align-items: center; min-height: var(--frs-target); color: var(--frs-ink); } .frs-app .main-header .nav-link:hover { color: var(--frs-ink-navy); } /* Impersonation is a state, not a risk: red is reserved for risk and errors. */ .frs-app .frs-impersonation.btn-danger { background-color: var(--frs-ink-navy); border-color: var(--frs-ink-navy); color: var(--frs-on-dark); } .frs-app .main-sidebar, .frs-app .brand-link { background: var(--frs-chart-room); } .frs-app .brand-link { display: flex; align-items: center; min-height: 4rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--frs-on-dark); font-weight: 700; letter-spacing: -.005em; } .frs-app .brand-link:hover { color: var(--frs-on-dark); } .frs-app .brand-link .brand-image { float: none; margin: 0 .625rem 0 0; border-radius: .375rem; opacity: 1; } /* Quiet menu: 44px rows (the Operate minimum), a smaller label, icons a step dimmer than their text. Hover and the current page are tints of white on the navy, never a second colour. */ .frs-app .nav-sidebar .nav-link { display: flex; align-items: center; min-height: 2.75rem; margin-bottom: 2px; padding-block: .5rem; border-radius: .375rem; color: var(--frs-on-dark-muted); font-size: .9375rem; line-height: 1.3; transition: background-color .16s ease-out, color .16s ease-out; } .frs-app .nav-sidebar .nav-link > .nav-icon { font-size: .9375rem; opacity: .75; transition: opacity .16s ease-out; } .frs-app .nav-sidebar .nav-link:hover { background: rgba(255, 255, 255, .05); color: var(--frs-on-dark); } .frs-app .nav-sidebar .nav-link:hover > .nav-icon, .frs-app .nav-sidebar .nav-link.active > .nav-icon { opacity: 1; } .frs-app .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .frs-app .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover, .frs-app [class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link.active { background: rgba(255, 255, 255, .1); color: var(--frs-on-dark); font-weight: 600; box-shadow: none; } .frs-app .main-sidebar .sidebar > nav:first-child { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .frs-app .nav-sidebar .nav-treeview .nav-link { min-height: 2.75rem; font-size: .875rem; } /* The icon column is fixed: in a flex row a two-line label squeezed it, and "Supporting Research" and "Masterclass Podcast" started up to 9px left of every other label. */ .frs-app .nav-sidebar .nav-link > .nav-icon { flex: 0 0 1.6rem; } .frs-app .nav-sidebar .nav-link > p { flex: 1 1 auto; min-width: 0; } .frs-app .nav-sidebar .has-treeview > .nav-link > p { padding-right: 1.5rem; /* room for the chevron, so a long label never runs under it */ } /* AdminLTE pins the chevron at top: .7rem, which was centred on its 40px rows, not on our 48px ones. Centred on the row instead; a square box keeps it in place when it rotates open. */ .frs-app .nav-sidebar .nav-link p > .right, .frs-app .nav-sidebar .nav-link > .right { top: 50%; width: 1em; height: 1em; margin-top: -.5em; line-height: 1; text-align: center; } /* Sub-items are indented with Bootstrap's ml-3, which is !important. In the collapsed mini sidebar that indent pushed their icons out of the 4.6rem column; there they line up with the top-level icons instead. */ .frs-app.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-treeview .nav-icon.ml-3 { margin-left: 0 !important; } .frs-app .main-sidebar :focus-visible { outline-color: var(--frs-focus-on-dark); outline-offset: -3px; } .frs-app .content-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--frs-ink); } /* site.css reserves 60px under the body for the old sticky footer; in the shell the footer sits in .wrapper, so that margin was only a blank strip and a scroll past the end of every page. */ body.frs-app { margin-bottom: 0; } .frs-app .main-footer { background: var(--frs-surface); border-top: 1px solid var(--frs-border); color: var(--frs-ink-muted); } /* The sidebar is a column: the menu scrolls, the account block stays at the foot. */ .frs-app .main-sidebar .sidebar { display: flex; flex-direction: column; padding-bottom: 0; } .frs-app .main-sidebar .sidebar > nav:first-child { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Account row. One quiet line at rest — small avatar, muted name, a chevron — so it costs one row, not three. The drawer opens above it (order: -1) so the row never moves under the pointer. */ .frs-app .frs-account { flex: 0 0 auto; display: flex; flex-direction: column; padding: .25rem 0 .5rem; /* .sidebar already insets .5rem; the rows line up with the menu's */ border-top: 1px solid rgba(255, 255, 255, .08); } .frs-app .frs-account__toggle { display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 2.75rem; padding: .375rem .5rem .375rem 1rem; /* avatar centred on the menu's icon column */ border: 0; border-radius: .375rem; background: none; color: var(--frs-on-dark-muted); font-size: .875rem; text-align: left; transition: background-color .16s ease-out, color .16s ease-out; } .frs-app .frs-account__avatar { flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; opacity: .9; } .frs-app .frs-account__name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .frs-app .frs-account__chevron { flex: 0 0 auto; font-size: .625rem; opacity: .6; transition: transform .2s var(--frs-ease-out), opacity .16s ease-out; } .frs-app .frs-account__drawer { order: -1; display: grid; grid-template-rows: 0fr; visibility: hidden; /* Closing waits a beat, so a slightly off-course pointer does not snap it shut. */ transition: grid-template-rows .2s var(--frs-ease-out) .12s, visibility 0s linear .32s; } .frs-app .frs-account__drawer > ul { min-height: 0; overflow: hidden; } .frs-app .frs-account.is-open .frs-account__drawer { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .2s var(--frs-ease-out), visibility 0s; } .frs-app .frs-account.is-open .frs-account__toggle, .frs-app .frs-account__toggle:hover { background: rgba(255, 255, 255, .05); color: var(--frs-on-dark); } .frs-app .frs-account.is-open .frs-account__chevron { transform: rotate(180deg); opacity: 1; } @media (hover: hover) { .frs-app .frs-account:hover .frs-account__drawer { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .2s var(--frs-ease-out), visibility 0s; } .frs-app .frs-account:hover .frs-account__toggle { background: rgba(255, 255, 255, .05); color: var(--frs-on-dark); } .frs-app .frs-account:hover .frs-account__chevron { transform: rotate(180deg); opacity: 1; } } /* On the profile pages the row reads as current, since its link is folded away. */ .frs-app .frs-account:has(.nav-link.active) .frs-account__toggle { color: var(--frs-on-dark); } /* Logout is a form button drawn as a menu row. */ .frs-app .frs-account button.nav-link { width: 100%; border: 0; background: none; text-align: left; } /* The rail (collapsed mini sidebar) keeps only the avatar, centred on the icon column. It widens on hover and, like AdminLTE's links, while focus is inside it (.sidebar-focused, set in site.js). */ .frs-app.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .frs-account__name, .frs-app.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .frs-account__chevron { display: none; } .frs-app.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .frs-account__toggle { justify-content: center; padding-inline: 0; } /* An open drawer stays in the layout, so focus can move through Profile and Logout even while AdminLTE narrows the rail between two of its links. */ .frs-app.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .frs-account:not(.is-open) .frs-account__drawer { display: none; } /* Below 992px the sidebar is off-canvas. Closed, it is also hidden, so Tab no longer walks a dozen links nobody can see. The drawer is named too: its open state sets visibility itself. Where motion is allowed, the change waits for the slide-out to finish; under reduced motion AdminLTE does not slide at all, so nothing here brings a transition back. */ @media (max-width: 991.98px) { .frs-app:not(.sidebar-open) .main-sidebar, .frs-app:not(.sidebar-open) .main-sidebar .frs-account__drawer { visibility: hidden; } } @media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) { .frs-app:not(.sidebar-open) .main-sidebar { transition: margin-left .3s ease-in-out, width .3s ease-in-out, visibility 0s linear .3s; } .frs-app.sidebar-open .main-sidebar { transition: margin-left .3s ease-in-out, width .3s ease-in-out, visibility 0s; } } @media (prefers-reduced-motion: reduce) { .frs-app .frs-account__toggle, .frs-app .frs-account__chevron, .frs-app .frs-account__drawer { transition: none !important; } } /* The loading bar is the only feedback the app's ajax injections give. */ .frs-app .pace .pace-progress { background: var(--frs-ink-navy); } /* --- Widgets. DataTables, modals, confirmations, toasts, checkboxes, selects and tabs are drawn by their plugins; this is where they join the design system. --- */ .frs-app .dataTables_wrapper .dataTables_filter input, .frs-app .dataTables_wrapper .dataTables_length select { min-height: 2.5rem; padding: .25rem .625rem; border: 1px solid var(--frs-border-input); border-radius: var(--frs-radius-sm); } .frs-app .dataTables_wrapper .dataTables_length select { min-width: 4.5rem; /* the plugin sizes it for two digits and clips the arrow */ padding-right: 1.75rem; } .frs-app .dataTables_wrapper .dataTables_filter input { min-width: 12rem; } .frs-app .dataTables_wrapper .dataTables_info, .frs-app .dataTables_wrapper .dataTables_length, .frs-app .dataTables_wrapper .dataTables_filter { color: var(--frs-ink-muted); font-size: .9375rem; } .frs-app table.dataTable thead th, .frs-app .table thead th { padding: .75rem; border-bottom: 1px solid var(--frs-border); background: var(--frs-surface-alt); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-app table.dataTable tbody td, .frs-app .table tbody td { padding: .75rem; /* with the 1.6 line height this lands a row just over 48px */ border-top: 1px solid var(--frs-border); vertical-align: middle; } .frs-app table.dataTable tbody tr:hover { background: var(--frs-surface-alt); } .frs-app table.dataTable tbody td.dataTables_empty { padding: 2.5rem 1rem; color: var(--frs-ink-muted); } .frs-app .page-item.active .page-link { background: var(--frs-ink-navy); border-color: var(--frs-ink-navy); } .frs-app .page-link { color: var(--frs-steel); } .frs-app .modal-content { border: 0; border-radius: var(--frs-radius-lg); box-shadow: var(--frs-shadow-lift); } .frs-app .modal-header, .frs-app .modal-footer { border-color: var(--frs-border); } .frs-app .modal-title { font-weight: 700; color: var(--frs-ink); } .frs-app .modal .close { min-width: var(--frs-target); min-height: var(--frs-target); color: var(--frs-ink-muted); text-shadow: none; opacity: 1; } .frs-app .jconfirm .jconfirm-box { border-radius: var(--frs-radius-lg); font-family: var(--frs-font-sans); box-shadow: var(--frs-shadow-lift); } .frs-app .jconfirm .jconfirm-title { font-weight: 700; color: var(--frs-ink); } /* jquery-confirm animates its box and backdrop with inline transition durations, so only !important can stop them for someone who asked for less motion (logout and delete questions). */ @media (prefers-reduced-motion: reduce) { .jconfirm, .jconfirm .jconfirm-bg, .jconfirm .jconfirm-box { transition-duration: 0s !important; animation-duration: 0s !important; } } /* The "modern" theme greys the body text below AA and shouts the buttons in capitals. */ .frs-app .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content { color: var(--frs-ink-muted); } .frs-app .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button { text-transform: none; letter-spacing: 0; } .frs-app .jconfirm .jconfirm-buttons button { min-height: 2.75rem; border-radius: var(--frs-radius-sm); font-weight: 600; text-transform: none; } .frs-app .jconfirm .jconfirm-buttons button.btn-red { background: var(--frs-risk-high); border-color: var(--frs-risk-high); color: var(--frs-on-dark); } .frs-app .jconfirm .jconfirm-buttons button.btn-default { background: var(--frs-surface); border: 1px solid var(--frs-border-input); color: var(--frs-ink); } /* Success is navy with a mark, never zone green: green means a risk zone here. */ .frs-app #toast-container > div { padding: 1rem 1.25rem 1rem 3.25rem; border-radius: var(--frs-radius-md); box-shadow: var(--frs-shadow-lift); opacity: 1; } .frs-app #toast-container > .toast-success { background-color: var(--frs-ink-navy); } .frs-app #toast-container > .toast-error { background-color: var(--frs-risk-high); } .frs-app #toast-container > .toast-info { background-color: var(--frs-steel); } .frs-app .icheck-primary > input:first-child:checked + label::before, .frs-app .icheck-primary > input:first-child:checked + input[type="hidden"] + label::before { background-color: var(--frs-ink-navy); border-color: var(--frs-ink-navy); } .frs-app .icheck-primary > label { min-height: 1.75rem; color: var(--frs-ink); } .frs-app .select2-container--bootstrap4 .select2-selection { min-height: 2.75rem; border-color: var(--frs-border-input); border-radius: var(--frs-radius-sm); } .frs-app .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { background: var(--frs-navy-tint); border-color: var(--frs-navy-tint); color: var(--frs-ink-navy); } .frs-app .nav-tabs { border-bottom-color: var(--frs-border); } .frs-app .nav-tabs .nav-link { min-height: var(--frs-target); display: inline-flex; align-items: center; border: 0; border-bottom: 2px solid transparent; color: var(--frs-ink-muted); font-weight: 600; } .frs-app .nav-tabs .nav-link:hover { border-bottom-color: var(--frs-border-input); color: var(--frs-ink); } .frs-app .nav-tabs .nav-link.active { border-bottom-color: var(--frs-ink-navy); color: var(--frs-ink-navy); background: transparent; } /* --- Audit fixes: touch targets, embeds, and the case-log report buttons --- */ .frs-app .form-control, .frs-app .custom-select { min-height: 2.75rem; /* the theme shipped 38px controls; 44px is the floor for touch */ } .frs-app .btn:not(.btn-flat):not(.close) { min-height: 2.75rem; } .frs-app .btn-sm, .frs-app .btn-group-sm > .btn { min-height: 2.25rem; } .frs-app .page-link { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; } /* The three case-log reports: one segmented control, not three free-floating buttons. They are views of the log, not a success state: green belongs to the risk scale. */ .frs-caselog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } .frs-caselog-bar::after { content: none; /* .card-header's clearfix would sit in the flex row as an extra item */ } .frs-app .frs-caselog-bar__user { flex: 1 1 100%; /* the administrator's user picker takes its own row above the reports */ min-width: 0; } .frs-segmented { display: flex; flex: 1 1 32rem; min-width: 0; border: 1px solid var(--frs-border-input); border-radius: var(--frs-radius-sm); background: var(--frs-surface); overflow: hidden; } .frs-app .frs-segmented__item { flex: 1 1 0; min-width: 0; min-height: var(--frs-target); padding: .5rem .875rem; border: 0; border-radius: 0; background: transparent; color: var(--frs-ink-navy); font-weight: 600; line-height: 1.3; white-space: normal; } /* Outranks the 44px floor on .btn (.frs-app .btn:not(.btn-flat):not(.close)): a segment is 48px. */ .frs-app .frs-segmented .btn.frs-segmented__item:not(.btn-flat) { min-height: var(--frs-target); } /* Each report button says what the report holds, under its name. */ .frs-segmented__title, .frs-segmented__sub { display: block; } .frs-app .frs-segmented__sub { margin-top: .125rem; font-size: .8125rem; font-weight: 400; color: var(--frs-ink-muted); } .frs-app .frs-segmented__item + .frs-segmented__item { border-left: 1px solid var(--frs-border-input); } .frs-app .frs-segmented__item:hover:not(:disabled) { background: var(--frs-navy-tint); color: var(--frs-ink-navy); } .frs-app .frs-segmented__item:focus { box-shadow: none; } .frs-app .frs-segmented__item:focus-visible { outline: 3px solid var(--frs-focus-on-light); outline-offset: -3px; } .frs-app .frs-segmented__item:disabled { color: var(--frs-ink-muted); opacity: .65; } @media (max-width: 575.98px) { .frs-segmented { flex-direction: column; } .frs-app .frs-segmented__item { flex: 0 0 auto; } .frs-app .frs-segmented__item + .frs-segmented__item { border-left: 0; border-top: 1px solid var(--frs-border-input); } .frs-app .frs-caselog-bar__user { flex-basis: 100%; } } /* Video tutorials: titled players in a grid with a definite width, so each 16:9 box has something to be a share of. Two columns from about 57rem of content, one below. */ .frs-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 2rem 2.5rem; max-width: 64rem; padding: .5rem 0 3rem; } .frs-app .frs-videos__title { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--frs-ink); } /* 16:9 embeds instead of a fixed 480px box that overflowed every phone. */ .frs-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--frs-radius-md); overflow: hidden; background: var(--frs-ink); } .frs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Links inside data tables are targets, not running text. */ .frs-app table.dataTable tbody td a, .frs-app .table tbody td a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; /* WCAG 2.2 target size: 24px is the floor, 44px the comfortable one */ min-height: 2.75rem; padding: 0 .5rem; font-weight: 600; } .frs-app .dataTables_wrapper .dataTables_length select, .frs-app .dataTables_wrapper .dataTables_filter input { min-height: 2.75rem; } .frs-app .close, .frs-app #toast-container .toast-close-button { min-width: 2.75rem; min-height: 2.75rem; } /* AdminLTE's pill blue fails contrast with white text. */ .frs-app .nav-pills .nav-link.active { background-color: var(--frs-ink-navy); color: var(--frs-on-dark); } /* The account settings pills: Bootstrap's padding puts them at ~40px, under the Operate floor. Scoped to the card so the sidebar's own pills keep their sizing. */ .frs-app .card .nav-pills.flex-column .nav-link { display: flex; align-items: center; min-height: var(--frs-target); } /* Username and current email are permanently not editable here. They are readonly rather than disabled, so they stay focusable and announce as read-only; this keeps the muted surface that told a sighted user the same thing. */ .frs-app .form-control[readonly] { background-color: var(--frs-surface-alt); color: var(--frs-ink); } .frs-app .btn .frs-busy { margin-right: .5rem; } .frs-instructions { max-width: 70ch; margin: 0 auto 1.5rem; color: var(--frs-ink-muted); } /* --- Case-log modals (Views/History/Modal/*). One skin for the reports, the case editor and the delete confirmation. Util.showModal injects them into #viewModals_modalBody, itself a .modal-body, so the host loses its padding and the modal's own header and footer stay pinned while the body scrolls. --- */ .frs-app #viewModals_modalBody:has(> .frs-modal) { padding: 0; } .frs-modal .modal-header, .frs-modal .modal-footer { position: sticky; z-index: 2; background: var(--frs-surface); } .frs-modal .modal-header { top: 0; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem 1rem; } .frs-app .frs-modal .modal-title { margin: 0; font-size: 1.25rem; line-height: 1.3; text-wrap: balance; } .frs-app .frs-modal .close { margin: -.625rem -.75rem -.625rem auto; padding: 0; font-size: 1.75rem; line-height: 1; } .frs-modal .modal-body { padding: 1.25rem 1.5rem; } .frs-modal .modal-footer { bottom: 0; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.5rem; } .frs-modal .modal-footer > * { margin: 0; } /* Delete sits apart from the two buttons that keep the case. */ .frs-modal .frs-modal__destructive { margin-right: auto; } .frs-modal--confirm .modal-header { padding-bottom: .5rem; border-bottom: 0; } .frs-app .frs-modal--confirm .modal-title { font-size: 1.125rem; font-weight: 600; } .frs-modal--confirm .modal-footer { border-top: 0; } /* Report context: what the figures mean, and a plain notice when there is nothing to count yet. */ .frs-app .frs-report__intro { max-width: 62ch; margin: 0 0 1rem; font-size: .9375rem; color: var(--frs-ink-muted); } .frs-app .frs-report__notice { display: flex; gap: .625rem; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--frs-radius-sm); background: var(--frs-navy-tint); color: var(--frs-ink-navy); font-size: .9375rem; } .frs-report__notice .fas { margin-top: .2rem; } /* A zone row in the cumulative report carries the zone's dot beside its label. */ .frs-report__zone { margin-right: .375rem; vertical-align: middle; } .frs-app .frs-report--zones .frs-report__ref { color: var(--frs-ink-muted); } .frs-app .frs-report--zones thead th { white-space: nowrap; } /* Four columns on a phone: headers may wrap, cells tighten, so the table fits without a sideways scroll. */ @media (max-width: 575.98px) { .frs-app .frs-report--zones thead th { white-space: normal; vertical-align: bottom; } .frs-app .frs-report--zones th, .frs-app .frs-report--zones td { padding-left: .25rem; padding-right: .25rem; } .frs-app .frs-report--zones td.frs-report__value { font-size: .875rem; } .frs-app .frs-report--zones th:last-child, .frs-app .frs-report--zones td:last-child { display: none; } .frs-app .frs-report--zones .frs-report__ref-inline { display: block; } } .frs-report__ref-inline { display: none; margin-top: .125rem; font-family: var(--frs-font-sans); font-size: .75rem; color: var(--frs-ink-muted); white-space: nowrap; } /* Reports: a label column and right-aligned figures in tabular mono. */ .frs-app .frs-report { margin: 0; } .frs-app .frs-report tbody th { padding: .75rem .75rem .75rem 0; border-top: 1px solid var(--frs-border); font-weight: 400; color: var(--frs-ink); vertical-align: middle; } .frs-app .frs-report tbody td { padding-right: 0; } .frs-app .frs-report thead th { padding-left: 0; } .frs-app .frs-report thead th:last-child { padding-right: 0; } .frs-app .frs-report tbody tr:first-child > * { border-top: 0; } .frs-app .frs-report .frs-report__value { width: 1%; text-align: right; white-space: nowrap; } .frs-report__note { display: block; font-size: .875rem; color: var(--frs-ink-muted); } .frs-app .frs-report .frs-report__sub th { padding-left: 1.5rem; } .frs-app .frs-report .frs-report__group th { padding-top: 1.25rem; font-weight: 700; color: var(--frs-ink-navy); } /* Case editor: date and outcome, then the seven strategies as labelled groups. */ .frs-modal__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--frs-border); } .frs-app .frs-modal__field > label, .frs-modal__label { display: block; margin: 0 0 .375rem; font-size: .875rem; font-weight: 600; color: var(--frs-ink); } .frs-modal__outcome { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .25rem .25rem .25rem .75rem; border: 1px solid var(--frs-border); border-radius: var(--frs-radius-sm); background: var(--frs-surface-alt); } .frs-modal__status { font-weight: 600; color: var(--frs-ink-navy); } .frs-app .frs-modal__outcome .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .375rem; background: var(--frs-surface); } .frs-app .frs-modal__section { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--frs-ink); } .frs-modal__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; } .frs-modal__group { min-width: 0; margin: 0; padding: 0; border: 0; } .frs-app .frs-modal__legend { width: auto; margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--frs-ink); } .frs-modal__options { display: flex; flex-wrap: wrap; gap: .5rem; } .frs-modal .frs-choice { flex: 1 1 0; justify-content: center; width: auto; min-width: max-content; } /* The case editor carries context and a description per strategy: it gets a wider dialog, and the strategies go one per row so each description reads as a sentence, not a squeezed caption. */ .frs-app .modal-dialog:has(.frs-case, .frs-mit__intro) { max-width: 44rem; } .frs-modal .frs-case__subtitle { margin: .125rem 0 0; font-size: .875rem; color: var(--frs-ink-muted); } /* The case this row records: FRS and zone, the four elements, the expected rates. */ .frs-case { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--frs-border); border-radius: var(--frs-radius-md); background: var(--frs-surface-alt); } .frs-case__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; } .frs-app .frs-case__title { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-case__score { display: flex; align-items: center; gap: .625rem; margin: 0; } .frs-case__score-label { font-weight: 600; color: var(--frs-ink-muted); } .frs-case__score-value { font-size: 1.5rem; line-height: 1; color: var(--frs-ink-navy); } .frs-case__factors, .frs-case__rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; margin: 0; } .frs-case__factors dt, .frs-case__rates dt { font-size: .8125rem; font-weight: 600; color: var(--frs-ink-muted); } .frs-case__factors dd, .frs-case__rates dd { margin: 0; color: var(--frs-ink); } .frs-case__points { margin-left: .25rem; color: var(--frs-ink-muted); font-size: .875rem; } .frs-app .frs-case__rates-title { margin: 1rem 0 .5rem; padding-top: .75rem; border-top: 1px solid var(--frs-border); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-case__rates dd { font-size: 1.0625rem; color: var(--frs-ink-navy); } /* Strategies: heading with the live count, a line on what they are for, then one strategy per row. */ .frs-mit__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; } .frs-mit__head .frs-modal__section { margin-bottom: .25rem; } .frs-app .frs-mit__count { margin: 0; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--frs-ink-muted); white-space: nowrap; } .frs-app .frs-mit__intro { max-width: 62ch; margin: 0 0 1rem; font-size: .9375rem; color: var(--frs-ink-muted); } .frs-modal:has(.frs-mit__intro) .frs-modal__groups { grid-template-columns: 1fr; gap: 0; } .frs-modal:has(.frs-mit__intro) .frs-modal__group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); grid-template-rows: auto 1fr; /* the description follows the name; the options take the height */ gap: .25rem 1.5rem; align-items: start; padding: .875rem 0; border-top: 1px solid var(--frs-border); } .frs-modal:has(.frs-mit__intro) .frs-modal__legend { grid-column: 1; float: left; /* lets the legend sit in the grid like any other child */ margin: 0; } .frs-app .frs-mit__desc { grid-column: 1; margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--frs-ink-muted); } .frs-modal:has(.frs-mit__intro) .frs-modal__options { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .frs-choice__text { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; } .frs-choice__text small { margin-top: .125rem; font-size: .6875rem; font-weight: 400; color: var(--frs-ink-muted); } .frs-app .frs-mit__hint { margin: .75rem 0 0; font-size: .875rem; color: var(--frs-ink-muted); } @media (max-width: 575.98px) { .frs-case__factors, .frs-case__rates { grid-template-columns: 1fr; } .frs-modal:has(.frs-mit__intro) .frs-modal__group { grid-template-columns: 1fr; } .frs-modal:has(.frs-mit__intro) .frs-modal__options { grid-column: 1; grid-row: auto; margin-top: .5rem; } } /* CR-POPF questionnaire: the derived grade, the rule, then the numbered questions the rule cites. */ .frs-grade { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--frs-radius-md); background: var(--frs-surface-alt); list-style: none; } .frs-grade__item { display: inline-flex; align-items: center; gap: .375rem; color: var(--frs-ink-muted); } .frs-grade__item.is-current { color: var(--frs-ink-navy); font-weight: 700; } .frs-app .frs-modal__note { max-width: 62ch; margin: 0 0 .5rem; font-size: .875rem; color: var(--frs-ink-muted); } .frs-app .frs-checklist__group { margin: 1.25rem 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-checklist { margin: .5rem 0 0; padding-left: 1.75rem; } .frs-checklist > li { border-top: 1px solid var(--frs-border); } .frs-checklist > li::marker { font-family: var(--frs-font-mono); font-size: .875rem; color: var(--frs-ink-muted); } .frs-app .frs-checklist__item { display: flex; align-items: flex-start; gap: .75rem; min-height: 2.75rem; margin: 0; padding: .625rem 0; font-weight: 400; color: var(--frs-ink); cursor: pointer; } .frs-checklist__input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: .2rem 0 0; accent-color: var(--frs-ink-navy); } @media (max-width: 575.98px) { .frs-modal .modal-header, .frs-modal .modal-body, .frs-modal .modal-footer { padding-left: 1rem; padding-right: 1rem; } .frs-modal__summary, .frs-modal__groups { grid-template-columns: minmax(0, 1fr); } .frs-modal .modal-footer .btn { flex: 1 1 auto; } /* On a phone Delete takes its own row, last and away from Update. */ .frs-modal .modal-footer .frs-modal__destructive { flex-basis: 100%; order: 3; margin-right: 0; } } /* --- Account (Areas/Identity/Pages/Account/Manage). Whose account it is, then the same top tabs as Configurations (.frs-admin), then one line on what the open tab is for. --- */ .frs-manage__who { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.25rem 1rem; } .frs-manage__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--frs-ink-navy); color: var(--frs-on-dark); font-weight: 700; letter-spacing: .02em; } .frs-manage__id { min-width: 0; } .frs-app .frs-manage__name { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--frs-ink); overflow-wrap: anywhere; } .frs-app .frs-manage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin: .25rem 0 0; font-size: .9375rem; color: var(--frs-ink-muted); overflow-wrap: anywhere; } /* Confirmed is navy, not green: green names a risk zone here. */ .frs-manage__badge { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .625rem; border: 1px solid var(--frs-border); border-radius: 999px; background: var(--frs-surface-alt); color: var(--frs-ink); font-size: .8125rem; font-weight: 600; } .frs-manage__badge.is-confirmed { border-color: var(--frs-navy-tint); background: var(--frs-navy-tint); color: var(--frs-ink-navy); } .frs-app .frs-manage__hint { max-width: 62ch; margin: 0 0 1.25rem; color: var(--frs-ink-muted); } .frs-app .frs-manage__confirmed { background: var(--frs-navy-tint); color: var(--frs-ink-navy); } @media (max-width: 575.98px) { .frs-manage__who { padding: 1rem 1rem .75rem; } } /* --- User picker (Views/Shared/_UserPicker.cshtml): the administrator chooses whose calculator or case log this is. Search, sort, a list with the registration date, then one "Selected" row. --- */ .frs-picker__controls { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; } .frs-picker__field { flex: 0 1 14rem; min-width: 0; } .frs-picker__field--search { flex: 1 1 20rem; } .frs-app .frs-picker__field > label { display: block; margin: 0 0 .375rem; font-size: .875rem; font-weight: 600; color: var(--frs-ink); } .frs-app .frs-picker__field .form-control { font-size: 1rem; /* 16px: iOS zooms into anything smaller */ } .frs-app .frs-picker__count { margin: .75rem 0 .5rem; font-family: var(--frs-font-mono); font-size: .8125rem; color: var(--frs-ink-muted); } .frs-picker__list { max-height: 18rem; margin: 0; padding: 0; overflow-y: auto; border: 1px solid var(--frs-border); border-radius: var(--frs-radius-sm); list-style: none; overscroll-behavior: contain; } .frs-picker__list > li + li { border-top: 1px solid var(--frs-border); } .frs-picker__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: var(--frs-target); padding: .5rem .875rem; border: 0; background: var(--frs-surface); color: var(--frs-ink); text-align: left; cursor: pointer; } .frs-picker__item:hover { background: var(--frs-navy-tint); } .frs-picker__item:focus-visible { outline: 3px solid var(--frs-focus-on-light); outline-offset: -3px; } .frs-picker__item[aria-pressed="true"] { background: var(--frs-navy-tint); box-shadow: inset 3px 0 0 var(--frs-ink-navy); } .frs-picker__who { display: flex; flex-direction: column; min-width: 0; } .frs-picker__name { font-weight: 600; overflow-wrap: anywhere; } .frs-picker__email { font-size: .875rem; color: var(--frs-ink-muted); overflow-wrap: anywhere; } .frs-picker__date { flex: 0 0 auto; font-size: .8125rem; color: var(--frs-ink-muted); white-space: nowrap; } .frs-app .frs-picker__empty { margin: .75rem 0 0; color: var(--frs-ink-muted); } .frs-picker__summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-height: var(--frs-target); } .frs-picker__summary[hidden], .frs-picker__panel[hidden] { display: none; } .frs-picker__summary-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-picker__summary-who { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; min-width: 0; overflow-wrap: anywhere; } .frs-picker__summary-email { font-size: .875rem; color: var(--frs-ink-muted); } .frs-app .frs-picker__change { margin-left: auto; } @media (max-width: 575.98px) { .frs-picker__field { flex-basis: 100%; } .frs-picker__item { flex-direction: column; align-items: flex-start; gap: .125rem; } } /* Literature index: categories as headings, documents as a list — the red banners are gone. */ .frs-readlist { max-width: 52rem; margin: 0 auto; } .frs-readlist__group + .frs-readlist__group { margin-top: 2.5rem; } .frs-app .frs-readlist__title { margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--frs-border); font-size: 1.125rem; font-weight: 700; color: var(--frs-ink); } .frs-readlist__items { margin: 0; padding: 0; list-style: none; } .frs-readlist__items li + li { border-top: 1px solid var(--frs-border); } .frs-app .frs-readlist__items a { display: flex; align-items: center; min-height: 3rem; padding: .5rem .25rem; color: var(--frs-steel); font-weight: 600; } .frs-app .frs-readlist__items a:hover { color: var(--frs-ink-navy); text-decoration: underline; } /* --- Literature index (Views/Home/3.cshtml). One left edge with the page title, a lead, a filter, then each category as a heading with its count and its topics numbered across the page: two columns of rows on wide screens, an editorial list, not cards. --- */ .frs-lit { max-width: 64rem; padding: .5rem 0 2rem; } .frs-app .frs-lit__lead { max-width: 65ch; margin: 0 0 1.5rem; color: var(--frs-ink-muted); } .frs-lit__filter { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 2rem; } .frs-app .frs-lit__filter .form-control { flex: 0 1 26rem; min-width: 0; padding-left: 2.5rem; font-size: 1rem; } .frs-lit__filter-icon { position: absolute; left: .875rem; top: 1.375rem; transform: translateY(-50%); color: var(--frs-ink-muted); pointer-events: none; } .frs-app .frs-lit__count { margin: 0; font-variant-numeric: tabular-nums; /* a count, not a clinical number: sans, not the data face */ font-size: .875rem; color: var(--frs-ink-muted); } .frs-lit__group[hidden], .frs-lit__item[hidden] { display: none; } .frs-lit__group + .frs-lit__group { margin-top: 2.5rem; } .frs-app .frs-lit__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; padding-bottom: .625rem; border-bottom: 2px solid var(--frs-ink-navy); font-size: 1.125rem; font-weight: 700; color: var(--frs-ink-navy); } .frs-lit__group-count { font-size: .8125rem; font-weight: 400; color: var(--frs-ink-muted); } .frs-lit__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; margin: 0; padding: 0; list-style: none; } .frs-lit__item { border-bottom: 1px solid var(--frs-border); } .frs-app .frs-lit__link { display: flex; align-items: center; gap: .875rem; min-height: var(--frs-target); padding: .625rem .5rem; color: var(--frs-ink); font-weight: 600; text-decoration: none; } .frs-app .frs-lit__link:hover { background: var(--frs-navy-tint); color: var(--frs-ink-navy); } .frs-app .frs-lit__link:focus-visible { outline: 3px solid var(--frs-focus-on-light); outline-offset: -3px; } .frs-lit__num { flex: 0 0 auto; min-width: 1.25rem; font-variant-numeric: tabular-nums; font-size: .8125rem; color: var(--frs-ink-muted); } .frs-lit__name { flex: 1 1 auto; min-width: 0; } .frs-lit__go { flex: 0 0 auto; font-size: .75rem; color: var(--frs-steel); transition: transform .15s var(--frs-ease-out); } .frs-lit__link:hover .frs-lit__go { transform: translateX(3px); } .frs-app .frs-lit__none { margin: 1rem 0 0; color: var(--frs-ink-muted); } @media (max-width: 767.98px) { .frs-lit__items { grid-template-columns: minmax(0, 1fr); } .frs-app .frs-lit__filter .form-control { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .frs-lit__go { transition: none; } } /* Reading layout (.frs-read) — Considerations first; Authors and the BorderView pages can join it. The text holds a 68ch measure at a comfortable 1.0625rem; sections are split by a hairline, not boxed. On wide screens a sticky rail carries the contents and the one note; flat, per the Single Lift Rule — the note is a Navy Tint block with no border and no shadow. */ .frs-read { display: grid; grid-template-columns: minmax(0, 68ch) minmax(14rem, 18rem); gap: 3.5rem; align-items: start; max-width: 72rem; padding: .5rem 0 3rem; } .frs-app .frs-read__body { font-size: 1.0625rem; line-height: 1.7; color: var(--frs-ink); } .frs-app .frs-read__body p { margin: 0 0 1.125rem; } .frs-app .frs-read__body p:last-child { margin-bottom: 0; } .frs-read__section { scroll-margin-top: 1.5rem; } .frs-read__section + .frs-read__section { margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid var(--frs-border); } .frs-app .frs-read__title { margin: 0 0 1rem; font-size: 1.3125rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--frs-ink-navy); } /* The clinical-use paragraph is the disclaimer itself; it reads a step larger than the rest. */ .frs-app .frs-read__lead { font-size: 1.1875rem; line-height: 1.65; } .frs-read__rail { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .frs-app .frs-read__contents-title { margin: 0 0 .5rem; font-size: .875rem; font-weight: 700; color: var(--frs-ink-muted); } .frs-read__contents ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--frs-border); } .frs-app .frs-read__contents a { display: flex; align-items: center; min-height: 2.75rem; padding: .375rem 0 .375rem 1rem; color: var(--frs-ink-muted); font-size: .9375rem; line-height: 1.35; text-decoration: none; transition: color .16s ease-out; } .frs-app .frs-read__contents a:hover { color: var(--frs-ink-navy); } .frs-app .frs-read__contents a[aria-current] { color: var(--frs-ink-navy); font-weight: 600; } .frs-app .frs-read__note { display: flex; gap: .75rem; align-items: baseline; margin: 0; padding: 1rem 1.125rem; border-radius: var(--frs-radius-md); background: var(--frs-navy-tint); color: var(--frs-ink); font-size: .9375rem; line-height: 1.55; } .frs-read__note .fas { flex: 0 0 auto; color: var(--frs-ink-navy); } @media (max-width: 991.98px) { .frs-read { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: 68ch; } /* Two sections do not need a contents list on a phone; the note closes the page. */ .frs-read__rail { position: static; } .frs-read__contents { display: none; } } @media (max-width: 575.98px) { .frs-app .frs-read__lead { font-size: 1.0625rem; line-height: 1.7; } .frs-read__section + .frs-read__section { margin-top: 2rem; padding-top: 1.75rem; } } @media (prefers-reduced-motion: no-preference) { html:has(.frs-read) { scroll-behavior: smooth; } } /* Podcast (Views/Home/5). One panel per episode: navy cover beside the heading, the pitch, the player in the page, the source as a secondary action. The panel is the page's one lift surface; the cover is the one dark surface, and casts nothing. */ .frs-podcast { display: flex; flex-direction: column; gap: 1.5rem; max-width: 52rem; padding: .5rem 0 3rem; } .frs-podcast__episode { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); grid-template-areas: "cover head" "player player" "actions actions"; gap: 1.5rem 1.75rem; padding: 2rem; border-radius: var(--frs-radius-lg); background: var(--frs-surface); box-shadow: var(--frs-shadow-lift); } .frs-podcast__cover { grid-area: cover; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--frs-radius-md); background: var(--frs-chart-room); color: var(--frs-on-dark-muted); font-size: 3rem; } .frs-podcast__head { grid-area: head; align-self: center; } .frs-app .frs-podcast__title { margin: 0; font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--frs-ink-navy); } .frs-app .frs-podcast__title::first-letter { text-transform: uppercase; } .frs-app .frs-podcast__series { margin: .375rem 0 0; font-size: .9375rem; font-weight: 600; color: var(--frs-ink-muted); } .frs-app .frs-podcast__pitch { max-width: 52ch; margin: .875rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--frs-ink); } .frs-podcast__player { grid-area: player; overflow: hidden; border: 1px solid var(--frs-border); border-radius: var(--frs-radius-md); } .frs-podcast__player iframe { display: block; width: 100%; height: 166px; /* SoundCloud's classic player height */ border: 0; } .frs-podcast__player--video iframe { height: auto; aspect-ratio: 16 / 9; } .frs-podcast__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: .75rem; } .frs-app .frs-podcast__actions .btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding-inline: 1.125rem; } .frs-podcast__ext { font-size: .75em; opacity: .7; } @media (max-width: 575.98px) { .frs-podcast__episode { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem 1rem; padding: 1.25rem; } .frs-podcast__cover { align-self: start; font-size: 1.75rem; } .frs-app .frs-podcast__title { font-size: 1.25rem; } .frs-app .frs-podcast__pitch { font-size: 1rem; } } /* Result page blocks (Components/RiskView) — hoisted out of the component, which emitted them once per render, four times per result page. */ .frs-app .text-centered { padding: 1.25rem; margin: 0; text-align: center; } .frs-app .texty { background-color: var(--frs-surface-alt); color: var(--frs-ink-muted); } /* site.css lays the three risk panels out as a non-wrapping flex row with fixed 30px side margins, so a saved case opened on a phone ran 510px off the screen. */ .frs-app .divelementscenter { flex-wrap: wrap; gap: 1.5rem; margin: 0; justify-content: center; } .frs-app .divelementscenter > * { flex: 1 1 18rem; min-width: 0; max-width: 100%; } .frs-app input[type="file"] { max-width: 100%; /* the browser default is wider than a phone */ } /* --------------------------------------------------------------------------- The result screen Leads with the outcome. Replaces four stacked tables framed in 1px solid #000 and a literature list rendered as red banners on red-bordered cards. --------------------------------------------------------------------------- */ .frs-result { max-width: 64rem; /* three risk panels across, and one left edge for everything */ margin: 0 auto; padding: 1.5rem 0 0; } .frs-result .frs-instructions { margin-left: 0; margin-right: 0; } .frs-app .frs-result__title { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 600; color: var(--frs-ink-navy); } .frs-result__case, .frs-result__reading { max-width: 46rem; margin: 2.5rem 0 0; } .frs-app .frs-result__scenario { margin: 0 0 1rem; color: var(--frs-ink-muted); } .frs-app .frs-result__factors { width: 100%; border-collapse: collapse; } .frs-app .frs-result__factors th, .frs-app .frs-result__factors td { padding: .75rem .5rem; border-bottom: 1px solid var(--frs-border); text-align: left; vertical-align: baseline; } .frs-app .frs-result__factors thead th { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--frs-ink-muted); } .frs-app .frs-result__factors tbody th { font-weight: 600; color: var(--frs-ink); } .frs-app .frs-result__factors tfoot th, .frs-app .frs-result__factors tfoot td { border-top: 2px solid var(--frs-ink-navy); border-bottom: 0; font-weight: 600; color: var(--frs-ink-navy); } .frs-result__num { text-align: right; white-space: nowrap; } /* The chosen option, under the element it belongs to. */ .frs-app .frs-result__choice { display: block; font-weight: 400; font-style: italic; color: var(--frs-steel); } .frs-app .frs-panel__title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 600; color: var(--frs-ink-navy); } .frs-result__reading .frs-readlist { margin: 0; } /* Save stays in reach: pinned to the bottom of the screen while the result scrolls, resting at the end of it. The one page action, so it gets the page's only bar. */ /* The sticky Save bar must not cover the link that has focus. */ html:has(.frs-result__actions) { scroll-padding-bottom: 9rem; } .frs-result__actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: 2.5rem 0 0; padding: .875rem 1.25rem; border-top: 1px solid var(--frs-border); background: var(--frs-surface); } .frs-app .frs-result__actions-hint { flex: 1 1 20rem; max-width: 60ch; margin: 0; font-size: .9375rem; color: var(--frs-ink-muted); } .frs-app .frs-result__actions .btn { display: inline-flex; align-items: center; min-height: var(--frs-target); padding-left: 2rem; padding-right: 2rem; } /* Which elements carry the score: contributing rows in ink with their share of the total, elements that add nothing muted. */ .frs-app .frs-result__summary { max-width: 62ch; margin: -.5rem 0 1rem; color: var(--frs-ink); } .frs-app .frs-result__factors tbody tr.is-zero th, .frs-app .frs-result__factors tbody tr.is-zero .frs-num { color: var(--frs-ink-muted); font-weight: 400; } .frs-app .frs-result__factors tbody tr.is-contributing .frs-num { font-weight: 700; color: var(--frs-ink-navy); } /* The share of the total sits on the number's line, so the eye reads "4 ████" as one fact. */ .frs-result__share { display: inline-block; width: 6rem; height: .375rem; margin: 0 0 0 .75rem; vertical-align: middle; border-radius: 999px; background: var(--frs-border); overflow: hidden; } .frs-result__share > span { display: block; height: 100%; background: var(--frs-ink-navy); } /* Expected outcomes: one table, zone / FRS / scenario side by side on one scale per row, and the scenario read against its zone. Above the zone is marked in navy with an arrow, never in zone red: red names the High zone and nothing else (The Verbatim Risk Rule). */ .frs-outcomes { margin: 2.5rem 0 0; } .frs-app .frs-outcomes__lead { max-width: 65ch; margin: 0 0 1rem; color: var(--frs-ink-muted); } .frs-app .frs-outcomes__summary { display: flex; gap: .625rem; align-items: baseline; max-width: 70ch; margin: 0 0 1.25rem; padding: .75rem 1rem; border-radius: var(--frs-radius-md); background: var(--frs-surface-alt); color: var(--frs-ink); } .frs-app .frs-outcomes__summary.is-higher { background: var(--frs-navy-tint); color: var(--frs-ink-navy); font-weight: 600; } .frs-app .frs-outcomes__table { width: 100%; border-collapse: collapse; background: var(--frs-surface); } .frs-app .frs-outcomes__table th, .frs-app .frs-outcomes__table td { padding: .75rem; border-bottom: 1px solid var(--frs-border); vertical-align: middle; } .frs-app .frs-outcomes__table thead th { vertical-align: bottom; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-outcomes__group, .frs-outcomes__cell { width: 17%; text-align: right; } .frs-outcomes__group-title { display: block; } .frs-app .frs-outcomes__group-id { display: block; margin-top: .25rem; font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--frs-ink); } .frs-app .frs-outcomes__table tbody th { font-weight: 600; color: var(--frs-ink); text-align: left; } .frs-app .frs-outcomes__table tr.is-context th, .frs-app .frs-outcomes__table tr.is-context .frs-num { font-weight: 400; color: var(--frs-ink-muted); } .frs-outcomes__bar { display: block; height: .375rem; margin: .375rem 0 0 auto; border-radius: 999px; background: var(--frs-surface-alt); overflow: hidden; } .frs-outcomes__bar > span { display: block; height: 100%; margin-left: auto; } /* Broadest group lightest, this exact combination darkest. */ .frs-outcomes__cell--0 .frs-outcomes__bar > span { background: var(--frs-border-input); } .frs-outcomes__cell--1 .frs-outcomes__bar > span { background: var(--frs-steel); } .frs-outcomes__cell--2 .frs-outcomes__bar > span { background: var(--frs-ink-navy); } .frs-app .frs-outcomes__delta { width: 18%; font-size: .875rem; color: var(--frs-ink-muted); white-space: nowrap; } .frs-outcomes__tag { display: inline-flex; align-items: center; gap: .375rem; } .frs-app .frs-outcomes__table tr.is-higher { background: var(--frs-navy-tint); } .frs-app .frs-outcomes__table tr.is-higher th, .frs-app .frs-outcomes__table tr.is-higher .frs-outcomes__cell--2 .frs-num, .frs-app .frs-outcomes__table tr.is-higher .frs-outcomes__delta { font-weight: 700; color: var(--frs-ink-navy); } .frs-outcomes__fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; margin: 2.5rem 0 0; } .frs-app .frs-outcomes__fallback caption { caption-side: top; font-weight: 600; color: var(--frs-ink-navy); } /* Suggested care: the published recommendation for this scenario, label and answer. */ .frs-care { max-width: 46rem; margin: 2.5rem 0 0; } .frs-app .frs-care__table { width: 100%; border-collapse: collapse; } .frs-app .frs-care__table th, .frs-app .frs-care__table td { padding: .75rem .5rem; border-bottom: 1px solid var(--frs-border); text-align: left; } .frs-app .frs-care__table thead th { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-app .frs-care__table thead th:last-child, .frs-app .frs-care__table td { width: 30%; text-align: right; } .frs-app .frs-care__table tbody th { font-weight: 400; color: var(--frs-ink); } .frs-app .frs-care__table td { font-weight: 700; color: var(--frs-ink-navy); } /* A phone gets each outcome as a block: its name, then the three groups in a row, then the delta. */ @media (max-width: 767.98px) { .frs-app .frs-outcomes__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .frs-app .frs-outcomes__table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem .75rem; padding: .75rem; border-bottom: 1px solid var(--frs-border); } .frs-app .frs-outcomes__table tbody th, .frs-app .frs-outcomes__table tbody td { width: auto; padding: 0; border: 0; } .frs-app .frs-outcomes__table tbody th, .frs-app .frs-outcomes__table .frs-outcomes__delta { grid-column: 1 / -1; } .frs-app .frs-outcomes__table .frs-outcomes__delta { white-space: normal; } .frs-app .frs-outcomes__cell { text-align: left; } .frs-app .frs-outcomes__cell::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--frs-ink-muted); } .frs-outcomes__bar, .frs-outcomes__bar > span { margin-left: 0; } .frs-app .frs-result__actions { padding: .75rem 1rem; } .frs-app .frs-result__actions .btn { flex: 1 1 100%; justify-content: center; } } /* The case's own position on the shared zone scale. */ .frs-zones__current { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin: 0 0 1rem; } .frs-zones__current-label { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--frs-ink-muted); } .frs-zones__current-total { font-size: 1.75rem; line-height: 1; color: var(--frs-ink-navy); } .frs-zones__bar span.is-active { outline: 3px solid var(--frs-ink-navy); outline-offset: 2px; border-radius: 2px; } .frs-zones tr.is-active { background: var(--frs-navy-tint); } .frs-zones tr.is-active th, .frs-zones tr.is-active td { font-weight: 600; } /* --------------------------------------------------------------------------- The calculator Four FRS elements as radio groups. Replaces an accordion whose panels were #343a40 and whose options were #d32f2f - red belongs to risk, not to a menu. --------------------------------------------------------------------------- */ .frs-calc { max-width: 46rem; } .frs-app .frs-calc__groups { margin: 0; padding: 0; list-style: none; counter-reset: frs-step; } .frs-calc__group { padding: 1.25rem 0; border-bottom: 1px solid var(--frs-border); } .frs-calc__group:first-child { padding-top: 0; } .frs-calc__group fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .frs-app .frs-calc__legend { display: flex; align-items: center; gap: .625rem; width: 100%; margin: 0 0 .75rem; padding: 0; font-size: 1rem; line-height: 1.3; } .frs-calc__step { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--frs-navy-tint); color: var(--frs-ink-navy); font-family: var(--frs-font-mono); font-size: .8125rem; font-weight: 500; } .frs-calc__title { font-weight: 600; color: var(--frs-ink-navy); } .frs-calc__check { visibility: hidden; color: var(--frs-risk-negligible); } .frs-calc__group.is-answered .frs-calc__step { background: var(--frs-ink-navy); color: var(--frs-on-dark); } .frs-calc__group.is-answered .frs-calc__check { visibility: visible; } .frs-calc__options { display: flex; flex-wrap: wrap; gap: .5rem; padding-left: 2.375rem; } /* One option. The input stays in the accessibility tree and keeps the keyboard behaviour of a radio group; the label is what you see and what you hit. */ .frs-choice { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--frs-target); margin: 0; padding: .5rem .875rem; border: 1px solid var(--frs-border-input); border-radius: var(--frs-radius-sm); background: var(--frs-surface); color: var(--frs-ink); font-weight: 400; cursor: pointer; } .frs-choice:hover { border-color: var(--frs-ink-navy); background: var(--frs-navy-tint); } .frs-choice__input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0; accent-color: var(--frs-ink-navy); } .frs-choice:has(.frs-choice__input:checked) { border-color: var(--frs-ink-navy); background: var(--frs-navy-tint); color: var(--frs-ink-navy); font-weight: 600; } .frs-choice:has(.frs-choice__input:focus-visible) { outline: 3px solid var(--frs-focus-on-light); outline-offset: 2px; } .frs-calc__actions { margin-top: 1.5rem; } /* What each element is, under its name; the options' FRS points; the running score. */ .frs-app .frs-calc__desc { max-width: 62ch; margin: -.375rem 0 .75rem; font-size: .875rem; line-height: 1.5; color: var(--frs-ink-muted); } .frs-calc .frs-choice__points { margin-left: .375rem; padding: 0 .375rem; border-radius: var(--frs-radius-sm); background: var(--frs-surface-alt); font-size: .75rem; color: var(--frs-ink-muted); } .frs-calc .frs-choice:has(.frs-choice__input:checked) .frs-choice__points { background: var(--frs-surface); color: var(--frs-ink-navy); } .frs-app .frs-calc__running { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .75rem; font-weight: 600; color: var(--frs-ink-muted); } .frs-app .frs-calc__running[hidden] { display: none; } .frs-calc__running .frs-num { font-size: 1.5rem; color: var(--frs-ink-navy); } .frs-app .frs-calc__progress { margin: 0 0 .75rem; font-family: var(--frs-font-mono); font-size: .8125rem; font-weight: 500; color: var(--frs-ink-muted); } .frs-calc__buttons { display: flex; flex-wrap: wrap; gap: .75rem; } .frs-app .frs-calc__buttons .btn { min-height: var(--frs-target); padding-left: 1.5rem; padding-right: 1.5rem; } .frs-app .frs-calc__hint { margin: .75rem 0 0; font-size: .875rem; color: var(--frs-ink-muted); } @media (max-width: 575.98px) { .frs-calc__options { padding-left: 0; } .frs-choice { width: 100%; } .frs-calc__buttons .btn { flex: 1 1 10rem; } } /* Signed-in home: the two actions beside the zone figure, then the capabilities as an editorial list where every line opens its page, then the byline. Sans throughout (Operate); the zone figure is the page's one lifted surface. */ .frs-home { max-width: 72rem; padding-bottom: 2.5rem; } .frs-home__start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 2.5rem; align-items: start; } .frs-app .frs-home__welcome { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; color: var(--frs-ink-navy); } .frs-app .frs-home__lead { max-width: 44ch; margin: 0 0 1.5rem; font-size: 1.1875rem; line-height: 1.55; color: var(--frs-ink); } .frs-home__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; } /* DESIGN.md asks 48px of a primary control; these two are the primary controls of the screen. */ .frs-app .frs-home__actions .btn:not(.btn-sm) { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--frs-target); padding-left: 1.5rem; padding-right: 1.5rem; } .frs-app .frs-home__caption { display: flex; gap: .5rem; align-items: baseline; max-width: 44ch; margin: 0; font-size: .875rem; color: var(--frs-ink-muted); } .frs-home__app { display: flex; align-items: center; gap: 1rem; max-width: 36rem; } .frs-home__app .frs-stores { flex: none; } .frs-home__app .frs-home__caption { flex: 1 1 auto; } /* The page's own h1 replaces the layout's generic "Home" header. */ .frs-app .content-wrapper:has(.frs-home) > .content-header { display: none; } .frs-app .frs-home { padding-top: 1.25rem; } /* The authors' full overview, one click away. A native

: keyboard and screen readers get the open/closed state for free. */ .frs-home__original { margin-top: 1.5rem; border-top: 1px solid var(--frs-border); border-bottom: 1px solid var(--frs-border); } .frs-app .frs-home__original > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--frs-target); padding: .5rem 0; color: var(--frs-steel); font-weight: 600; cursor: pointer; list-style: none; } .frs-home__original > summary::-webkit-details-marker { display: none; } .frs-home__original > summary .fas { font-size: .75rem; transition: transform .2s ease; } .frs-home__original[open] > summary .fas { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .frs-home__original > summary .fas { transition: none; } } .frs-home__original-body { max-width: 70ch; padding: .5rem 0 1.5rem; line-height: 1.6; } .frs-app .frs-home__original-title { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 700; color: var(--frs-ink); } .frs-app .frs-home__original-body ol { margin: 1rem 0 0; padding-left: 1.25rem; } .frs-app .frs-home__original-body li + li { margin-top: .75rem; } /* Store badges (Views/Shared/_StoreBadges.cshtml). Apple's artwork is used as supplied; only the link around it is styled. */ .frs-stores { display: flex; flex-wrap: wrap; gap: .75rem; } /* No padding: the badge's left edge lines up with the buttons above it. 40px tall clears the WCAG 2.2 24px target floor; Apple's clear space comes from the gap around it. */ .frs-stores__badge { display: inline-flex; border-radius: var(--frs-radius-sm); } .frs-stores__badge img { display: block; height: 40px; width: auto; } .frs-band .frs-stores { margin-top: 1.25rem; } .frs-home__guide { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--frs-border); } .frs-app .frs-home__guide-title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; color: var(--frs-ink); } .frs-app .frs-home__guide-intro { max-width: 65ch; margin: 0 0 1.25rem; color: var(--frs-ink-muted); } /* Two columns of sentences, hairline between rows: DESIGN.md's editorial list, made navigable. */ .frs-app .frs-home__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; margin: 0; padding: 0; list-style: none; } .frs-home__features li { border-top: 1px solid var(--frs-border); } .frs-app .frs-home__features a { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding: .875rem .5rem .875rem 0; color: var(--frs-ink-muted); line-height: 1.5; text-decoration: none; } .frs-app .frs-home__features a:hover { color: var(--frs-ink); } .frs-app .frs-home__features a:hover strong { text-decoration: underline; text-underline-offset: .2em; } .frs-home__feature-text { flex: 1; max-width: 60ch; } .frs-app .frs-home__features strong { color: var(--frs-ink-navy); } .frs-home__features .fa-chevron-right { flex: none; font-size: .75rem; color: var(--frs-steel); } .frs-app .frs-home__byline { max-width: 36rem; margin: 1.25rem 0 0; font-size: .875rem; color: var(--frs-ink-muted); } /* Wide screens (a 1080p monitor and up): the capabilities in three columns, tighter rhythm, so the whole home fits one screen without scrolling. */ @media (min-width: 1400px) { .frs-home { padding-bottom: .25rem; } .frs-home__guide { margin-top: 1.25rem; padding-top: 1rem; } .frs-app .frs-home__guide-intro { margin-bottom: .75rem; } .frs-app .frs-home__features { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; } .frs-app .frs-home__features a { min-height: 4rem; padding-top: .625rem; padding-bottom: .625rem; } .frs-home__original { margin-top: .75rem; } } @media (max-width: 991.98px) { .frs-home__start { grid-template-columns: 1fr; gap: 2rem; } .frs-home__figure { max-width: 30rem; } .frs-app .frs-home__features { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .frs-home__actions { flex-direction: column; } .frs-home__actions .btn { width: 100%; } .frs-app .frs-home__welcome { font-size: 1.25rem; } .frs-app .frs-home__lead { font-size: 1.0625rem; } } /* First-run state: an empty table shell tells a surgeon nothing. */ .frs-empty { max-width: 34rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; } .frs-app .frs-empty__title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; } .frs-empty__body { margin: 0 0 1.5rem; color: var(--frs-ink-muted); } /* Clinical figures read as data wherever they appear. */ .frs-app .frs-num { font-family: var(--frs-font-mono); font-variant-numeric: tabular-nums; } /* ---------- Public landing (Views/Shared/_LandingLayout.cshtml) ---------- */ .frs-landing { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .frs-landing main { flex: 1 0 auto; } .frs-container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; } .frs-topbar { position: sticky; top: 0; z-index: 1030; background: var(--frs-paper); border-bottom: 1px solid var(--frs-rule); } .frs-topbar .frs-container { display: flex; align-items: center; gap: .75rem; min-height: 4rem; } .frs-topbar .frs-brand { margin-right: auto; } .frs-topbar__nav { display: flex; align-items: center; gap: .5rem; } .frs-landing a.frs-topbar__link { display: inline-flex; align-items: center; min-height: var(--frs-target); padding: 0 .75rem; font-weight: 600; text-decoration: none; } .frs-landing a.frs-topbar__link:hover { text-decoration: underline; } .frs-lang { flex-direction: row; margin: 0; } .frs-lang .nav-item, li.frs-lang { position: relative; } .frs-lang .nav-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--frs-target); min-height: var(--frs-target); padding: 0; border-radius: var(--frs-radius-sm); } .frs-lang button.nav-link { border: 0; background: none; font: inherit; cursor: pointer; } .frs-lang .dropdown-menu { position: absolute; min-width: 10rem; border-color: var(--frs-rule); border-radius: var(--frs-radius-sm); box-shadow: var(--frs-shadow-lift); } .frs-lang .dropdown-item { display: flex; align-items: center; min-height: var(--frs-target); color: var(--frs-ink); } .frs-lang .dropdown-item.active, .frs-lang .dropdown-item:active, .frs-lang .dropdown-item:hover, .frs-lang .dropdown-item:focus { background: var(--frs-navy-tint); color: var(--frs-ink-navy); } .frs-lang__code { font-weight: 700; font-size: .875rem; letter-spacing: .04em; } .frs-hero { padding: 4.5rem 0 4rem; } .frs-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 4rem; } .frs-landing .frs-hero h1 { margin: 0; font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.01em; } .frs-byline { max-width: 52ch; margin: 1rem 0 0; padding-top: .875rem; border-top: 1px solid var(--frs-rule); font-size: .9375rem; line-height: 1.5; color: var(--frs-ink-muted); } .frs-hero__lead { max-width: 60ch; margin: 1.5rem 0 1.25rem; font-size: 1.1875rem; line-height: 1.55; color: var(--frs-ink); } .frs-hero__access { max-width: 60ch; margin: 0 0 1rem; font-size: .9375rem; color: var(--frs-ink-muted); } .frs-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .frs-hero__actions .frs-btn { padding: .75rem 1.5rem; font-size: 1.0625rem; } .frs-section { padding: 4.5rem 0; border-top: 1px solid var(--frs-rule); } .frs-section__head { max-width: 44rem; margin: 0 0 2.5rem; } .frs-landing .frs-section__head h2 { margin: 0 0 .75rem; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.3; letter-spacing: -.005em; } .frs-section__head p { max-width: 65ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--frs-ink-muted); } .frs-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; margin: 0; padding: 0; list-style: none; } .frs-findings li { padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--frs-rule); } .frs-findings p { max-width: 62ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--frs-ink-muted); } .frs-findings strong { font-weight: 700; color: var(--frs-ink-navy); } .frs-band { padding: 3.5rem 0; background: var(--frs-chart-room); color: var(--frs-on-dark-muted); } .frs-landing .frs-band h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; color: var(--frs-on-dark); } .frs-band p { max-width: 60ch; margin: 0; font-size: 1.0625rem; } .frs-footer { padding: 1.5rem 0; border-top: 1px solid var(--frs-rule); font-size: .875rem; color: var(--frs-ink-muted); } .frs-footer .frs-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; } .frs-landing a.frs-footer__credit { display: inline-flex; align-items: center; min-height: var(--frs-target); font-weight: 600; } @media (max-width: 991.98px) { .frs-hero { padding: 3rem 0 3.5rem; } .frs-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .frs-findings { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 575.98px) { .frs-container { padding: 0 1rem; } .frs-topbar .frs-container { gap: .25rem; } /* Visually hidden, not display:none: the link keeps its name for screen readers. */ .frs-topbar .frs-brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .frs-topbar__nav { gap: .25rem; } .frs-landing a.frs-topbar__link { padding: 0 .625rem; } .frs-topbar__nav .frs-btn { padding: .75rem .875rem; } .frs-hero { padding: 2.25rem 0 3rem; } .frs-byline { font-size: .875rem; } .frs-hero__lead { font-size: 1.0625rem; } .frs-hero__actions .frs-btn { flex: 1 1 9rem; } .frs-section { padding: 3rem 0; } .frs-section__head { margin-bottom: 1.5rem; } .frs-findings p { font-size: 1rem; } .frs-band { padding: 2.5rem 0; } .frs-zones { padding: 1.25rem 1rem 1rem; } } /* ---------- Sign-in and registration (Areas/Identity/.../Login|Register.cshtml) ---------- */ .frs-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; min-height: 100dvh; } .frs-auth__panel { display: flex; flex-direction: column; padding: 2rem 3rem 2.5rem; background: var(--frs-chart-room); color: var(--frs-on-dark-muted); } .frs-auth__pitch { max-width: 30rem; margin: auto 0; padding: 3rem 0; } .frs-auth__pitch > .frs-auth__pitch-title { margin: 0 0 1rem; font-size: clamp(1.625rem, 2.1vw, 2.125rem); line-height: 1.3; letter-spacing: -.005em; color: var(--frs-on-dark); } .frs-auth__pitch > p:not(.frs-auth__pitch-title) { max-width: 44ch; margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.55; } .frs-auth__legal { margin: 0; font-size: .8125rem; } .frs-auth .frs-auth__legal a, .frs-auth .frs-auth__legal a:hover { color: var(--frs-on-dark); } .frs-auth__main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; } .frs-auth__form { width: 100%; max-width: 26rem; } .frs-auth__form--wide { max-width: 34rem; } .frs-auth .frs-auth__form h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.01em; } .frs-auth__sub { max-width: 44ch; margin: 0 0 2rem; color: var(--frs-ink-muted); } .frs-auth .form-group { margin-bottom: 1.25rem; } .frs-auth label:not(.custom-control-label) { margin-bottom: .375rem; font-size: .9375rem; font-weight: 600; color: var(--frs-ink); } .frs-auth .form-control { height: var(--frs-target); padding: .625rem .875rem; border: 1px solid var(--frs-border-input); border-radius: var(--frs-radius-sm); background: var(--frs-surface); font-family: var(--frs-font-sans); font-size: 1rem; /* 16px: iOS does not zoom on focus */ color: var(--frs-ink); box-shadow: none; } .frs-auth .form-control::placeholder { color: var(--frs-placeholder); opacity: 1; } .frs-auth .form-control:focus { border-color: var(--frs-steel); box-shadow: none; } .frs-auth .form-control.input-validation-error { border-color: var(--frs-risk-high); } .frs-auth .input-group > .form-control { border-right: 0; } .frs-auth .frs-reveal { display: inline-flex; align-items: center; justify-content: center; width: var(--frs-target); border: 1px solid var(--frs-border-input); border-left: 0; border-radius: 0 var(--frs-radius-sm) var(--frs-radius-sm) 0; background: var(--frs-surface); color: var(--frs-ink-muted); } .frs-auth .frs-reveal:hover { color: var(--frs-ink-navy); } .frs-auth .input-group:focus-within .form-control, .frs-auth .input-group:focus-within .frs-reveal { border-color: var(--frs-steel); } .frs-auth .field-validation-error, .frs-auth .text-danger { color: var(--frs-risk-high) !important; } .frs-auth .field-validation-error { display: block; margin-top: .375rem; font-size: .9375rem; } .frs-auth .validation-summary-errors { margin-bottom: 1.25rem; padding: .75rem 1rem; border: 1px solid #F1C2C2; border-radius: var(--frs-radius-sm); background: var(--frs-risk-high-bg); } .frs-auth .validation-summary-errors ul { margin: 0; padding-left: 1.125rem; } .frs-auth__hint { display: block; margin-top: .375rem; font-size: .875rem; color: var(--frs-ink-muted); } .frs-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; margin: -.5rem 0 1.25rem; } .frs-auth__row .icheck-primary { margin: 0; } /* icheck draws a 22px box; the label grows to the 48px target and the box stays centred. */ .frs-auth .icheck-primary > label { min-height: var(--frs-target); line-height: var(--frs-target) !important; font-weight: 500 !important; color: var(--frs-ink); } .frs-auth .icheck-primary > input:first-child + label::before, .frs-auth .icheck-primary > input:first-child:checked + label::after { top: 13px; } /* The unchecked box kept icheck's pale outline (1.4:1); the input border tone reads at 3:1. */ .frs-auth .icheck-primary > input:first-child + label::before { border-color: var(--frs-border-input); } .frs-auth .icheck-primary > input:first-child:checked + label::before, .frs-auth .icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before { border-color: var(--frs-ink-navy); } .frs-auth .icheck-primary > input:first-child:checked + label::before { background-color: var(--frs-ink-navy); } .frs-auth .icheck-primary > input:first-child:focus-visible + label::before { outline: 3px solid var(--frs-focus-on-light); outline-offset: 2px; } .frs-auth a.frs-auth__link { display: inline-flex; align-items: center; min-height: var(--frs-target); padding: .75rem 0; font-weight: 600; } .frs-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-divider::before, .frs-divider::after { content: ""; flex: 1; height: 1px; background: var(--frs-rule); } .frs-social { display: grid; gap: .75rem; } .frs-auth a.frs-btn--social { border-color: var(--frs-border-input); background: var(--frs-surface); color: var(--frs-ink); } .frs-auth a.frs-btn--social:hover { background: var(--frs-surface-alt); color: var(--frs-ink); } .frs-auth .frs-btn--social .fa-facebook { color: #1877F2; } .frs-auth .frs-btn--social .fa-google { color: #4285F4; } .frs-auth__switch { margin: 1.5rem 0 0; text-align: center; } @media (max-width: 991.98px) { .frs-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .frs-auth__panel { padding: .5rem 1.25rem; } .frs-auth__pitch, .frs-auth__legal { display: none; } .frs-auth__main { align-items: flex-start; padding: 2rem 1.25rem 3rem; } } /* Phones in landscape: keep the form reachable without scrolling past chrome. */ @media (max-height: 520px) and (orientation: landscape) { .frs-auth__main { padding-top: 1.25rem; } .frs-auth__sub { display: none; } .frs-auth .frs-auth__form h1 { margin-bottom: 1rem; font-size: 1.75rem; } } @media (prefers-reduced-motion: reduce) { .frs-btn { transition: none; } .frs-zones__bar span, .frs-landing .fa-spin, .frs-auth .fa-spin { animation: none; } } /* --------------------------------------------------------------------------- Lock screen AdminLTE keeps its own centred layout here; this gives it the brand's surface, type and targets rather than the stock grey-on-grey. --------------------------------------------------------------------------- */ .frs-lock { font-family: var(--frs-font-sans); color: var(--frs-ink); background: var(--frs-paper); -webkit-font-smoothing: antialiased; } .frs-lock .lockscreen-wrapper { max-width: 24rem; margin: 0 auto; padding: 4rem 1rem 0; } .frs-lock .lockscreen-logo { margin: 0 0 1rem; font-family: var(--frs-font-serif); font-size: 1.75rem; font-weight: 600; color: var(--frs-ink-navy); } .frs-lock .lockscreen-logo a, .frs-lock .lockscreen-name { color: var(--frs-ink-navy); } .frs-lock .lockscreen-item { background: var(--frs-surface); border-radius: var(--frs-radius-md); box-shadow: var(--frs-shadow-lift); } .frs-lock .lockscreen-credentials .form-control { height: var(--frs-target); color: var(--frs-ink); } .frs-lock .lockscreen-credentials .btn { min-width: var(--frs-target); min-height: var(--frs-target); color: var(--frs-ink-navy); } .frs-lock .help-block { color: var(--frs-ink-muted); } .frs-lock a { color: var(--frs-steel); } .frs-lock a:hover { color: var(--frs-ink-navy); } .frs-lock .lockscreen-footer { margin-top: 2rem; font-size: .8125rem; color: var(--frs-ink-muted); } .frs-lock :focus-visible { outline: 2px solid var(--frs-focus-on-light); outline-offset: 2px; } /* --------------------------------------------------------------------------- Admin: Identity and Configurations (body.frs-app .frs-admin) One card per page, tabs on it, content straight in the tab. Replaces a card nested in a card, green "New user" / "Save" buttons, and row actions in teal, amber, grey and red: green, amber and red name risk zones and errors here, and nothing else. --------------------------------------------------------------------------- */ .frs-app .frs-admin { border-top: 1px solid var(--frs-border); } /* The tab strip scrolls sideways on a phone instead of wrapping to a second row. */ .frs-app .frs-admin > .card-header .nav-tabs, .frs-app .frs-subtabs > .card-header .nav-tabs { position: relative; /* the tabs' .sr-only text is absolute; unanchored, it escaped the scroller */ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .frs-app .frs-admin .nav-tabs .nav-link { white-space: nowrap; } .frs-admin__toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .frs-app .frs-admin__toolbar .btn, .frs-app .frs-admin__save { min-height: var(--frs-target); padding-left: 1.25rem; padding-right: 1.25rem; } .frs-app .frs-admin__toolbar .btn .fas { margin-right: .375rem; } .frs-app .frs-admin__save { margin-top: .5rem; } /* Row actions: quiet icon buttons, one voice. The confirmation dialog carries the red for delete. */ .frs-app .frs-col-actions { width: 1%; white-space: nowrap; } .frs-row-actions { display: inline-flex; gap: .25rem; } .frs-app .frs-row-action { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid transparent; background: transparent; color: var(--frs-steel); } .frs-app .frs-row-action:hover, .frs-app .frs-row-action:focus-visible { background: var(--frs-navy-tint); border-color: var(--frs-border); color: var(--frs-ink-navy); } /* The data-table link rule pads every link in a cell; the sign-in-as link is an icon button. */ .frs-app table.dataTable tbody td a.frs-row-action { padding: 0; } /* Responsive's expand control: the plugin draws it in link blue, and red once a row is open. */ .frs-app .frs-admin table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, .frs-app .frs-admin table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before { background-color: var(--frs-ink-navy); box-shadow: none; } /* Second-level tabs (Social, Notifications, Upload File, Payments): a sub-navigation inside the page card, not a second card with AdminLTE's blue top rule. */ .frs-app .frs-subtabs { margin: 0 0 1rem; border: 0; box-shadow: none; } .frs-app .frs-subtabs > .card-header { padding: 0 !important; /* AdminLTE's .p-0.pt-1 utility pair, not the design system's rhythm */ background: transparent; } /* :hover and :focus too: AdminLTE's .card-outline-tabs .card-header a:hover draws a 3px grey top rule. */ .frs-app .frs-subtabs > .card-header .nav-link, .frs-app .frs-subtabs > .card-header .nav-link:hover, .frs-app .frs-subtabs > .card-header .nav-link:focus, .frs-app .frs-subtabs > .card-header .nav-link.active { margin: 0; border-top: 0; border-left: 0; border-right: 0; } .frs-app .frs-subtabs > .card-body { padding: 1.25rem 0 0; } .frs-app .frs-admin .form-group > label { font-weight: 600; color: var(--frs-ink); } .frs-app .frs-admin .form-control { font-size: 1rem; /* the 16px input rule: iOS zooms into anything smaller */ } /* Permissions: select2's blue highlight and chips joined the navy. */ .frs-app .select2-blue .select2-results__option--highlighted[aria-selected], .frs-app .select2-blue .select2-results__option--highlighted[aria-selected]:hover { background-color: var(--frs-ink-navy); color: var(--frs-on-dark); } .frs-app .select2-blue .select2-selection--multiple .select2-selection__choice { background-color: var(--frs-navy-tint); border-color: var(--frs-navy-tint); color: var(--frs-ink-navy); } .frs-app .select2-blue .select2-selection--multiple .select2-selection__choice__remove { color: var(--frs-ink-navy); } .frs-app .select2-blue .select2-container--default.select2-container--focus .select2-selection--multiple, .frs-app .select2-blue .select2-container--default .select2-selection--multiple { min-height: 2.75rem; border-color: var(--frs-border-input); border-radius: var(--frs-radius-sm); } /* On a phone the four row actions sit two by two, and addresses may break, so the username stays beside its actions instead of Responsive folding it away and leaving rows nobody can identify. */ .frs-app .frs-admin table.dataTable tbody td { overflow-wrap: anywhere; } @media (max-width: 575.98px) { .frs-row-actions { flex-wrap: wrap; width: 5.75rem; } } /* --------------------------------------------------------------------------- Topbar: today (Views/Shared/ThemeView/AdminLTE/_Today.cshtml, js/frs-today.js) The date, the weather once asked for, and one line for the commute. Quiet ink, no colour: weather is context here, not a signal — green, amber and red stay with the risk zones. --------------------------------------------------------------------------- */ .frs-app .frs-today__toggle { gap: .625rem; white-space: nowrap; color: var(--frs-ink); } .frs-app .frs-today__toggle::after { display: none; /* no caret: the whole line is the control */ } .frs-today__date { font-weight: 600; } .frs-today__weather { display: inline-flex; align-items: center; gap: .375rem; padding-left: .625rem; border-left: 1px solid var(--frs-border); color: var(--frs-ink-navy); font-weight: 600; font-variant-numeric: tabular-nums; } .frs-app .main-header .frs-today__enable { gap: .375rem; padding: 0 .75rem; border: 1px solid var(--frs-border-input); border-radius: var(--frs-radius-sm); background: var(--frs-surface); color: var(--frs-steel); font-weight: 600; white-space: nowrap; } .frs-app .main-header .frs-today__enable:hover, .frs-app .main-header .frs-today__enable:focus-visible { background: var(--frs-navy-tint); color: var(--frs-ink-navy); } .frs-app .frs-today { display: flex; align-items: center; gap: .25rem; } .frs-app .main-header .frs-today__enable[hidden], .frs-today__weather[hidden], .frs-today__tip[hidden] { display: none; } .frs-today__tip { color: var(--frs-ink-muted); font-size: .875rem; } .frs-app .frs-today__panel { width: 20rem; max-width: calc(100vw - 2rem); padding: 1rem; border-color: var(--frs-border); border-radius: var(--frs-radius-md); box-shadow: var(--frs-shadow-lift); white-space: normal; } .frs-today__panel-title { margin: 0 0 .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--frs-ink-muted); } .frs-today__day { margin: 0 0 .25rem; font-size: .875rem; color: var(--frs-ink-muted); } .frs-today__now { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--frs-ink); } .frs-today__range { margin: .25rem 0 .75rem; font-size: .9375rem; color: var(--frs-ink-muted); font-variant-numeric: tabular-nums; } .frs-today__advice { margin: 0; padding: .625rem .75rem; border-radius: var(--frs-radius-sm); background: var(--frs-navy-tint); color: var(--frs-ink-navy); font-weight: 600; } .frs-today__note { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--frs-ink-muted); } /* The shell paints every .btn in the header with ink; inside the panel the buttons keep their roles. */ .frs-app .main-header .frs-today__panel .btn-primary { justify-content: center; color: var(--frs-on-dark); } .frs-app .main-header .frs-today__panel .btn-link { color: var(--frs-steel); } .frs-app .frs-today__panel .btn-primary .fas { margin-right: .375rem; } .frs-today__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--frs-border); font-size: .8125rem; } .frs-app .frs-today__foot a, .frs-app .frs-today__forget { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0; font-size: .8125rem; font-weight: 600; } /* The tip fits beside the date only on wide screens; below that it lives in the panel. */ @media (max-width: 1279.98px) { .frs-today__tip { display: none; } } /* A phone keeps the short date and the temperature; the full line is in the panel. */ @media (max-width: 767.98px) { .frs-app .frs-today__toggle { gap: .375rem; padding-left: .25rem; padding-right: .25rem; } .frs-today__date { font-size: 0; } .frs-today__date::before { content: attr(data-short); font-size: .9375rem; } .frs-today__weather { padding-left: .375rem; } .frs-today__enable-label { display: none; } /* the icon alone, with its accessible name */ } /* The narrowest phones: once the weather shows, the date moves into the panel so "Lock screen" keeps one line. */ @media (max-width: 419.98px) { .frs-today__toggle:has(.frs-today__weather:not([hidden])) .frs-today__date { display: none; } .frs-today__toggle:has(.frs-today__weather:not([hidden])) .frs-today__weather { padding-left: 0; border-left: 0; } } /* --------------------------------------------------------------------------- QR sign-in (Areas/Identity/Pages/Account/Authentication/QrCode.cshtml) Instructions beside the code on desktop, the code first on a phone. The code is a credential: it starts covered, and the caution is Navy Tint, not error red — nothing has gone wrong. --------------------------------------------------------------------------- */ .frs-qr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: start; max-width: 56rem; padding: 1rem 0 2.5rem; } .frs-qr__lead { max-width: 60ch; margin: 0 0 1.5rem; font-size: 1.1875rem; line-height: 1.55; color: var(--frs-ink); } .frs-app .frs-qr__steps { margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: frs-qr; } .frs-qr__steps li { position: relative; min-height: 2rem; padding: .25rem 0 .25rem 2.75rem; counter-increment: frs-qr; line-height: 1.5; } .frs-qr__steps li + li { margin-top: .75rem; } .frs-qr__steps li::before { content: counter(frs-qr); position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--frs-ink-navy); color: var(--frs-on-dark); font-weight: 700; font-size: .875rem; } .frs-qr__caution { display: flex; gap: .75rem; max-width: 60ch; margin: 0; padding: .875rem 1rem; border-radius: var(--frs-radius-sm); background: var(--frs-navy-tint); color: var(--frs-ink-navy); font-size: .9375rem; line-height: 1.5; } .frs-qr__caution .fas { margin-top: .2rem; } .frs-qr__phone-hint { display: none; margin: 1rem 0 0; font-size: .875rem; color: var(--frs-ink-muted); } .frs-qr__figure { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; margin: 0; padding: 1.5rem; border-radius: var(--frs-radius-lg); background: var(--frs-surface); box-shadow: var(--frs-shadow-lift); /* the page's one lifted surface */ } .frs-qr__frame { display: flex; align-items: center; justify-content: center; width: 17.5rem; height: 17.5rem; } .frs-qr__image { width: 100%; height: 100%; image-rendering: pixelated; /* a scaled QR stays crisp instead of blurring its modules */ } .frs-qr__image[hidden], .frs-qr__cover[hidden] { display: none; } .frs-qr__cover { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 1px dashed var(--frs-border-input); border-radius: var(--frs-radius-md); background: var(--frs-surface-alt); color: var(--frs-border-input); font-size: 5rem; } .frs-app .frs-qr__toggle { min-height: var(--frs-target); } .frs-app .frs-qr__toggle .fas { margin-right: .375rem; } @media (max-width: 767.98px) { .frs-qr { grid-template-columns: 1fr; gap: 1.5rem; } .frs-qr__figure { order: -1; align-items: center; padding: 1rem; } .frs-qr__frame { width: min(17.5rem, 100%); height: auto; aspect-ratio: 1; } .frs-qr__toggle { align-self: stretch; } .frs-qr__phone-hint { display: block; } }