/* ============================================================================
   INTAPP WORKPLACE HUB - main.css
   The Atlas preview design system, applied site-wide. Every live class name is
   preserved and restyled; the preview's own classes (.tile, .list-row, .card-h,
   .b-*, .input ...) are added so pages can adopt the preview markup directly.
   Intapp brand + Manrope. Light default, dark + system themes.
   ============================================================================ */

@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-regular.woff') format('woff');}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-medium.woff') format('woff');}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-semibold.woff') format('woff');}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-bold.woff') format('woff');}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ---- TOKENS: light (preview palette). Live gray + navy tokens aliased below. ---- */
:root{
  --blue:#207CEC; --blue-shade:#0B4184; --navy:#010A18; --blue-light:#E8F1FD;
  --green:#12A67F; --green-light:#E1F5EE; --orange:#BA7517; --orange-light:#FAEEDA;
  --red:#DA0045; --red-light:#FCEBEB; --purple:#3C3489; --purple-light:#EEEDFE; --teal:#00BFED;
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#F7F8FA; --nav-bg:#010A18;
  --text:#010A18; --text-muted:#5B6675; --text-faint:#9AA7B8;
  --border:#E4E9F0; --border-strong:#DDE3EC;
  --chip-blue-bg:#E8F1FD;--chip-blue-fg:#0B4184; --chip-green-bg:#E1F5EE;--chip-green-fg:#0F6E56;
  --chip-orange-bg:#FAEEDA;--chip-orange-fg:#854F0B; --chip-gray-bg:#EDF1F6;--chip-gray-fg:#5B6675;
  --chip-purple-bg:#EEEDFE;--chip-purple-fg:#3C3489; --chip-red-bg:#FCEBEB;--chip-red-fg:#B4123C;
  --hint-bg:#EEEDFE;--hint-fg:#3C3489; --msg-req:#E8F1FD;--msg-note:#F7F8FA;
  --gray-50:#F7F8FA;--gray-100:#EDF1F6;--gray-200:#E4E9F0;--gray-300:#DDE3EC;
  --gray-400:#9AA7B8;--gray-600:#5B6675;--gray-700:#3C4453;--gray-800:#010A18;
  --white:#FFFFFF;--tint1:#A6CAF7;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --gradient:linear-gradient(120deg,#207CEC,#22ECCF);
  --radius-sm:6px;--radius-md:8px;--radius-lg:12px;
  --shadow:0 1px 6px rgba(1,10,24,.06);--shadow-sm:0 1px 3px rgba(1,10,24,.06);
  --shadow-md:0 6px 20px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.05);
}
/* ---- TOKENS: dark ---- */
[data-theme="dark"]{
  --bg:#020814;--surface:#0A1424;--surface-2:#0E1B30;--nav-bg:#020814;
  --text:#EAF1FB;--text-muted:#93A2B8;--text-faint:#5C6B82;--border:#1A2942;--border-strong:#243352;
  --blue-light:#12233F;
  --chip-blue-bg:#12233F;--chip-blue-fg:#6FB0FA;--chip-green-bg:#0E2A24;--chip-green-fg:#4FD5B2;
  --chip-orange-bg:#2E2211;--chip-orange-fg:#E0A44F;--chip-gray-bg:#14233C;--chip-gray-fg:#93A2B8;
  --chip-purple-bg:#1C1A3A;--chip-purple-fg:#A9A2F0;--chip-red-bg:#2E1119;--chip-red-fg:#F06A8E;
  --hint-bg:#1C1A3A;--hint-fg:#A9A2F0;--msg-req:#12233F;--msg-note:#0E1B30;
  --gray-50:#020814;--gray-100:#14233C;--gray-200:#1A2942;--gray-300:#243352;
  --gray-400:#5C6B82;--gray-600:#93A2B8;--gray-700:#B9C6D8;--gray-800:#EAF1FB;
  --white:#0A1424;--navy:#EAF1FB;--blue-shade:#6FB0FA;
  --shadow:0 1px 6px rgba(0,0,0,.4);--shadow-sm:0 1px 3px rgba(0,0,0,.4);--shadow-md:0 6px 20px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  [data-theme="system"]{
    --bg:#020814;--surface:#0A1424;--surface-2:#0E1B30;--nav-bg:#020814;
    --text:#EAF1FB;--text-muted:#93A2B8;--text-faint:#5C6B82;--border:#1A2942;--border-strong:#243352;--blue-light:#12233F;
    --chip-blue-bg:#12233F;--chip-blue-fg:#6FB0FA;--chip-green-bg:#0E2A24;--chip-green-fg:#4FD5B2;
    --chip-orange-bg:#2E2211;--chip-orange-fg:#E0A44F;--chip-gray-bg:#14233C;--chip-gray-fg:#93A2B8;
    --chip-purple-bg:#1C1A3A;--chip-purple-fg:#A9A2F0;--chip-red-bg:#2E1119;--chip-red-fg:#F06A8E;
    --hint-bg:#1C1A3A;--hint-fg:#A9A2F0;--msg-req:#12233F;--msg-note:#0E1B30;
    --gray-50:#020814;--gray-100:#14233C;--gray-200:#1A2942;--gray-300:#243352;--gray-400:#5C6B82;
    --gray-600:#93A2B8;--gray-700:#B9C6D8;--gray-800:#EAF1FB;--white:#0A1424;--navy:#EAF1FB;--blue-shade:#6FB0FA;
    --shadow:0 1px 6px rgba(0,0,0,.4);--shadow-md:0 6px 20px rgba(0,0,0,.5);
  }
}

/* ---- BASE ---- */
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:var(--blue);text-decoration:none;} a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
button{cursor:pointer;font-family:var(--font);}
input,select,textarea{font-family:var(--font);}
h1{font-size:clamp(22px,4vw,28px);font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.2;}
h2{font-size:clamp(18px,3vw,22px);font-weight:600;color:var(--text);letter-spacing:-.01em;}
h3{font-size:16px;font-weight:600;color:var(--text);}
p{margin-bottom:0;}
.muted,.text-muted{color:var(--text-muted);font-size:14px;}
.sm,.text-sm{font-size:13px;} .text-xs{font-size:12px;} .text-center{text-align:center;} .required{color:var(--red);}
.between{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}

/* ---- NAV ---- */
.nav{background:var(--nav-bg);position:sticky;top:0;z-index:100;}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav-brand,.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.nav-brand img,.brand img{height:22px;width:auto;}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--gradient);}
.brand-name{color:#fff;font-weight:600;font-size:15px;}
.nav-brand-label,.brand-label{color:rgba(255,255,255,.6);font-size:13px;border-left:1px solid rgba(255,255,255,.2);padding-left:10px;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{color:rgba(255,255,255,.78);padding:7px 12px;border-radius:7px;font-size:13px;font-weight:500;transition:background .15s;}
.nav-links a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none;}
.nav-tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;}
.nav-tabs button{background:transparent;border:none;color:rgba(255,255,255,.7);font-size:13px;padding:7px 12px;border-radius:7px;cursor:pointer;font-family:inherit;}
.nav-tabs button:hover{background:rgba(255,255,255,.08);color:#fff;} .nav-tabs button.active{background:rgba(255,255,255,.14);color:#fff;}
.nav-user{display:flex;align-items:center;gap:10px;}
.nav-avatar,.avatar{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.nav-toggle{display:none;background:none;border:none;color:#fff;padding:8px;}

/* ---- CONTAINERS ---- */
.container,.wrap{max-width:1080px;margin:0 auto;padding:28px 20px;}
.container-md{max-width:760px;margin:0 auto;padding:28px 20px;}
.page-hero{margin-bottom:20px;} .page-content{padding:0;}
.page-actions,.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.screen{display:none;} .screen.active{display:block;}

/* ---- CARDS ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;color:var(--text);box-shadow:var(--shadow);}
.card-header,.card-h{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center;color:var(--text);}
.card-body,.card-b{padding:18px;}
a.card,.card-link{display:block;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;}
a.card:hover,.card-link:hover{border-color:var(--blue);box-shadow:var(--shadow-md);text-decoration:none;}

/* ---- TILES ---- */
.grid{display:grid;gap:14px;}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;text-align:center;cursor:pointer;transition:border-color .15s,box-shadow .15s;color:var(--text);text-decoration:none;display:block;}
.tile:hover{border-color:var(--blue);box-shadow:var(--shadow-md);text-decoration:none;}
.tile .ic-wrap{display:flex;justify-content:center;margin-bottom:8px;}
.tile .ic,.tile .icn{font-size:26px;width:26px;height:26px;color:var(--blue);}
.tile .t{font-weight:600;margin-top:2px;font-size:14px;color:var(--text);}
.tile .d{color:var(--text-muted);font-size:12px;margin-top:2px;}
.ic-wrap .icn{width:26px;height:26px;color:var(--blue);}

/* ---- BUTTONS ---- */
.btn{border:1px solid var(--border-strong);background:var(--surface);color:var(--text);padding:9px 16px;border-radius:var(--radius-md);font-size:14px;cursor:pointer;font-family:inherit;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;transition:background .15s,border-color .15s;white-space:nowrap;line-height:1.4;}
.btn:hover{background:var(--surface-2);text-decoration:none;} .btn:active{transform:scale(.98);}
.btn-p,.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-p:hover,.btn-primary:hover{background:var(--blue-shade);}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-success{background:var(--green);color:#fff;border-color:var(--green);}
.btn-danger{background:var(--surface);color:var(--red);border-color:var(--border-strong);}
.btn-outline{background:var(--surface);color:var(--text);border-color:var(--border-strong);}
.btn-outline:hover{background:var(--surface-2);}
.btn-ghost{background:transparent;color:var(--blue);border-color:transparent;} .btn-ghost:hover{background:var(--blue-light);}
.btn-lg{padding:12px 20px;font-size:15px;} .btn-sm{padding:6px 12px;font-size:13px;}
.btn-block{display:flex;width:100%;} .btn-icon{padding:8px;width:36px;height:36px;}

/* ---- BADGES / CHIPS ---- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;}
.badge .dot,.dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.badge-blue,.b-blue,.badge-main{background:var(--chip-blue-bg);color:var(--chip-blue-fg);}
.badge-green,.b-green{background:var(--chip-green-bg);color:var(--chip-green-fg);}
.badge-orange,.b-orange{background:var(--chip-orange-bg);color:var(--chip-orange-fg);}
.badge-gray,.b-gray{background:var(--chip-gray-bg);color:var(--chip-gray-fg);}
.badge-purple,.b-purple{background:var(--chip-purple-bg);color:var(--chip-purple-fg);}
.badge-red,.b-red{background:var(--chip-red-bg);color:var(--chip-red-fg);}
.badge-navy{background:var(--navy);color:#fff;}
.badge-tag{background:var(--chip-gray-bg);color:var(--chip-gray-fg);border-radius:6px;padding:3px 9px;font-weight:500;}

/* ---- LIST ROWS ---- */
.list-row,.order-list-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);cursor:pointer;}
.list-row:last-child,.order-list-row:last-child{border-bottom:none;}
.list-row:hover,.order-list-row:hover{background:var(--surface-2);}
.row-name,.order-name{font-weight:500;font-size:14px;color:var(--text);}
.row-sub,.order-meal{color:var(--text-muted);font-size:12.5px;margin-top:1px;}
.conf,.order-conf{font-family:ui-monospace,'SF Mono',monospace;font-size:12px;color:var(--text-faint);}

/* ---- FORMS ---- */
.form-group,.field{margin-bottom:14px;}
.form-row{display:flex;gap:12px;flex-wrap:wrap;}
.form-label,.label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--text);}
.form-control,.input,.textarea,.select{display:block;width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:10px 12px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;}
.form-control{height:40px;} .textarea,textarea.form-control{min-height:90px;resize:vertical;height:auto;}
.form-control:hover,.input:hover,.select:hover,.textarea:hover{border-color:var(--gray-400);}
.form-control:focus,.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(32,124,236,.14);}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:5px;display:flex;align-items:center;gap:4px;}

/* ---- ALERTS / HINTS / MESSAGES ---- */
.alert{padding:11px 14px;border-radius:var(--radius-md);font-size:13px;display:flex;gap:8px;align-items:flex-start;margin-bottom:16px;}
.alert-success{background:var(--chip-green-bg);color:var(--chip-green-fg);}
.alert-error{background:var(--chip-red-bg);color:var(--chip-red-fg);}
.alert-warning{background:var(--chip-orange-bg);color:var(--chip-orange-fg);}
.alert-info,.a-info{background:var(--chip-blue-bg);color:var(--chip-blue-fg);}
.a-purple{background:var(--hint-bg);color:var(--hint-fg);}
.hint{background:var(--hint-bg);border-radius:var(--radius-lg);padding:12px 14px;font-size:12px;color:var(--hint-fg);line-height:1.5;}
.msg{border-radius:10px;padding:11px 13px;margin-bottom:10px;font-size:13px;}
.msg-req{background:var(--msg-req);} .msg-note{background:var(--msg-note);border-left:3px solid var(--border-strong);}
.tabs,.day-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.tabs button,.day-tab{background:none;border:none;padding:9px 4px;margin-right:14px;font-size:14px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;}
.tabs button.active,.day-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:500;}

/* ---- DATA TABLE ---- */
/* Wide tables scroll horizontally instead of crushing the last columns (e.g. the
   row action buttons) off-screen on mobile. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.data-table{width:100%;border-collapse:collapse;font-size:14px;}
.data-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:500;padding:10px 12px;border-bottom:2px solid var(--border);}
.data-table td{padding:11px 12px;border-bottom:1px solid var(--border);color:var(--text);}
.data-table tr:hover td{background:var(--surface-2);}

/* ---- LUNCH MODULE ---- */
.meal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .15s;}
.meal-card:hover{border-color:var(--blue);}
.meal-card-img{width:100%;height:140px;object-fit:cover;}
.meal-card-img-placeholder{width:100%;height:140px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;color:var(--blue);}
.meal-card-body{padding:14px;}
.meal-card-name,.meal-name{font-size:14px;font-weight:600;color:var(--text);}
.meal-card-desc,.meal-desc{font-size:13px;color:var(--text-muted);margin-top:4px;line-height:1.5;}
.meal-card-badge{font-size:11px;font-weight:500;background:var(--chip-blue-bg);color:var(--chip-blue-fg);padding:2px 8px;border-radius:999px;}
.meal-tag,.meal-tags .meal-tag,.order-diet{font-size:11px;background:var(--chip-gray-bg);color:var(--chip-gray-fg);padding:3px 9px;border-radius:6px;}
.meal-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.meal-option{border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;display:flex;align-items:center;gap:12px;}
.meal-photo{width:48px;height:48px;border-radius:var(--radius-md);object-fit:cover;}
.order-avatar{width:34px;height:34px;border-radius:50%;background:var(--chip-blue-bg);color:var(--chip-blue-fg);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;}

/* ---- MODAL ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(1,10,24,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);max-width:480px;width:100%;box-shadow:var(--shadow-md);overflow:hidden;}

/* ---- ADMIN LAYOUT ---- */
.admin-layout{display:flex;min-height:100vh;}
.admin-sidebar{width:230px;background:var(--nav-bg);flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.admin-main{flex:1;min-width:0;padding:28px;background:var(--bg);}
.admin-page-title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.admin-page-subtitle{font-size:14px;color:var(--text-muted);margin-top:2px;}
.drawer-link{display:flex;align-items:center;gap:10px;padding:10px 16px;color:rgba(255,255,255,.8);font-size:14px;font-weight:500;border-radius:var(--radius-md);margin:2px 10px;transition:background .15s;}
.drawer-link:hover,.drawer-link.active{background:rgba(255,255,255,.10);color:#fff;text-decoration:none;}
.drawer-section-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.4);padding:14px 16px 6px;}
.footer{text-align:center;padding:28px 20px;color:var(--text-faint);font-size:12px;}
.divider{height:1px;background:var(--border);border:none;margin:16px 0;}

/* ---- GRIDS & UTILITIES ---- */
.grid-2,.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.grid-3,.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grid-4,.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.flex{display:flex;} .flex-wrap{flex-wrap:wrap;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-4{gap:4px;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mb-2{margin-bottom:8px;} .mb-4,.mb4{margin-bottom:16px;} .mb-6,.mb6{margin-bottom:24px;} .mb-8{margin-bottom:32px;}
.mt-4,.mt4{margin-top:16px;} .mt-6{margin-top:24px;} .p-0{padding:0;} .hidden{display:none;}

/* ---- A11Y FLOOR ---- */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;}
.btn:focus-visible,a.card:focus-visible,.tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* ---- RESPONSIVE ---- */
@media (max-width:900px){.grid-4,.g4{grid-template-columns:repeat(2,1fr);}.grid-3,.g3{grid-template-columns:repeat(2,1fr);}.admin-sidebar{display:none;}}
@media (max-width:640px){.nav-links{display:none;}.nav-toggle{display:block;}.grid-2,.grid-3,.grid-4,.g2,.g3,.g4{grid-template-columns:1fr;}.container,.wrap,.container-md{padding:18px 16px;}
  /* Wide tables tagged .cols-collapse become stacked cards on phones: each row is
     a card showing the first two columns (e.g. name, email) and the trailing
     action buttons, with the middle detail columns hidden. No horizontal scroll. */
  .cols-collapse{min-width:0;}
  .cols-collapse thead{display:none;}
  .cols-collapse, .cols-collapse tbody, .cols-collapse tr, .cols-collapse td{display:block;width:auto;}
  .cols-collapse tr{border:1px solid var(--border);border-radius:12px;margin:0 0 10px;padding:10px 14px;background:var(--surface);}
  .cols-collapse td{border:none !important;padding:3px 0;}
  .cols-collapse td:first-child{font-size:16px;}
  .cols-collapse td:nth-child(n+3):nth-last-child(n+2){display:none;}
  .cols-collapse td:last-child{padding-top:10px;}
  .cols-collapse td:last-child > div{justify-content:flex-start !important;}
  .cols-collapse td:last-child .btn{font-size:18px;padding:8px 12px;}
  /* Modal cards must scroll when taller than the phone viewport, so the Save
     button at the bottom stays reachable. */
  .modal-scroll{max-height:88vh;overflow-y:auto;}
}
/* Append to main.css — aligns inline brand icons with nav labels + list items */
.nav-links a{display:inline-flex;align-items:center;gap:6px;}
.nav-links a .ic{opacity:.9;}
.nav-links a:hover .ic{opacity:1;}
.ic{vertical-align:middle;}
/* icon + text pairing anywhere (buttons, headings) */
.btn .ic,.card-h .ic,.list-row .ic{flex-shrink:0;}
.meal-card-img-placeholder .ic{color:var(--blue);opacity:.5;}
/* Append to main.css — kill the <li> bullets in the lunch nav + toggle alignment */
.nav-links{list-style:none;margin:0;padding:0;}
.nav-links li{list-style:none;}
.nav-links li::marker{content:none;}
#themeToggle{margin:0 4px;}

/* ============================================================
 * Site-wide tooltips — add data-tip="Helpful text" to ANY element.
 * Optional data-tip-pos="bottom|left|right" (default: top). Accessible:
 * shows on hover AND keyboard focus. Theme-aware.
 * ==========================================================*/
[data-tip]{position:relative;}
[data-tip]:focus{outline:none;}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  background:var(--nav-bg,#010A18);color:#fff;font-size:12px;font-weight:600;line-height:1.35;
  letter-spacing:.01em;padding:7px 10px;border-radius:8px;white-space:normal;width:max-content;max-width:240px;
  text-align:center;box-shadow:0 8px 22px rgba(1,10,24,.28);opacity:0;pointer-events:none;z-index:1000;
  transition:opacity .14s ease, transform .14s ease;
}
[data-tip]::before{
  content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%) translateY(4px);
  border:5px solid transparent;border-top-color:var(--nav-bg,#010A18);opacity:0;pointer-events:none;z-index:1000;
  transition:opacity .14s ease, transform .14s ease;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after,[data-tip]:hover::before,[data-tip]:focus-visible::before{
  opacity:1;transform:translateX(-50%) translateY(0);
}
[data-tip-pos="bottom"]::after{bottom:auto;top:calc(100% + 8px);}
[data-tip-pos="bottom"]::before{bottom:auto;top:calc(100% + 3px);border-top-color:transparent;border-bottom-color:var(--nav-bg,#010A18);}
/* small info glyph you can drop next to labels: <span class="tip-i" data-tip="...">i</span> */
.tip-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:var(--blue,#207CEC);color:#fff;font-size:10px;font-weight:800;font-style:normal;cursor:help;vertical-align:middle;margin-left:5px;}
/* inline instructions / how-to callout */
.howto{background:var(--blue-light,#E8F1FD);border:1px solid color-mix(in srgb, var(--blue,#207CEC) 25%, transparent);
  border-radius:12px;padding:14px 16px;margin-bottom:16px;color:var(--text);font-size:13.5px;line-height:1.6;}
.howto b{color:var(--blue-shade,#0B4184);} .howto ol{margin:6px 0 0;padding-left:20px;} .howto li{margin-bottom:3px;}