/* ============================================================
   Cleaner loans, as drawn (session 383, mh-loans-mockups-v1: 01 Loans, 02 New loan, 03 One loan, 06 Payroll week, 08 Settings > Payroll).
   Daniel, 24 October 2026: "I need to build out a tool that builds in LOANS into our Payroll." The brief: "Their inline styles are the
   specification." Every value below is the drawings' own (sizes, weights, colours, radii, paddings, gaps, shadows). Every rule sits under
   one wrapper, .lon (or .lo-pw on the payroll week, .lo-st in Settings), and every class carries the lo- prefix, so nothing else in the
   Hub changes. The drawings' top bar, stripe and left column were context only: the Hub keeps its own (with Payroll > Weeks and Loans).
   ============================================================ */

body:has(#page > .lon){ background:#f2f4f5 }
.lon, .lo-pw, .lo-st{ font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif; color:#4d545a; font-size:14px; line-height:1.45; font-weight:450;
  -webkit-font-smoothing:antialiased }
.lon{ max-width:1320px; margin:-10px auto -8px; display:flex; flex-direction:column; gap:22px; min-width:0 }
.lon.lo-g20{ gap:20px }
.lon *, .lo-pw *, .lo-st *{ box-sizing:border-box }
.lon a, .lo-pw a, .lo-st a{ color:#1d6e77; text-decoration:none }
.lon a:hover, .lo-pw a:hover, .lo-st a:hover{ text-decoration:underline; color:#144d54 }
.lon button, .lo-pw button, .lo-st button{ font-family:inherit; cursor:pointer }
.lon :focus-visible, .lo-pw :focus-visible, .lo-st :focus-visible{ outline:3px solid #6fd5d4; outline-offset:2px }

/* the page title, the back link */
.lon .lo-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap }
.lon .lo-tt{ display:flex; flex-direction:column; gap:4px }
.lon .lo-h1{ margin:0; font-size:36px; font-weight:800; letter-spacing:-.035em; line-height:1.05; color:#16181a }
.lon .lo-back{ font-size:13px; font-weight:600 }
.lon .lo-titlerow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }

/* the one yellow button on each screen, and the grey one */
.lo-y{ background:linear-gradient(#ffd13a,#f5c21c); color:#16181a !important; font-weight:700; font-size:14px; border:0; border-radius:10px; padding:12px 18px;
  box-shadow:0 6px 16px rgba(217,106,24,.28); display:inline-flex; align-items:center; gap:8px; text-decoration:none !important; min-height:44px }
.lo-y:hover{ filter:brightness(1.03); box-shadow:0 8px 20px rgba(217,106,24,.34) }
.lo-y:disabled{ opacity:.55; cursor:default; filter:none }
.lo-g{ background:#e9ecee; color:#16181a; border:0; border-radius:10px; padding:12px 16px; font-weight:600; font-size:14px; min-height:44px; display:inline-flex; align-items:center; gap:8px }
.lo-g:hover{ background:#dfe3e6 }
.lo-g.lo-sm{ padding:7px 12px; font-size:12.5px; min-height:32px }
.lo-g:disabled{ opacity:.55; cursor:default }

/* the dark hero panel */
.lon .lo-hero{ background:linear-gradient(135deg,#144d54,#0e363b); border-radius:18px; box-shadow:0 10px 30px rgba(14,54,59,.22); padding:24px 28px; color:#ffffff;
  display:flex; flex-wrap:wrap; gap:40px; align-items:center }
.lon .lo-hero.lo-col{ flex-direction:column; align-items:stretch; gap:18px }
.lon .lo-hrow{ display:flex; flex-wrap:wrap; gap:40px; align-items:flex-end }
.lon .lo-hbig{ display:flex; flex-direction:column; gap:6px; min-width:220px }
.lon .lo-hn{ font-size:64px; font-weight:800; letter-spacing:-.04em; line-height:.9 }
.lon .lo-hl{ font-size:12.5px; font-weight:600; color:#6fd5d4 }
.lon .lo-hstats{ display:flex; gap:36px; flex-wrap:wrap }
.lon .lo-hs{ display:flex; flex-direction:column }
.lon .lo-hsv{ font-size:28px; font-weight:800; letter-spacing:-.03em }
.lon .lo-hsv.lo-yel{ color:#ffd13a }
.lon .lo-hsl{ font-size:12.5px; font-weight:600; opacity:.85 }
.lon .lo-hbar{ height:10px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden }
.lon .lo-hbar > div{ height:100%; background:#6fd5d4 }

/* cards, pills, tabs */
.lo-card{ background:#ffffff; border-radius:14px; box-shadow:0 4px 14px rgba(14,54,59,.08) }
.lo-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap }
.lo-pill.lo-grn{ background:#e2f4ee; color:#08513f }
.lo-pill.lo-yel{ background:#fff5cc; color:#7a5312 }
.lo-pill.lo-org{ background:#ffe8d6; color:#9a4a0e }
.lo-pill.lo-grey{ background:#e9ecee; color:#4d545a }
.lo-pill.lo-teal{ background:#dceff0; color:#144d54 }
.lon .lo-tabs{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; gap:12px; flex-wrap:wrap }
.lon .lo-tabset{ display:flex; gap:4px; flex-wrap:wrap }
.lon .lo-tab{ padding:8px 14px; border-radius:999px; font-weight:600; font-size:13.5px; color:#4d545a; background:transparent; border:0; min-height:36px }
.lon .lo-tab:hover{ background:#e9ecee }
.lon .lo-tab.lo-on{ background:#144d54; color:#ffffff }
.lo-note{ font-size:11.5px; color:#6b747b }
.lo-hint{ font-size:12.5px; color:#6b747b }

/* tables */
.lo-tw{ overflow-x:auto }
.lo-t{ border-collapse:collapse; width:100%; table-layout:auto; border-spacing:0 }
/* the Hub's own table rules (tokens.css: uppercase sticky headers, fixed columns, cells cut with an ellipsis) do not apply here: the drawing's do */
.lo-t th{ text-transform:none; letter-spacing:normal; position:static; box-shadow:none; cursor:default; user-select:auto; white-space:nowrap; line-height:1.45 }
.lo-t td{ white-space:normal; overflow:visible; text-overflow:clip; max-width:none; border-bottom:0; font-size:14px; line-height:1.45 }
.lo-t th:first-child, .lo-t td:first-child{ padding-left:16px }
.lo-t th:last-child, .lo-t td:last-child{ padding-right:16px }
.lon .lo-t.lo-wide{ min-width:900px }
.lo-t th{ background:#e9ecee; text-align:left; font-size:12.5px; font-weight:600; color:#4d545a; padding:10px 16px }
.lo-t td{ padding:14px 16px; border-top:1px solid #dfe3e6; color:#4d545a; vertical-align:middle }
.lo-t tbody tr:hover td{ background:#e9ecee }
.lo-t.lo-tsm th{ padding:10px 14px }
.lo-t.lo-tsm td{ padding:11px 14px; font-size:13.5px }
.lo-t tr.lo-hl td{ background:#fff5cc }
.lo-t td.lo-b{ font-weight:700; color:#16181a }
.lon .lo-nm{ font-weight:700; color:#16181a !important; font-size:15px }
.lon .lo-sub{ font-size:13px; color:#6b747b }
.lo-bar{ height:8px; border-radius:999px; background:#e9ecee; overflow:hidden; width:120px }
.lo-bar > div{ height:100%; background:#1d6e77 }
.lo-bar > div.lo-done{ background:#2e9c7c }
.lo-barcell{ display:flex; align-items:center; gap:10px }
.lo-barcell span{ font-size:13px }
.lon .lo-yline{ background:#fff5cc; color:#7a5312; border-radius:14px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-weight:600 }

/* New loan: the form and the preview */
.lon .lo-two{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start }
.lon .lo-form{ flex:1 1 440px; min-width:0; padding:24px; display:flex; flex-direction:column; gap:20px }
.lon .lo-prev{ flex:1 1 380px; min-width:0; padding:24px; display:flex; flex-direction:column; gap:16px }
.lon #loPrevBody{ display:flex; flex-direction:column; gap:16px }
.lon .lo-fl{ display:flex; flex-direction:column; gap:6px }
.lon .lo-fl2{ display:flex; gap:14px; flex-wrap:wrap }
.lon .lo-fl2 > .lo-fl{ flex:1 1 180px }
.lo-lb{ font-size:12.5px; font-weight:600; color:#16181a }
.lo-in{ font-family:inherit; font-size:15px; font-weight:500; color:#16181a; border:1px solid #c9d0d4; border-radius:6px; padding:11px 12px; background-color:#ffffff; width:100%; min-height:44px }
.lo-in:focus{ border-color:#1d6e77; outline:none; box-shadow:0 0 0 3px rgba(111,213,212,.45) }
textarea.lo-in{ resize:vertical }
.lon .lo-sched{ background:#dceff0; border-radius:10px; padding:12px 14px; display:flex; gap:10px; align-items:center; color:#144d54; font-weight:600 }
.lo-seg{ display:flex; background:#e9ecee; border-radius:999px; padding:4px; gap:2px; flex-wrap:wrap }
.lo-sg{ flex:1 1 auto; border:0; background:transparent; border-radius:999px; padding:8px 12px; font-size:13.5px; font-weight:600; color:#4d545a; min-height:36px }
.lo-sg:hover{ background:#dfe3e6 }
.lo-sg.lo-on{ background:#144d54; color:#ffffff }
.lon .lo-rules{ border-top:1px solid #dfe3e6; padding-top:16px; display:flex; flex-direction:column; gap:6px }
.lon .lo-rules > div{ font-size:13.5px }
.lon .lo-rules b{ color:#16181a }
.lon .lo-acts{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.lo-ico{ width:40px; height:40px; border-radius:10px; background:#144d54; display:flex; align-items:center; justify-content:center; flex:0 0 40px }
.lo-ct{ font-size:17px; font-weight:700; color:#16181a }
.lo-chead{ display:flex; gap:12px; align-items:center }
.lon .lo-says{ background:#f2f4f5; border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:8px; font-size:13.5px }
.lon .lo-says b{ color:#16181a }
.lon .lo-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid #dfe3e6; font-size:13.5px }
.lon .lo-row.lo-last{ font-weight:700; color:#16181a }
.lo-err{ color:#a3271b; font-size:13px; font-weight:600 }
.lo-ok{ color:#08513f; font-size:13px; font-weight:600 }

/* One loan: the side cards */
.lon .lo-side{ flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:22px }
.lon .lo-pay{ flex:1 1 440px; min-width:0; overflow:hidden }
.lon .lo-sig{ padding:18px; display:flex; flex-direction:column; gap:12px }
.lon .lo-sigbox{ background:#f2f4f5; border-radius:10px; padding:12px 14px }
.lon .lo-sigbox img{ display:block; max-width:220px; height:56px; object-fit:contain; object-position:left center }
.lon .lo-signame{ border-top:1px solid #c9d0d4; margin-top:4px; padding-top:6px; font-weight:600; color:#16181a }
.lon .lo-links{ display:flex; gap:16px; flex-wrap:wrap }
.lon .lo-links a, .lon .lo-links button.lo-lnk{ font-weight:600 }
.lo-lnk{ border:0; background:none; padding:0; color:#1d6e77; font-weight:600; font-size:inherit; text-decoration:underline; text-underline-offset:2px }
.lo-lnk:hover{ color:#144d54 }
.lon .lo-change{ padding:6px 18px 8px }
.lon .lo-act{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-top:1px solid #dfe3e6; font-weight:600; color:#16181a; background:transparent;
  border-left:0; border-right:0; border-bottom:0; font-size:14px; text-align:left; width:100%; min-height:56px }
.lon .lo-act:hover{ background:#e9ecee }
.lon .lo-act:disabled{ opacity:.5; cursor:default; background:transparent }
.lon .lo-act small{ display:block; font-weight:450; font-size:12.5px; color:#6b747b }
.lo-aico{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 32px }
.lon .lo-actform{ padding:4px 4px 14px 48px; display:flex; flex-direction:column; gap:10px }
.lon .lo-hist{ padding:16px 18px }
.lon .lo-ev{ display:flex; gap:12px; padding:10px 0; border-top:1px solid #dfe3e6; font-size:13.5px }
.lon .lo-ev > span:first-child{ flex:0 0 92px; color:#6b747b }
.lon .lo-ev b{ color:#16181a; font-weight:600 }
.lon .lo-why{ background:#f2f4f5; border-radius:10px; padding:10px 14px; font-size:13.5px }

/* Payroll > Weeks: the loan stat cards, the column, the stub card (06) */
.lo-pw.lo-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px }
.lo-pw .lo-stat{ background:#ffffff; border-radius:14px; box-shadow:0 4px 14px rgba(14,54,59,.08); padding:16px; display:flex; flex-direction:column; gap:4px }
.lo-pw .lo-sv{ font-size:32px; font-weight:800; letter-spacing:-.035em; line-height:1; color:#16181a }
.lo-pw .lo-sv.lo-orgv{ color:#d96a18 }
.lo-pw .lo-sl{ font-size:12.5px; font-weight:600 }
.lo-cell{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.lo-cell .lo-amt{ font-weight:700; color:#16181a }
.lo-cell .lo-of{ font-size:12.5px; color:#6b747b }
.lo-sw{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#4d545a; position:relative; cursor:pointer; min-height:32px }
.lo-sw input{ position:absolute; opacity:0; width:1px; height:1px }
.lo-sw .lo-swt{ width:34px; height:20px; border-radius:999px; background:#c9d0d4; position:relative; display:inline-block; transition:background .15s }
.lo-sw .lo-swt::after{ content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:999px; background:#ffffff; transition:left .15s }
.lo-sw input:checked + .lo-swt{ background:#1d6e77 }
.lo-sw input:checked + .lo-swt::after{ left:16px }
.lo-sw input:focus-visible + .lo-swt{ outline:3px solid #6fd5d4; outline-offset:2px }
.lo-sw input:disabled + .lo-swt{ opacity:.5 }
.lo-stub{ background:#ffffff; border-radius:14px; box-shadow:0 4px 14px rgba(14,54,59,.08); padding:18px; display:flex; flex-direction:column; gap:4px; font-family:'Inter','Segoe UI',system-ui,sans-serif; color:#4d545a; font-size:14px }
.lo-stub .lo-sl2{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:14px; border-top:1px solid #dfe3e6 }
.lo-stub .lo-sl2.lo-nob{ border-top:0 }
.lo-stub .lo-sl2.lo-strong{ font-weight:700; color:#16181a }
.lo-stub .lo-sl2.lo-tot{ border-top:2px solid #16181a; font-weight:800; color:#16181a; font-size:17px }
.lo-stub .lo-r{ text-align:right; font-variant-numeric:tabular-nums }
.lo-stub .lo-left{ background:#f2f4f5; border-radius:10px; padding:12px 14px; margin-top:10px; display:flex; flex-direction:column; gap:6px }
.lo-stub .lo-left .lo-bar{ width:auto; background:#dfe3e6 }

/* Settings > Payroll: the loan rules as sentences (08) */
.lo-st .lo-rule{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; border-top:1px solid #dfe3e6; flex-wrap:wrap }
.lo-st .lo-rs{ display:flex; flex-direction:column; gap:6px; flex:1 1 420px }
.lo-st .lo-rt{ font-size:15px; color:#16181a }
.lo-st .lo-val{ display:inline-flex; align-items:center; gap:6px; border:1px solid #c9d0d4; border-radius:6px; padding:4px 10px; font-weight:700; color:#16181a; background:#ffffff; font-size:15px; min-height:32px }
.lo-st button.lo-val:hover{ border-color:#1d6e77 }
.lo-st .lo-valin{ width:110px; font:inherit; font-weight:700; font-size:15px; border:1px solid #1d6e77; border-radius:6px; padding:4px 10px; box-shadow:0 0 0 3px rgba(111,213,212,.45) }
.lo-st .lo-tags{ display:flex; gap:6px; flex-wrap:wrap }
.lo-st .lo-tag{ display:inline-flex; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:#dceff0; color:#144d54 }
.lo-st .lo-before{ background:#fff5cc; color:#7a5312; border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600 }

/* the left column's sub-menu (Payroll's Weeks, Loans, Bonuses): session 408 moved its look to shell.css, with the menu groups */

/* phone (390 wide): the drawings' own flex wraps; the hero number at 52px as on her app */
@media (max-width:600px){
  .lon .lo-h1{ font-size:30px }
  .lon .lo-hn{ font-size:52px }
  .lon .lo-hero{ padding:20px; gap:24px }
  .lon .lo-hbig{ min-width:0 }
  .lon .lo-hstats{ gap:20px }
  .lon .lo-form, .lon .lo-prev{ padding:18px }
  .lon .lo-actform{ padding-left:4px }
  /* every touch target 44px or more on a phone */
  .lon .lo-tab, .lo-g.lo-sm, .lo-sw, .lon .lo-back, .lo-lnk, .lo-sg{ min-height:44px }
  .lon .lo-back, .lo-lnk{ display:inline-flex; align-items:center }
}

/* ---------- Session 414: Edit loan, Cancel loan, Record a payment already taken, Undo, the Loan card on her Staff page ---------- */
/* Edit loan: the Hub's secondary button, white with a teal outline (as Refresh is: lists.css .lp-btn), at the top right of the hero. */
.lo-w{ background:#ffffff; color:#144d54; border:1.5px solid #1d6e77; border-radius:10px; padding:10px 14px; font-weight:700; font-size:14px; min-height:44px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer }
.lo-w:hover{ background:#f2f4f5 }
.lon .lo-hero.lo-col{ position:relative }
.lon .lo-heroedit{ position:absolute; top:20px; right:24px }
.lon .lo-edit{ padding:20px; display:flex; flex-direction:column; gap:14px; border:2px solid #6fd5d4 }
.lon .lo-terms{ border-top:1px solid #dfe3e6; padding-top:14px; display:flex; flex-direction:column; gap:10px }
.lon .lo-ask{ background:#fff5cc; border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; color:#16181a; font-size:13.5px; margin-top:8px }
.lo-g.lo-danger{ color:#9a2a1a }
.lon .lo-undo{ margin-left:6px; font-size:13px }
/* her Staff page */
.lon.lo-staff{ max-width:none; margin:0; gap:0 }
.lon .lo-scard{ padding:18px; display:flex; flex-direction:column; gap:14px }
.lon .lo-scard .lo-hero{ padding:20px 24px }
.lon .lo-scard .lo-heroedit{ display:none }
.lon .lo-none{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:14px; color:#16181a; font-weight:600 }
.lon .lo-past{ display:flex; flex-direction:column; gap:2px; border-top:1px solid #dfe3e6; padding-top:10px }
.lon a.lo-prow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 4px; border-top:1px solid #eef0f1; color:#16181a; text-decoration:underline; text-decoration-color:#c9d0d4; text-underline-offset:3px }
.lon a.lo-prow:hover{ background:#f2f4f5 }
@media (max-width:600px){
  .lon .lo-heroedit{ position:static; align-self:flex-start }
  .lo-w{ min-height:44px }
  .lon .lo-scard .lo-hn{ font-size:52px }
}