/* Ridgeline Admin — light theme only (no dark mode, no theme switch). */
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #F8F9FB; --line: #E3E6EB; --line-2: #CDD2DA;
  --ink: #101828; --ink-2: #475467; --ink-3: #596275;
  --accent: #D43B12; --accent-ink: #FFFFFF; --accent-soft: #FDEBE5; --nav: #0E1726; --nav-ink: #C9D1DE; --nav-on: #FFFFFF;
  --good: #137A45; --good-soft: #DDF3E6; --warn: #8A5509; --warn-soft: #FBEBC8; --bad: #B42318; --bad-soft: #FDE4E1; --info: #1D4F91; --info-soft: #DDE9F8; --pine: #1E4A3C; --pine-soft: #DCEBE3;
  --r: 12px; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.05);
  --f: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14.5px/1.5 var(--f); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid #1D4ED8; outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--ink-3); } .fine { font-size: 12.5px; color: var(--ink-3); } .right { text-align: right; } .nowrap { white-space: nowrap; }

/* shell */
.app { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--nav); color: var(--nav-ink); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; padding: 4px 10px 12px; font-weight: 800; font-size: 20px; letter-spacing: -.04em; }
.brand svg { color: #FF7448; } .brand em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.12); padding: 2px 7px; border-radius: 6px; margin-left: 2px; }
.nav { display: grid; gap: 2px; flex: 1; }
.nav__g { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7C8AA0; padding: 12px 12px 4px; }
.nav__a { padding: 7px 12px; border-radius: 9px; font-weight: 600; color: var(--nav-ink); }
.nav__a:hover { background: rgba(255,255,255,.07); color: #fff; } .nav__a.is-on { background: rgba(255,255,255,.12); color: var(--nav-on); }
.user { display: flex; align-items: center; gap: 10px; padding: 12px; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.user b { display: block; color: #fff; font-size: 13.5px; } .user small { color: #8FA0B8; font-size: 12px; } .user__out { margin-left: auto; font-size: 12px; font-weight: 700; color: #C9D1DE; padding: 6px 8px; border-radius: 8px; } .user__out:hover { background: rgba(255,255,255,.1); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #24344F; color: #fff; font-weight: 700; font-size: 12.5px; flex: none; }
.main { padding: 26px 32px 60px; min-width: 0; max-width: none; width: 100%; }
.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.phead h1 { font-size: 28px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; } .phead__a { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-role { font-size: 12px; background: var(--info-soft); color: var(--info); padding: 3px 9px; border-radius: 999px; font-weight: 700; }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); }
.card h2 { font-size: 16px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 12px; }
.card__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .card__h h2 { margin: 0; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g32 { grid-template-columns: 2fr 1fr; } .g23 { grid-template-columns: 1fr 2fr; }
.stack { display: grid; gap: 16px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .split { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.kpi__l { font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; } .kpi__v { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; } .kpi__s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.kpi.bad .kpi__v { color: var(--bad); } .kpi.good .kpi__v { color: var(--good); }

/* tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.card .tablewrap { border: 0; border-radius: 0; margin: 0 -20px -18px; border-top: 1px solid var(--line); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl th { position: sticky; top: 0; text-align: left; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; padding: 11px 16px; background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 12px 16px; vertical-align: middle; } .tbl tbody tr:hover td { background: #FAFBFC; }
.card .tbl th, .card .tbl td { padding-left: 12px; padding-right: 12px; } .card .tbl .sn { padding-left: 8px; padding-right: 8px; } .card .tbl td { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.tbl td small { display: block; margin-top: 2px; line-height: 1.35; } .tbl td .who small { display: block; margin-top: 1px; }
.tbl td, .tbl th { min-width: 0; } .tbl td:not(.sn) { min-width: 84px; }
/* full grid: a line between every row and every column, none on the outer edge (the wrapper draws it) */
.tbl th, .tbl td { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.tbl tr > :last-child { border-right: 0; } .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .sn { width: 1%; min-width: 56px; text-align: center; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; padding-left: 8px; padding-right: 8px; }
.tbl .num, .num { font-variant-numeric: tabular-nums; text-align: right; }
.lnk { font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } .lnk:hover { text-decoration-color: var(--accent); }
.masked { color: var(--ink-3); letter-spacing: .12em; font-weight: 700; user-select: none; }
.who { display: flex; align-items: center; gap: 10px; } .who .avatar { width: 32px; height: 32px; background: var(--pine-soft); color: var(--pine); } .who small { display: block; color: var(--ink-3); font-size: 12px; }
.who img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,.12); white-space: nowrap; }
.btn:hover { filter: brightness(1.06); } .btn:active { transform: translateY(1px); }
.btn--ink { background: var(--ink); } .btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); } .btn--danger { background: var(--bad); } .btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.input { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; }
textarea.input { resize: vertical; line-height: 1.45; } .input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,24,40,.1); }
.field { display: grid; gap: 5px; } .field label { font-weight: 700; font-size: 13px; } .form { display: grid; gap: 14px; } .fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .toolbar .input { width: auto; min-width: 150px; } .toolbar .grow { flex: 1; min-width: 220px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; min-height: 24px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #EEF0F3; color: var(--ink-2); white-space: nowrap; }
.chip--good { background: var(--good-soft); color: var(--good); } .chip--warn { background: var(--warn-soft); color: var(--warn); } .chip--bad { background: var(--bad-soft); color: var(--bad); } .chip--info { background: var(--info-soft); color: var(--info); } .chip--pine { background: var(--pine-soft); color: var(--pine); } .chip--accent { background: var(--accent-soft); color: #A52E0C; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; } .tabs a { padding: 10px 14px; font-weight: 700; color: var(--ink-3); border-bottom: 2.5px solid transparent; white-space: nowrap; } .tabs a.is-on { color: var(--ink); border-bottom-color: var(--accent); } .tabs a:hover { color: var(--ink); }
.flash { padding: 12px 16px; border-radius: 10px; font-weight: 600; margin-bottom: 16px; } .flash--good { background: var(--good-soft); color: var(--good); } .flash--bad { background: var(--bad-soft); color: var(--bad); } .flash--warn { background: var(--warn-soft); color: var(--warn); }
.empty { text-align: center; padding: 38px 20px; } .empty__i { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 14px; background: #EEF0F3; display: grid; place-items: center; font-size: 22px; color: var(--ink-3); } .empty h3 { font-size: 16px; margin-bottom: 4px; }
.kvs { display: grid; gap: 0; } .kvs > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); } .kvs > div:last-child { border-bottom: 0; } .kvs dt { color: var(--ink-3); } .kvs dd { margin: 0; font-weight: 650; text-align: right; }
.notice { padding: 12px 14px; border-radius: 10px; background: var(--info-soft); color: #173F73; font-size: 13.5px; } .notice--warn { background: var(--warn-soft); color: #6B4107; } .notice--care { background: var(--pine-soft); color: var(--pine); }
.audit-cue { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--warn-soft); color: #6B4107; font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.chart { width: 100%; height: auto; } .chart .axis { stroke: var(--line-2); } .chart .tick { font-size: 11px; fill: var(--ink-3); } .chart .val { font-size: 11px; font-weight: 700; fill: var(--ink-2); }
.hbars { display: grid; gap: 10px; } .hb { display: grid; grid-template-columns: 140px 1fr 56px; align-items: center; gap: 10px; font-size: 13.5px; } .hb__t { height: 10px; background: #EEF0F3; border-radius: 6px; overflow: hidden; } .hb__t i { display: block; height: 100%; background: var(--accent); border-radius: 6px; } .hb b { text-align: right; font-variant-numeric: tabular-nums; }
.thread { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding: 4px; } .bub { max-width: 80%; padding: 8px 12px; border-radius: 14px; background: #EEF0F3; } .bub--me { margin-left: auto; background: var(--pine-soft); } .bub small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.matrix td, .matrix th { text-align: center; } .matrix td:first-child, .matrix th:first-child { text-align: left; }
.tick-ok { color: var(--good); font-weight: 800; } .tick-no { color: var(--ink-3); }
.tl { display: grid; gap: 0; } .tl > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .tl > div:last-child { border: 0; } .tl time { color: var(--ink-3); font-size: 13px; }
form.inline { display: inline; }
.center-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; background: var(--bg); } .narrow { max-width: 440px; width: 100%; display: grid; gap: 14px; } .login-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; letter-spacing: -.04em; color: var(--ink); } .login-brand svg { color: var(--accent); }
.skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #EEF0F3, #F7F8FA, #EEF0F3); background-size: 200% 100%; animation: sh 1.3s infinite; } @keyframes sh { to { background-position: -200% 0; } }
.busy { position: relative; pointer-events: none; opacity: .75; }
.drawer-toggle { display: none; }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g32, .g23 { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: column; } .nav { display: flex; flex-wrap: wrap; } .nav__g { display: none; } .main { padding: 18px 16px 48px; }
  .g2, .g3, .fgrid { grid-template-columns: 1fr; } .hb { grid-template-columns: 100px 1fr 48px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.ico { flex: none; } .audit-cue .ico { color: #8A5509; }

/* paging, notes */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .pager__b { display: inline-flex; align-items: center; gap: 10px; } .pager__n { margin-top: 10px; }
.btn.is-off { opacity: .45; pointer-events: none; }

/* one focus highlight for every field: accent outline + soft glow */
.input { transition: box-shadow .2s, border-color .2s, background-color .2s; }
.input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(212, 59, 18, .13); background-color: #fff; }
.field.has-error .input { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad), 0 0 0 5px rgba(177, 36, 36, .12); }
.flatpickr-input.input.active, .flatpickr-input.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(212, 59, 18, .13); }

/* ---------- sign-in: photo on the left, login box on the right ---------- */
.login-page { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(80% 60% at 15% 0%, rgba(212, 59, 18, .07), transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(18, 28, 46, .08), transparent 60%), var(--bg); }
.login { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(400px, 1fr); width: min(1080px, 100%); min-height: min(600px, calc(100vh - 64px)); border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: 0 2px 4px rgba(14, 20, 32, .05), 0 24px 48px -16px rgba(14, 20, 32, .2), 0 60px 120px -40px rgba(14, 20, 32, .28), 0 0 0 1px rgba(14, 20, 32, .05); animation: rise-in .6s cubic-bezier(.2, .9, .3, 1) both; }
.login__art { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 30px 36px 36px; color: #fff; background-size: cover; background-position: 38% center; overflow: hidden; }
.login__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 22, .55) 0%, rgba(10, 14, 22, .12) 30%, rgba(10, 14, 22, .55) 62%, rgba(10, 14, 22, .92) 100%); }
.login__art > :not(.login__shade) { position: relative; }
.login__brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.04em; } .login__brand svg { color: #FF7448; }
.login__brand em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .16); padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(6px); }
.login__copy { max-width: 520px; animation: rise-in .7s cubic-bezier(.2, .9, .3, 1) .1s both; }
.login__copy h2 { font-size: 30px; line-height: 1.12; font-weight: 600; letter-spacing: -.035em; }
.login__copy p { margin-top: 12px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 44ch; }
.login__copy ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.login__copy li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, .88); } .login__copy li i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; color: #FFB08F; background: rgba(255, 255, 255, .1); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.login__panel { display: grid; place-items: center; padding: 40px 32px; background: radial-gradient(90% 60% at 80% 0%, rgba(212, 59, 18, .06), transparent 60%), var(--surface); }
.login__card { width: min(400px, 100%); display: grid; gap: 14px; animation: rise-in .6s cubic-bezier(.2, .9, .3, 1) both; }
.login__card .login-brand { margin-bottom: 14px; }
.login__card h1 { font-size: 28px; font-weight: 650; letter-spacing: -.035em; line-height: 1.1; } .login__card > .muted { margin-top: -6px; margin-bottom: 8px; }
.login__card .form { gap: 18px; }
.inp { position: relative; display: flex; align-items: center; }
.inp > i:first-child { position: absolute; left: 15px; color: var(--ink-3); font-size: 14px; pointer-events: none; transition: color .2s; }
.inp .input { width: 100%; height: 50px; padding: 0 46px 0 42px; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); border: 0; font-size: 15px; transition: box-shadow .2s, background-color .2s; }
.inp .input:focus { outline: none; background: #fff; border: 0; box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(212, 59, 18, .12); }
.inp:focus-within > i:first-child { color: var(--accent); }
.inp__eye { position: absolute; right: 6px; width: 38px; height: 38px; border: 0; background: transparent; border-radius: 10px; color: var(--ink-3); cursor: pointer; } .inp__eye:hover { background: var(--bg); color: var(--ink); }
.btn--lg { height: 50px; font-size: 15px; gap: 10px; border-radius: 13px; background: linear-gradient(180deg, #E24A20, var(--accent)); box-shadow: 0 1px 2px rgba(20, 16, 10, .2), 0 16px 28px -14px var(--accent); } .btn--lg i { transition: transform .25s; } .btn--lg:hover i { transform: translateX(4px); }
.login__fine { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); } .login__fine i { color: var(--good, #23693F); }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login__art { display: none; } }

/* ---------- icons (Font Awesome Pro) ---------- */
.nav__a { display: flex; align-items: center; gap: 12px; } .nav__i { flex: none; width: 18px; text-align: center; font-size: 15px; opacity: .8; transition: opacity .15s; } .nav__a:hover .nav__i, .nav__a.is-on .nav__i { opacity: 1; }
.nav__a.is-on .nav__i { color: #FF7448; }
.btn > i { margin-right: 7px; font-size: .92em; } .btn--sm > i { margin-right: 6px; font-size: .9em; }
.kpi__l > i { margin-right: 6px; color: var(--accent); opacity: .9; font-size: 13px; }
.user__out { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-left: auto; color: var(--nav-ink, #9AA3B2); transition: background-color .15s, color .15s; } .user__out:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.card__h h2 > i { margin-right: 8px; color: var(--accent); font-size: .9em; }

/* ---------- modals: centred, fixed header and footer, scrolling body ---------- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(16, 22, 34, .46), rgba(8, 11, 18, .72)); backdrop-filter: blur(5px) saturate(1.1); -webkit-backdrop-filter: blur(5px) saturate(1.1); animation: m-fade .22s ease both; }
.modal__panel { position: relative; display: flex; flex-direction: column; width: min(540px, 100%); max-height: min(86vh, 860px); background: var(--surface); border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(8, 12, 22, .06), 0 12px 24px -6px rgba(8, 12, 22, .18), 0 40px 90px -20px rgba(8, 12, 22, .55), 0 0 0 1px rgba(255, 255, 255, .06); animation: m-pop .32s cubic-bezier(.2, .9, .3, 1.08) both; }
.modal[data-size="sm"] .modal__panel { width: min(430px, 100%); } .modal[data-size="lg"] .modal__panel { width: min(760px, 100%); }
.modal.is-out .modal__panel { animation: m-out .17s ease both; } .modal.is-out .modal__scrim { animation: m-fadeout .17s ease both; }
.modal__h { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 22px 16px; border-bottom: 1px solid var(--line); }
.modal__h h2 { font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; } .modal__h p { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.modal__x { flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0; border-radius: 50%; display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--ink-3); transition: background-color .15s, color .15s; }
.modal__x { border: 0; background: transparent; padding: 0; cursor: pointer; } .modal__x i { font-size: 17px; line-height: 1; }
.modal__x:hover { background: var(--bg); color: var(--ink); } .modal__x:focus { outline: none; } .modal__x:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.modal__b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 22px; overscroll-behavior: contain; scrollbar-width: thin; }
.modal__b .form, .modal__b .stack { gap: 16px; } .modal__b .fgrid { gap: 16px; } .modal__b section + section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.modal__b h3 { font-size: 14px; font-weight: 650; margin-bottom: 10px; } .modal__b .fine { margin-top: 6px; }
.modal__f { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }
.modal__f .grow { margin-right: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
@keyframes m-fade { from { opacity: 0; } } @keyframes m-fadeout { to { opacity: 0; } }
@keyframes m-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } } @keyframes m-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 560px) { .modal { padding: 0; align-items: end; } .modal__panel { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; } }
@media (prefers-reduced-motion: reduce) { .modal__panel, .modal__scrim { animation: none; } }
/* date picker, themed */
.flatpickr-calendar { z-index: 1200 !important; font-family: inherit; border-radius: 14px; box-shadow: 0 18px 50px -16px rgba(8, 12, 22, .45), 0 0 0 1px var(--line); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); }
.flatpickr-day.today { border-color: var(--accent); } .flatpickr-months .flatpickr-month, .flatpickr-current-month { font-weight: 650; }
input.flatpickr-input[type="text"] { cursor: pointer; }
.notes { display: grid; gap: 10px; margin-top: 16px; } .note { padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); } .note p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 6px; }
.note__m { margin-top: 8px; } .note__m summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); padding: 4px 0; } .note__m form + form { margin-top: 8px; }.nw { white-space: nowrap; }