/* Ekline Claims 5.0.0 design layer, in the Ekline Health brand kit (Ink #161B3D, Signal #F25C3B, Bricolage Grotesque +
   DM Sans). Loaded after app.css. Borrowed from the style references as ways of working only, never their colours:
   flat white surfaces on hairline borders (shadcn), a dark product rail and one orange spark per screen marking the
   active place (Brex), pill-shaped controls and confident tight display type (Wise), quiet whitespace (Apple). */
:root {
  --paper: #F5F6FA;          /* page canvas: a whisper of Ink, not grey */
  --surface: #FFFFFF;
  --band: #EEF0F6;           /* muted bands, table heads, hovers */
  --mist: #E8EAF2;
  --line: #E3E5EE;           /* hairline */
  --line-strong: #C9CDDD;
  --muted: #5B6180;
  --slate: #4B5170;
  --ink-2: #232A5C;          /* hover on Ink */
  --ink-deep: #0F1330;       /* rail */
  --signal-wash: #FEEDE8;
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --shadow: 0 1px 2px rgba(22, 27, 61, .05);
  --shadow-lg: 0 24px 60px rgba(22, 27, 61, .16);
  --glass: #fff; --glass-strong: #fff; --glass-line: var(--line);
  --focus: 0 0 0 3px rgba(242, 92, 59, .28);
}
body { background: var(--paper); background-image: none; font-size: 14.5px; letter-spacing: -.003em; }
h1, h2, h3, .display { font-weight: 800; letter-spacing: -.03em; }
h1 { font-size: 30px; line-height: 1.1; margin-bottom: 6px; }
h2 { font-size: 17px; letter-spacing: -.015em; }
.page-head { margin-bottom: 22px; align-items: center; }
.page-head .muted { font-size: 14px; }

/* Surfaces: flat white on a hairline */
.card, .stat { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--line); outline: 0; box-shadow: var(--shadow); border-radius: var(--r); }
.card { padding: 22px; }
.stat { padding: 18px 20px; position: relative; }
.stat .n { font-size: 30px; letter-spacing: -.035em; line-height: 1.1; margin-bottom: 4px; }
.stat .l { font-size: 13px; }

/* Controls: pills */
.btn { border-radius: 999px; padding: 9px 18px; font-weight: 600; letter-spacing: -.005em; box-shadow: none; transition: background .15s, border-color .15s, transform .08s; }
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); box-shadow: none; }
.btn.sm { padding: 6px 13px; }
.btn.light, .btn.ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn.light:hover, .btn.ghost:hover { background: var(--band); border-color: var(--line-strong); color: var(--ink); }
.btn.accent { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn.accent:hover { background: #E04E2E; border-color: #E04E2E; }
.btn.danger:hover { background: #8F1C13; border-color: #8F1C13; }
.btn:focus-visible, .rail-btn:focus-visible, a.nl:focus-visible, .chip:focus-visible { outline: none; box-shadow: var(--focus); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], input[type=datetime-local], input[type=search], input[type=tel], input[type=url], select, textarea {
  background: #fff; border-color: var(--line-strong); border-radius: var(--r-sm); padding: 10px 12px;
}
input:hover, select:hover, textarea:hover { border-color: #AEB3C9; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22, 27, 61, .1); }
input[type=checkbox], input[type=radio] { accent-color: var(--signal); }
label { font-weight: 600; font-size: 13px; }
.chip { border-color: var(--line-strong); }
.chip:hover { background: var(--band); }

/* Tables: quiet heads, hover rows */
th { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); background: transparent; border-bottom: 1px solid var(--line); padding: 10px; }
td { border-bottom: 1px solid var(--line); }
tbody tr:hover td, table tr:hover > td { background: #FAFBFD; }
.pill { font-weight: 600; padding: 3px 10px; }
.pill.warn { background: var(--signal-wash); }

/* Tabs: an orange line under the open tab */
.tabs { background: transparent; padding: 0; gap: 4px; border-radius: 0; border-bottom: 1px solid var(--line); display: flex; backdrop-filter: none; }
.tabs a, .tabs button.tab { border-radius: 0; padding: 10px 12px 11px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; }
.tabs a.on, .tabs button.tab.on { background: none; box-shadow: none; color: var(--ink); border-bottom-color: var(--signal); }
.tabs a:hover { color: var(--ink); text-decoration: none; }

/* Messages */
.flash { backdrop-filter: none; border-radius: var(--r); }
.flash.ok { background: var(--ok-bg); }
.flash.error { background: var(--ess-bg); }
.notice { background: #FFF8EC; }
.verdict { backdrop-filter: none; border-radius: var(--r); }
.verdict.bad { background: var(--ess-bg); } .verdict.good { background: var(--ok-bg); }
.verdict .v { letter-spacing: -.02em; }

/* Shell: the dark rail (product chrome) and a white page list */
.side { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 1px solid var(--line); }
.rail { background: var(--ink-deep); border-right: 0; box-shadow: none; }
.rail-logo { background: transparent; box-shadow: none; }
.rail-logo img { width: 34px; height: 34px; border-radius: 9px; }
.rail-btn { color: #A9AECB; border-radius: 12px; }
.rail-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.rail-btn.on { background: rgba(255, 255, 255, .1); color: #fff; border-color: transparent; box-shadow: inset 3px 0 0 var(--signal); }
.rail-btn.on .ic { color: var(--signal); }
.rail-dot { box-shadow: 0 0 0 2px var(--ink-deep); }
.panel { background: #fff; }
.side .sec { color: #8A8FA8; letter-spacing: .08em; }
.side a.nl { border-radius: 10px; color: var(--slate); font-weight: 500; }
.side a.nl:hover { background: var(--band); color: var(--ink); text-decoration: none; }
.side a.nl.on { background: var(--band); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--signal); }
.side a.nl.on .ic { color: var(--signal); }
.logo-box { box-shadow: none; border-color: var(--line); }
.wallet { background: var(--paper); border-color: var(--line); }
.shell.side-collapsed.peek .side { background: #fff; }
.shell.side-collapsed.peek .panel { background: #fff; backdrop-filter: none; border-right: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.side-toggle, .side-lock { background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.topbar { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.content { padding: 30px 34px 80px; }
.avatar { background: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }

/* Dialogs and the help button */
.dlg { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.dlg::backdrop { background: rgba(15, 19, 48, .45); backdrop-filter: blur(3px); }
.help-fab { background: var(--ink); color: #fff; border-radius: 999px; box-shadow: 0 10px 24px rgba(22, 27, 61, .25); }
.help-fab:hover { background: var(--ink-2); }

/* Progress and the claim tracker keep Ink with the one orange spark on the current step */
.progress, .bar { background: var(--band); }
.tracker .st::before { border-color: var(--line-strong); }

@media (max-width: 760px) {
  h1 { font-size: 25px; }
  .content { padding: 20px 16px 70px; }
  .card { padding: 18px; }
  .stat .n { font-size: 24px; }
}
.tracker .st { display: block; background: none; border-radius: 0; padding: 26px 0 0; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.tracker .st.cur { color: var(--ink); font-weight: 700; }

/* 5.1.0: small glass "?" help button, movable */
.help-fab { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 50%;
  background: rgba(255, 255, 255, .5); color: var(--ink); border: 1px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 8px 24px rgba(22, 27, 61, .18), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(22, 27, 61, .06);
  cursor: grab; touch-action: none; user-select: none; transition: transform .15s, box-shadow .15s, background .15s; }
.help-fab .q { font: 800 21px/1 'Bricolage Grotesque', sans-serif; letter-spacing: 0; }
.help-fab:hover { background: rgba(255, 255, 255, .78); transform: scale(1.06); }
.help-fab.dragging { cursor: grabbing; transform: scale(1.12); box-shadow: 0 16px 40px rgba(22, 27, 61, .28), inset 0 1px 0 #fff; transition: none; }
.help-fab .rail-dot { top: 2px; right: 2px; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 640px) { .help-fab { padding: 0; } }
body:has(.help-fab) .idle-timer { right: 72px; bottom: 22px; }
.ann-details { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--paper); border: 1px dashed var(--line-strong); font-size: 13.5px; }
.ann-details h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.ann-details ul { margin: 0 0 8px; padding-left: 18px; } .ann-details li { margin-bottom: 6px; }
.nl-lock { display: inline-grid; place-items: center; margin-left: auto; color: var(--muted); }
.nl-lock svg { width: 13px; height: 13px; }
.side a.nl .nl-lock { margin-left: auto; }
.addon.want { outline: 2px solid var(--signal); outline-offset: 2px; scroll-margin-top: 90px; }

/* 5.3.0: report library and Download history */
.rep-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rep-card { display: flex; gap: 14px; align-items: flex-start; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.rep-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(22, 27, 61, .08); text-decoration: none; }
.rep-card b { display: block; margin-bottom: 4px; font-size: 15px; }
.rep-card .small { display: block; }
.rep-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--signal-wash); color: var(--signal); }
.rep-ic .ic { width: 20px; height: 20px; }
.rep-fmt { display: flex; gap: 6px; margin-top: 8px; }
.dl-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; }
.dl-btn svg { width: 17px; height: 17px; }
.dl-btn:hover { background: var(--ink-2); }
.dl-btn.off { background: var(--band); color: #A9AECB; cursor: not-allowed; pointer-events: auto; }
tr.mine > td:first-child { box-shadow: inset 3px 0 0 var(--signal); }

/* 5.5.0: the 30-minute sign-out timer is a ring around the "?" help button */
.help-fab { overflow: visible; }
.help-fab .idle-ring { position: absolute; inset: -6px; pointer-events: none; }
.help-fab .idle-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.help-fab .idle-ring .trk { stroke: rgba(22, 27, 61, .1); }
.help-fab .idle-ring .arc { stroke: var(--ink); opacity: .55; transition: stroke-dashoffset 1s linear, stroke .3s, opacity .3s; }
.help-fab.idle-soon .idle-ring .arc { stroke: var(--signal); opacity: 1; }
.help-fab.idle-soon { animation: idle-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .help-fab.idle-soon { animation: none; } .help-fab .idle-ring .arc { transition: none; } }