/* ==========================================================================
   Labor Intelligence Works — brand tokens
   Values are taken from the supplied brand style guide and the vector logo
   suite. Nothing here is invented, and nothing about the brand is defined
   anywhere else in the front end.
   ========================================================================== */
:root {
  --liw-navy:        #0A1E3D;  /* Deep Navy — primary */
  --liw-royal:       #1E4FAE;  /* Royal Blue — primary */
  --liw-light-blue:  #5B8FD6;  /* Light Blue — secondary */
  --liw-sky:         #E6EFFA;  /* Sky Blue — background */
  --liw-charcoal:    #1F2937;  /* Charcoal — text/body */
  --liw-gray:        #F4F6F9;  /* Light Gray — surfaces */
  --liw-muted:       #667085;
  --liw-border:      #D8E1EE;
  --liw-davidos:     #6FA6E6;

  --liw-heading-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --liw-body-font:    "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --liw-space:   4px;
  --liw-radius:  10px;
  --liw-rule:    1px solid var(--liw-border);
}

/* ---- workspace shell --------------------------------------------------- */
.liw-workspace { font-family: var(--liw-body-font); color: var(--liw-charcoal); }
.liw-workspace h2, .liw-workspace h3, .liw-workspace h4 {
  font-family: var(--liw-heading-font); color: var(--liw-navy); margin: 0 0 6px;
}
.liw-section { margin-top: 18px; }
.liw-section > h3 {
  font-size: 1.02em; letter-spacing: .01em;
  padding-bottom: 6px; border-bottom: 2px solid var(--liw-royal);
}

/* One card treatment, used everywhere, so panels stop competing. */
.liw-card {
  background: #fff; border: var(--liw-rule); border-radius: var(--liw-radius);
  padding: 14px 16px;
}
.liw-card + .liw-card { margin-top: 10px; }
.liw-panel { background: var(--liw-gray); border-radius: var(--liw-radius); padding: 14px 16px; }
.liw-accent { background: var(--liw-sky); border-left: 3px solid var(--liw-royal); }

.liw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 22px; }
.liw-field { font-size: .93em; }
.liw-field b { display: block; font-size: .78em; text-transform: uppercase;
  letter-spacing: .06em; color: var(--liw-muted); font-weight: 600; margin-bottom: 2px; }

.liw-muted { color: var(--liw-muted); font-size: .9em; }
.liw-status {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--liw-sky); color: var(--liw-navy);
  font-size: .8em; font-weight: 600;
}
.liw-status.attention { background: #FFF4E5; color: #8A5A00; }

/* ---- tabs: one row, no competing buttons ------------------------------- */
.liw-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: var(--liw-rule); margin-bottom: 12px; }
.liw-tab {
  border: 0; background: none; cursor: pointer; font: inherit;
  padding: 8px 12px; color: var(--liw-muted); border-bottom: 2px solid transparent;
}
.liw-tab:hover { color: var(--liw-navy); }
.liw-tab[aria-selected="true"] { color: var(--liw-navy); font-weight: 600; border-bottom-color: var(--liw-royal); }

/* ---- chronology, following the supplied case-timeline template --------- */
.liw-event { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px;
  padding: 10px 12px; border-bottom: var(--liw-rule); align-items: start; }
.liw-event:nth-child(even) { background: var(--liw-sky); }
.liw-event .date { font-weight: 600; color: var(--liw-navy); font-size: .92em; }
.liw-event .title { font-weight: 600; }
.liw-event .meta { color: var(--liw-muted); font-size: .85em; margin-top: 2px; }
.liw-event.hidden-event { opacity: .5; }

/* ---- disclosure -------------------------------------------------------- */
.liw-disclosure { margin-top: 16px; border-top: var(--liw-rule); padding-top: 10px; }
.liw-disclosure > summary { cursor: pointer; font-family: var(--liw-heading-font);
  color: var(--liw-navy); font-weight: 600; }
.liw-disclosure > summary + * { margin-top: 8px; }

/* ---- brand chrome ------------------------------------------------------ */
.liw-brandbar { display: flex; align-items: center; gap: 10px; }
.liw-brandbar img { height: 34px; }
.liw-poweredby { height: 20px; opacity: .85; }
.liw-footnote { color: var(--liw-muted); font-size: .8em; }

/* ---- components inherit the workspace ------------------------------------
   The Case Workspace is the master. These were scoped to the signed-in surface,
   which left the public pages on the marketing originals - centred cards under a
   drop shadow, uppercase 900-weight buttons in 44px slabs - so the same product
   drew a card two different ways depending on which side of sign-in you stood.
   They are global now. What stays scoped below is DENSITY, not language: a
   marketing page may breathe more, but it does not get its own components. */
.card {
  padding: 18px; text-align: left; box-shadow: none;
  border: var(--liw-rule); border-radius: var(--liw-radius); }
.card h3 { font-family: var(--liw-heading-font); color: var(--liw-navy); }
/* Cards that exist to be clicked keep a visible affordance without the shadow. */
.card[onclick]:hover { border-color: var(--liw-light-blue); }
.cards .card .icon, .feature .icon {
  color: var(--liw-royal); font-style: normal; opacity: .95; }

/* Controls follow the workspace's .btn-s: 12.5px sentence case on a token
   border, not a landing-page slab. Touch targets return at phone widths, where
   a 44px hit area is the point rather than an inherited accident. */
.btn {
  text-transform: none; font-weight: 600; font-size: 13px;
  padding: 9px 15px; min-height: 38px; border-radius: 8px;
  border-color: var(--liw-border); color: var(--liw-navy); }
.btn:hover { border-color: var(--liw-light-blue); }
.btn.primary { background: var(--liw-royal); border-color: var(--liw-royal); color: #fff; }
.btn.primary:hover { background: #1B47A0; border-color: #1B47A0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* On navy, an outline button reads in white rather than navy-on-navy. */
.hero .btn, .topbar .btn {
  border-color: rgba(255,255,255,.34); color: #fff; background: transparent; }
.hero .btn:hover, .topbar .btn:hover {
  border-color: #fff; background: rgba(255,255,255,.08); }
.hero .btn.primary, .topbar .btn.primary {
  background: var(--liw-royal); border-color: var(--liw-royal); color: #fff; }
@media (max-width: 720px) { .btn { min-height: 44px; padding: 11px 16px; } }

input, select, textarea {
  border-radius: 8px; border-color: var(--liw-border); padding: 9px 11px; font-size: 14px; }
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--liw-light-blue); }

/* Notices and supporting text move onto the tokens, so a status message reads
   the same everywhere instead of carrying its own blues. */
.ll-note {
  background: var(--liw-sky); border: var(--liw-rule);
  border-radius: var(--liw-radius); padding: 14px; margin-top: 14px; }
.ll-muted { color: var(--liw-muted); }

/* ---- density: the one thing that still differs --------------------------
   A front door may breathe more than a tool. Everything above is shared; only
   spacing and heading scale tighten once you are signed in. */
:root[data-liw-auth="in"] .section { padding: 28px 0; }
:root[data-liw-auth="in"] .page-title {
  font-size: 26px; text-transform: none; font-weight: 700;
  letter-spacing: -.01em; color: var(--liw-navy); }
:root[data-liw-auth="in"] .lede {
  font-size: 15px; color: var(--liw-muted); margin: 0 0 18px; max-width: 70ch; }
/* Public headings lose the uppercase 900 marketing treatment but keep their
   scale - the workspace's restraint, at a front-door size. */
.page-title { text-transform: none; font-weight: 700; letter-spacing: -.02em;
  color: var(--liw-navy); }
.lede { color: var(--liw-muted); }

/* ---- brand chrome: one header system, two scales ------------------------
   The Case Workspace looked sharper than everything else for reasons that are
   measurable, not matters of taste. Its sidebar is flat navy with a barely
   perceptible vertical shift, carries no shadow, and sets a 68px mark against a
   typographic lockup. The shared topbar instead ran a three-stop saturated blue
   gradient (#00336f -> #0065bd -> #004a95) under a drop shadow, with a 132px
   brand line and a 104px logo - a landing-page masthead standing on top of an
   application.

   Signed-in only, via the data-liw-auth hook. Public pages keep the masthead. */
   Shared, not scoped: the palette is the brand, so the public masthead and the
   application chrome now draw from the same navy. Only SIZE distinguishes them
   below, which is the actual difference between a front door and a workspace. */
.topbar {
  background: var(--liw-navy);
  background-image: linear-gradient(180deg, #0A1E3D 0%, #0A1E3D 62%, #0C2549 100%);
  box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.10); }

/* Nav: the workspace's quiet pill, not an uppercase 800-weight rule that
   underlines on hover. Same resting colour, hover wash and inset active bar on
   both sides of sign-in, so the interaction language never changes. */
.nav-line {
  height: auto; gap: 4px; font-size: 13.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0; padding-bottom: 8px; flex-wrap: wrap; }
.nav-line a {
  color: #D6E1F0; opacity: 1; padding: 7px 11px; border-radius: 7px; text-decoration: none; }
.nav-line a:hover {
  background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-line a.active {
  background: linear-gradient(90deg, rgba(30,79,174,.55), rgba(30,79,174,.28));
  color: #fff; font-weight: 600; text-decoration: none;
  box-shadow: inset 3px 0 0 var(--liw-light-blue); }
.mobile-menu a { text-transform: none; letter-spacing: 0; }

/* Lockup scale is the one deliberate difference. Public reads as an entrance,
   the application as a tool, and the workspace sidebar remains the reference.
   The old 104px logo in a 132px brand line was a masthead, not a header. */
/* Scaled ~1.30 again, from 94/75. The lockup is 1500x330 in its viewBox -
   4.545:1 - so height drives width and the cap has to lead it: 122px renders
   555px wide, past the previous 520px cap, and a cap that binds first clips the
   height instead of growing it. 620px binds at 136px, clear of every size here.
   At the 1160px container that leaves ~600px beside the wordmark for the Menu
   button, so nothing crowds. Padding grows with the lockup. */
.brand-line { min-height: 0; padding: 24px 0; }
.brand-logo { height: 122px; max-width: 620px; }
:root[data-liw-auth="in"] .brand-line { padding: 19px 0; }
:root[data-liw-auth="in"] .brand-logo { height: 98px; }
@media (max-width: 720px) {
  /* 82vw was measured against the viewport, but the lockup does not get the
     viewport: .brand-line is a flex row it shares with the Menu button, inside a
     .wrap that is already 100% - 36px. At 320px that left ~202px of usable room
     while 82vw asked for 262px, so the row overflowed and the wordmark was cut
     off. styles.css solves this with calc(100vw - 120px); this uses the same
     shape with more headroom, since the button here sits beside a wider lockup.
     Desktop is untouched - this block only applies at 720px and below. */
  .brand-line { padding: 14px 0; gap: 12px; }
  .brand-line > a { min-width: 0; }        /* flex items default to min-width:auto */
  .brand-logo { height: 82px; max-width: calc(100vw - 140px); }
  :root[data-liw-auth="in"] .brand-line { padding: 12px 0; }
  :root[data-liw-auth="in"] .brand-logo { height: 68px; }
}

/* The hero stays the strongest section on the site - it is the front door, and
   shrinking it to application proportions would be the wrong correction. It is
   only tightened: the 460px box was sized against a 132px masthead that no
   longer exists, so the whole entrance sat lower than it needed to. Padding and
   box move together, because the padding exists to fill the box. */
.hero .wrap { min-height: 396px; }
@media (max-width: 900px) { .hero .wrap { min-height: 348px; } }

/* The hero ran its own two-layer brochure gradient (#0a2b54 -> #071426 under a
   blue wash), which is the last place the front door announced itself as a
   different product. It now sits on the same navy as the workspace sidebar,
   with the same faint vertical shift. Size is unchanged - this is the entrance
   and it should stay large; only the palette stops disagreeing. */
.hero {
  background: var(--liw-navy);
  background-image: linear-gradient(180deg, #0A1E3D 0%, #0A1E3D 58%, #0C2549 100%);
  color: #fff; }
.hero h1 { color: #fff; letter-spacing: -.02em; }
.hero p { color: #C7D6EA; }
.hero .lede { color: #C7D6EA; }

/* ---- davidos answer body ------------------------------------------------
   A bold line on its own is rendered as a heading, so an answer arrives with
   scannable structure instead of one undifferentiated column. */
.md > h4 { margin: 18px 0 6px; font-family: var(--liw-heading-font);
  color: var(--liw-navy); font-size: .95rem; letter-spacing: .01em; }
.md > h4:first-child { margin-top: 0; }

/* Section weight. What was decided should not look the same as the workings,
   and Sources should not shout. Nothing is hidden - risks and recommendations
   are never collapsed - the hierarchy just makes the answer findable. */
.md .md-sec { display: flex; align-items: baseline; gap: 8px; }
.md .md-sec::before { content: ""; width: 3px; align-self: stretch; border-radius: 2px; }
.md .md-primary { font-size: 1.02rem; color: var(--liw-navy); }
.md .md-primary::before { background: var(--liw-royal); }
.md .md-risk { color: #8A5B00; }
.md .md-risk::before { background: #E0A526; }
.md .md-support::before { background: var(--liw-light-blue); }
.md .md-muted { color: var(--liw-muted); font-size: .86rem;
  text-transform: uppercase; letter-spacing: .06em; }
.md .md-muted::before { background: var(--liw-border); }
/* Sources tend to be long and are read last; they stay visible but recede. */
.md .md-muted ~ ul, .md .md-muted ~ ol, .md .md-muted ~ p {
  font-size: .88rem; color: var(--liw-muted); }
.md > hr { border: 0; border-top: var(--liw-rule); margin: 16px 0; }
.md blockquote { margin: 10px 0; padding: 6px 0 6px 12px;
  border-left: 3px solid var(--liw-light-blue); color: var(--liw-muted); }
.md code { background: var(--liw-gray); border: var(--liw-rule);
  border-radius: 4px; padding: 1px 5px; font-size: .88em; }
.md-tablewrap { overflow-x: auto; margin: 12px 0; }
.md-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.md-table th, .md-table td { border: var(--liw-rule); padding: 7px 10px; text-align: left; vertical-align: top; }
.md-table th { background: var(--liw-gray); font-family: var(--liw-heading-font);
  color: var(--liw-navy); font-weight: 600; }

/* ---- academy: one player, one lesson list ------------------------------
   Built on the workspace tokens rather than a second set of Academy-only
   colours, so a purchased course reads as part of the platform instead of a
   video page bolted onto it. The list is deliberately dense: a learner should
   see the whole course without scrolling. */
.ac-player { margin: 0 0 18px; }
.ac-player video { width: 100%; border-radius: var(--liw-radius); background: #000; display: block; }
.ac-player > h3 { margin: 0 0 8px; font-family: var(--liw-heading-font); color: var(--liw-navy); }

.ac-lessons-h { margin: 0 0 8px; color: var(--liw-muted);
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

.ac-lessons { display: flex; flex-direction: column;
  border: var(--liw-rule); border-radius: var(--liw-radius); overflow: hidden; background: #fff; }

.ac-lesson { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; background: none; border: 0; border-bottom: var(--liw-rule);
  font: inherit; text-align: left; cursor: pointer; color: var(--liw-charcoal); }
.ac-lesson:last-child { border-bottom: 0; }
.ac-lesson:hover { background: var(--liw-gray); }
.ac-lesson.is-active { background: var(--liw-sky); box-shadow: inset 3px 0 0 var(--liw-royal); }

.ac-lesson-n { flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--liw-gray); border: var(--liw-rule);
  font-size: .78rem; font-weight: 600; color: var(--liw-muted); }
.ac-lesson.is-active .ac-lesson-n { background: var(--liw-royal); border-color: var(--liw-royal); color: #fff; }

.ac-lesson-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-lesson-title { font-family: var(--liw-heading-font); font-weight: 600; color: var(--liw-navy); }
.ac-lesson-desc { color: var(--liw-muted); font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-lesson-go { flex: 0 0 auto; color: var(--liw-light-blue); font-size: .8rem; }
.ac-lesson.is-active .ac-lesson-go { color: var(--liw-royal); }