/* ═══════════════════════════════════════════════════
   TL_Intranet_Shared.css
   Single source of truth for all shared components.
   Every size derives from --fs so the +/- control
   scales the entire UI — body, labels, badges,
   headings, cards, nav — uniformly.
   Common Linked CSS Structure Designed by Jonathan Davidar
═══════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root{
  --fs: 16px;

  /* Type scale — all relative to --fs */
  --t-2xs: calc(var(--fs) * 0.625);   /* ~10px  nav brand, badges, sec-labels, box-labels */
  --t-xs:  calc(var(--fs) * 0.75);    /* ~12px  note-auth, hints, footer, meta counts */
  --t-sm:  calc(var(--fs) * 0.8125);  /* ~13px  note body, secondary body, box text */
  --t-base: var(--fs);                 /*  16px  primary body text */
  --t-md:  calc(var(--fs) * 1.0625);  /* ~17px  nav links, card descriptions */
  --t-lg:  calc(var(--fs) * 1.25);    /* ~20px  card titles, tool titles */
  --t-xl:  calc(var(--fs) * 1.375);   /* ~22px  page h1, detail headings */
  --t-2xl: calc(var(--fs) * 1.875);   /* ~30px  hero h1 */

  /* Spacing scale — relative to --fs */
  --sp-1: calc(var(--fs) * 0.25);     /*  ~4px */
  --sp-2: calc(var(--fs) * 0.5);      /*  ~8px */
  --sp-3: calc(var(--fs) * 0.75);     /* ~12px */
  --sp-4: var(--fs);                   /* ~16px */
  --sp-5: calc(var(--fs) * 1.5);      /* ~24px */
  --sp-6: calc(var(--fs) * 2);        /* ~32px */
  --sp-8: calc(var(--fs) * 3);        /* ~48px */

  /* Colour tokens */
  --c-text:          #111;
  --c-text-secondary:#444;
  --c-text-muted:    #888;
  --c-text-faint:    #bbb;
  --c-text-ghost:    #ccc;
  --c-border:        #e0e0e0;
  --c-border-light:  #f0f0f0;
  --c-border-faint:  #f5f5f5;
  --c-bg:            #f5f5f5;
  --c-surface:       #fff;
  --c-surface-raised:#fafafa;

  /* Accent */
  --c-blue-dark:     #1e40af;
  --c-sky:           #0ea5e9;
  --c-sky-bg:        #e0f2fe;
  --c-sky-border:    #7dd3fc;
}

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0}

/* ── BASE ── */
body{
  font-family:'Segoe UI',system-ui,sans-serif;
  font-size:var(--fs);
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.55;
}

/* ── NAV ── */
.nav{
  background:var(--c-surface);
  border-bottom:2px solid var(--c-border);
  padding:var(--sp-2) var(--sp-8);
  display:flex;align-items:center;
  gap:var(--sp-4);
  flex-wrap:nowrap;overflow-x:auto;
  min-height:calc(var(--fs) * 3.25);
  position:sticky;top:0;z-index:100;
}
.nav-brand{
  font-size:var(--t-2xs);
  font-weight:500;text-transform:uppercase;letter-spacing:.5px;
  color:var(--c-text-faint);white-space:nowrap;flex-shrink:0;
}
.nav a{
  font-size:var(--t-md);
  font-weight:500;color:#444;text-decoration:none;
  padding:var(--sp-1) var(--sp-3);
  border-radius:4px;transition:background .15s;
  white-space:nowrap;flex-shrink:0;
}
.nav a:hover{background:var(--c-border);color:var(--c-text);box-shadow:inset 0 0 0 1px #ccc}
.nav-cur{
  font-size:var(--t-md);
  font-weight:600;color:var(--c-text);
  padding:var(--sp-1) var(--sp-3);
  border-radius:4px;background:#e8e8e8;
  white-space:nowrap;flex-shrink:0;
}
.nav-right{margin-left:auto}

/* ── PAGE HEADER BAR ── */
.hdr{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  padding:var(--sp-3) var(--sp-8);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;
}
.hdr-l h1{
  font-size:var(--t-xl);
  font-weight:600;color:var(--c-text);
}
.hdr-l p{
  font-size:var(--t-sm);
  color:var(--c-text-muted);margin-top:var(--sp-1);
}
.hdr-r{display:flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap}

/* ── FONT SIZE CONTROLS ── */
.fl{font-size:var(--t-xs);color:var(--c-text-faint);margin-right:var(--sp-1)}
.fb{
  background:var(--c-surface-raised);
  border:1px solid var(--c-border);color:var(--c-text-secondary);
  border-radius:4px;
  width:calc(var(--fs) * 1.75);height:calc(var(--fs) * 1.75);
  font-size:var(--t-sm);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.fb:hover{background:#eee}

/* ── FILTER TOOLBAR — shared across database/timeline/library ── */
.fg{display:flex;flex-direction:column;gap:var(--sp-1)}
.fg label{
  font-size:var(--t-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;color:var(--c-text-faint);
}
.fg input,
.fg select{
  font-size:var(--t-sm);font-family:inherit;
  padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--c-border);border-radius:4px;
  background:var(--c-surface);color:var(--c-text);outline:none;
}
.fg input:focus,
.fg select:focus{border-color:#555}

/* ── RESULT COUNT STRIP ── */
.st{
  font-size:var(--t-sm);
  color:var(--c-text-faint);white-space:nowrap;padding-bottom:var(--sp-1);
}
.st b{color:var(--c-text);font-weight:600}

/* ── BADGES ── */
.badge{
  font-size:var(--t-2xs);font-weight:600;
  padding:var(--sp-1) calc(var(--fs) * 0.4375);
  border-radius:3px;border:1px solid transparent;
  display:inline-block;
}
.badge-ns{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.badge-ip{background:#eff6ff;color:#3b82f6;border-color:#bfdbfe}
.badge-done{background:#dcfce7;color:#166534;border-color:#86efac}

/* ── SECTION LABEL ── */
.sec-lbl{
  font-size:var(--t-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--c-text-ghost);
  display:block;margin-bottom:var(--sp-2);
}

/* ── NOTE CARD ── */
.note-card{
  background:var(--c-surface);
  border:1px solid #efefef;border-radius:6px;
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--t-sm);color:var(--c-text-secondary);
  line-height:1.55;font-weight:400;
}
.note-auth{
  font-size:var(--t-xs);
  color:var(--c-text-faint);margin-top:var(--sp-1);font-weight:400;
}
.star{color:#f59e0b;font-size:var(--t-xs)}

/* ── CONTENT BOXES ── */
.box-y{background:#fffcf0;border:1px solid #fde68a;border-radius:7px;padding:var(--sp-3) calc(var(--fs) * 0.9375);margin-bottom:var(--sp-2)}
.box-b{background:#f8fbff;border:1px solid #c7dff7;border-radius:7px;padding:var(--sp-3) calc(var(--fs) * 0.9375);margin-bottom:var(--sp-2)}
.box-p{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:7px;padding:var(--sp-3) calc(var(--fs) * 0.9375);margin-bottom:var(--sp-2)}
.box-lbl{
  font-size:var(--t-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--c-text-faint);display:block;margin-bottom:var(--sp-1);
}
.box-txt{
  font-size:var(--t-sm);
  color:var(--c-text-secondary);line-height:1.6;font-weight:400;
}

/* ── PILLS (shared tag / chip pattern) ── */
.pill{
  display:inline-flex;align-items:center;
  font-size:var(--t-2xs);font-weight:500;
  padding:var(--sp-1) calc(var(--fs) * 0.5625);
  border-radius:calc(var(--fs) * 0.75);
  border:1px solid var(--c-border);
  background:var(--c-surface-raised);
  color:var(--c-text-muted);
  white-space:nowrap;
}
.pill:hover{background:var(--c-border-light);color:var(--c-text)}

/* ── SHARED BUTTONS ── */
.btn{
  font-family:inherit;
  font-size:var(--t-xs);font-weight:500;
  padding:var(--sp-1) var(--sp-3);
  border-radius:5px;border:1px solid var(--c-border);
  background:var(--c-surface);color:var(--c-text-secondary);
  cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-1);
}
.btn:hover{background:var(--c-surface-raised)}
.btn-primary{background:var(--c-text);color:var(--c-surface);border-color:var(--c-text)}
.btn-primary:hover{background:#333}
.btn-sky:hover{background:#f0f8ff;border-color:var(--c-sky-border);color:#0369a1}

/* ── ASK AI BAR (shared pattern) ── */
.ask-bar{
  display:flex;gap:var(--sp-2);align-items:center;
  background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:8px;
  padding:var(--sp-2) var(--sp-4);
}
.ask-bar-icon{font-size:var(--t-base);flex-shrink:0;color:var(--c-text-faint)}
.ask-bar input{
  flex:1;font-family:inherit;font-size:var(--t-sm);
  border:none;outline:none;color:var(--c-text-secondary);background:transparent;
}
.ask-bar input::placeholder{color:var(--c-text-ghost)}
.ask-bar-hint{font-size:var(--t-xs);color:var(--c-text-ghost);white-space:nowrap}

/* ── FOOTER ── */
footer{
  padding:var(--sp-4) var(--sp-8);
  border-top:1px solid #ebebeb;
  font-size:var(--t-xs);color:var(--c-text-ghost);margin-top:var(--sp-3);
}

/* ── RESPONSIVE ── */
@media(max-width:800px){
  .nav{padding:var(--sp-2) var(--sp-4)}
  .hdr{padding:var(--sp-2) var(--sp-4)}
  footer{padding:var(--sp-4)}
}