/* DOL Master Module — shared mockup styles */
:root{
  --ink:#1a2233; --muted:#5b6779; --faint:#8b95a6;
  --line:#e6eaf1; --bg:#f5f7fc; --card:#ffffff;
  --brand:#3531c4; --brand-soft:#eef2ff; --brand-line:#d6dcff;
  --pos:#1a9f6a; --amber:#c98a1a; --neg:#d1495b;
  /* follower composition */
  --c-hcp:#3531c4; --c-patient:#2bb0a6; --c-other:#9aa4b2; --c-bot:#e07a5f;
  --shadow:0 1px 2px rgba(20,34,51,.05), 0 6px 20px rgba(20,34,51,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.45}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:28px 22px 72px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.brandmark{display:flex;align-items:center;gap:10px}
.brandmark .dot{width:12px;height:12px;border-radius:3px;background:var(--brand)}
.brandmark b{font-size:15px;letter-spacing:.01em}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:999px;padding:3px 10px}
/* 1.5x (Joe, 2026-09-14): 26px -> 39px. Changed HERE rather than on the finder
   alone, because .h1 is the module's page heading and six pages use it - a
   heading that is one size on the finder and another on the lookup reads as a
   fault rather than as a choice. */
.h1{font-size:39px;margin:2px 0 6px;line-height:1.15}
.sub{color:var(--muted);font-size:15px;margin:0 0 22px}

/* controls */
.controls{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:22px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
select,button.btn{font:inherit;border-radius:9px;border:1px solid var(--line);padding:9px 12px;background:#fff}
select{min-width:190px}
button.btn{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600;cursor:pointer}
button.btn:hover{filter:brightness(1.06)}
.count{color:var(--muted);font-size:13px;margin-left:auto}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.dol-card{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:start;padding:16px 18px;margin-bottom:12px}
.rank{font-weight:800;color:var(--faint);font-size:15px;text-align:center;padding-top:2px}
.dol-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dol-name{font-size:17px;font-weight:700}
.dol-cred{color:var(--muted);font-size:13.5px}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.chip{font-size:12px;color:var(--ink);background:#f1f4fa;border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.chip .k{color:var(--muted)}
.fit{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:96px}
.fit .score{font-size:24px;font-weight:800;line-height:1}
.fit .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.view{font-size:13px;font-weight:600}

/* tier */
.tier{font-size:11px;font-weight:700;text-transform:capitalize;border-radius:999px;padding:2px 9px;border:1px solid transparent}
.tier.leading{background:#eef0ff;color:#2f2ba8;border-color:#d4d8ff}
.tier.established{background:#e8f1ff;color:#1f5fbf;border-color:#cfe0fb}
.tier.emerging{background:#e6f7f4;color:#12776c;border-color:#c7ebe5}
.tier.none{background:#f0f2f6;color:#6b7688;border-color:#e2e7ef}

/* activity dot */
.act{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.act .d{width:8px;height:8px;border-radius:50%}
.act.active .d{background:var(--pos)} .act.inactive .d{background:var(--c-other)}

/* sentiment */
.sent.positive{color:var(--pos)} .sent.mixed,.sent.neutral{color:var(--amber)} .sent.negative{color:var(--neg)}

/* profile */
.pf-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 22px;margin-bottom:16px}
.pf-title{font-size:24px;font-weight:800;margin:0 0 3px}
.pf-meta{color:var(--muted);font-size:14px}
.pf-handles{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pf-handle{font-size:12.5px;background:#f1f4fa;border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.pf-handle b{color:var(--ink)} .pf-handle span{color:var(--muted)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 15px;box-shadow:var(--shadow)}
.tile .t-lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.tile .t-val{font-size:22px;font-weight:800;margin-top:5px}
.tile .t-sub{font-size:12px;color:var(--muted);margin-top:2px}
.up{color:var(--pos)} .down{color:var(--neg)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.panel{padding:16px 18px;margin-bottom:16px}
.panel h3{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 14px}

/* stacked composition bar */
.stack{display:flex;height:16px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.stack i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.legend .l{display:flex;align-items:center;gap:7px;font-size:13px}
.legend .sw{width:11px;height:11px;border-radius:3px}
.legend .pct{color:var(--muted);margin-left:2px}

/* proportion rows (geo) */
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:130px 1fr 42px;gap:10px;align-items:center;font-size:13.5px}
.track{height:9px;background:#eef1f7;border-radius:6px;overflow:hidden}
.track i{display:block;height:100%;background:var(--brand);border-radius:6px}
.row .v{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;background:var(--brand-soft);border:1px solid var(--brand-line);color:#2f2ba8;border-radius:999px;padding:4px 11px}

.note{font-size:12.5px;color:var(--faint);margin-top:18px}
.back{font-size:13px;font-weight:600;display:inline-block;margin-bottom:14px}

/* Topbar gear (Joe, 2026-09-12). Built by _settings.js, which also moves the
   badge into `.topright` - `.topbar` is space-between, so a third direct child
   would spread all three across the width instead of pinning these two right. */
.topright{display:flex;align-items:center;gap:10px}
.gearwrap{position:relative;display:inline-flex}
.gear{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;
  font-size:16px;line-height:1;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:8px;
  cursor:pointer;transition:color .12s,border-color .12s,box-shadow .12s;
}
.gear:hover{color:var(--brand);border-color:var(--brand-line);box-shadow:0 2px 8px rgba(20,20,60,.08)}
.gear:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Anchored to the gear and pulled back inside the page - it sits at the right
   edge, so a panel opening leftward is the only one that fits. */
.gearpanel{
  position:absolute;top:36px;right:0;z-index:40;
  /* Wide enough for the products-by-area editor: an area picklist, a scrolling
     checklist and an add row. At 230px the product names wrapped mid-word. */
  min-width:300px;padding:14px 16px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(20,20,60,.14);
  font-size:13px;text-align:left;
}
.gearpanel p{margin:6px 0 0;color:var(--muted)}

/* The Novo master logo lock-up, top right of every page (Joe, 2026-09-12),
   replacing the OneWorld text badge that sat there.

   THE ASSET IS UNMODIFIED. `Novo_Lockup Logo_Deep Blue_RGB.pdf` from
   O:\Knowledge\Novo Brand\Core VisID Elements\Logo\RGB, rendered to SVG with
   its viewBox cropped to the artwork - cropping empty page margin, not the
   logo. The brand guidelines list six misuses and five of them are things not
   done here: the bull is not separated from the wordmark, not enlarged, not
   outlined, the logo is not recoloured and not flipped.

   Sized by HEIGHT with width auto, so the lock-up keeps its own proportions
   whatever the bar does. */
.novologo{height:26px;width:auto;display:block;flex:0 0 auto}
@media(max-width:560px){.novologo{height:22px}}

/* With the DOL Master Module brandmark gone (Joe, 2026-09-12) the bar has one
   child left, and `space-between` puts a lone child on the LEFT. `margin-left:
   auto` pins the logo and gear right whether or not anything sits beside them,
   so removing or restoring the mark needs no second change here. */
.topright{margin-left:auto}

/* Page headings in Novo Lasting Blue (Joe, 2026-09-12: "head text in NOVO
   blue"). #00008f is the brand value, taken from the Interim Global Brand
   Guidelines 1.2 primary palette - RGB 0.0.143, Pantone 2738 C - and not from a
   color picker held over the logo. The other two primaries there are Novo
   Turquoize #00ffff and Novo White #ffffff. */
.h1{color:#00008f}

/* The master logo as MOTION (Joe, 2026-09-12: "replace the logo with the novo
   animation"). `novo-logo-motion.mp4` from the brand kit's Logo Animation
   folder, 1920x960, 7.3s, used as supplied.

   Taller than the still was, because the animation is 2:1 where the flat
   lock-up is 3.4:1 - the MP4 carries its own margin, so matching on height
   alone would have printed a visibly smaller mark.

   PLAYS ONCE, does not loop. A logo cycling every seven seconds in the corner
   of a working screen is a distraction with no information in it; it plays on
   arrival and then rests. `muted` + `playsinline` are what let it autoplay at
   all - browsers block sound, and iOS otherwise takes any <video> fullscreen.
   `poster` is the still PNG, so anything that will not play the file shows the
   logo rather than a gray rectangle. */
.novologo{height:40px;width:auto;display:block;flex:0 0 auto}
@media(max-width:560px){.novologo{height:30px}}

/* Twice the size, and the white box around it gone (Joe, 2026-09-12).
   An MP4 cannot carry alpha, so the file genuinely has a white background and
   there is no transparent version of it in the kit. `mix-blend-mode: multiply`
   drops white to nothing against a lighter page while leaving the dark blue
   artwork alone - white multiplied by anything IS that thing.
   The alternative was re-encoding to VP9-with-alpha WebM, which needs ffmpeg
   and would mean shipping a re-rendered copy of a brand asset rather than the
   supplied one. */
.novologo{height:80px;mix-blend-mode:multiply}
@media(max-width:560px){.novologo{height:60px}}

/* Logo centered, gear still hard right (Joe, 2026-09-12).
   The two live in one `.topright` group that _settings.js builds, so centring
   the group would have centered the PAIR and dragged the gear in with it. The
   group is stretched full width instead, the logo centers inside it, and the
   gear is lifted out of the flow and pinned to the right edge - so the logo is
   centered on the BAR, not on whatever happens to sit beside it. */
.topbar{margin-bottom:6px}
.topright{margin-left:0;width:100%;justify-content:center;position:relative}
/* THE GEAR'S STACKING CONTEXT, NOT JUST THE PANEL'S Z-INDEX.
   `transform` creates a stacking context, so `.gearpanel { z-index: 40 }` was
   being resolved INSIDE this element - and `.gearwrap` itself entered the page
   at `z-index: auto`, i.e. 0. The finder's sticky column header sits at 5, so it
   painted straight over an open settings panel. Raising the panel would have
   changed nothing; the context it lives in is what has to clear the header. */
.gearwrap{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:60}

/* Doubled again (Joe, 2026-09-12): 80 -> 160. The MP4 is 1920x960, so 160px
   tall is still under half its native height and cannot soften. */
.novologo{height:160px}
@media(max-width:560px){.novologo{height:110px}}
.topbar{margin-bottom:0}

/* Close the gap between the animation and the heading (Joe, 2026-09-12).
   The gap was not padding on the heading - it is inside the MP4. Measured off
   the resting frame, the artwork ends 31.8% above the bottom of the file, which
   at 160px tall is about 51px of empty picture sitting under the mark. Only the
   BOTTOM band is pulled back, so the heading rises to meet the logo and nothing
   else about the bar moves. Safe to overlap: the band is white and the element
   is multiply-blended, and white multiplied by anything is that thing. */
.novologo{margin-bottom:-44px}
.topbar{margin-bottom:0}

/* Gear with no chrome (Joe, 2026-09-12). The white fill, the border and the
   hover shadow were the box - all three go, or removing only the background
   leaves an empty outline where the box used to be. The target stays 30x30, so
   it is no harder to hit than it was; only the paint is gone. */
.gear{background:transparent;border:0;box-shadow:none}
.gear:hover{background:transparent;border:0;box-shadow:none;color:#00008f}


/* THE CHART TOOLTIP (Joe, 2026-09-14: 1.5x, bold, bulleted after the name).
   A native SVG <title> is drawn by the browser and takes no styling at all - no
   size, no weight, no bullets - so the chart stopped using one and draws this
   instead. `pointer-events:none` matters: a tooltip that follows the cursor and
   can be hovered would flicker as it steals its own mouseover. */
.maptip{position:absolute;z-index:30;pointer-events:none;
  background:#fff;border:1px solid #c9cfe4;border-radius:10px;
  padding:11px 18px;box-shadow:0 8px 24px rgba(20,20,60,.16);
  /* BOLD IS THE NAME ONLY (Joe, 2026-09-14). Everything bold is nothing bold -
     six heavy lines gave the eye no way in, and the one line that says WHO this
     is had no more weight than the passage counts. */
  font-size:18px;font-weight:400;line-height:1.4;color:var(--ink);
  /* EVERY LINE ON ONE LINE (Joe, 2026-09-14: "all on 1 line = clean").
     The stance line runs to about 480px at this size, so a max-width was
     wrapping it across two rows. There is no max-width now and nothing wraps -
     the box is as wide as its longest line and no wider. */
  white-space:nowrap}
.maptip-name{margin-bottom:3px;font-weight:700}
/* FLEX, NOT A HANGING INDENT. `padding-left` with a negative `text-indent` puts
   the marker at contentLeft minus the indent - which landed it OUTSIDE the
   tooltip's own padding, sitting on the border. A flex row cannot do that: the
   bullet is a child in the flow and the text is the next child. */
.maptip-li{display:flex;align-items:baseline;gap:9px}
.maptip-li::before{content:'•';color:#00008f;flex:0 0 auto}
/* The score and its rank, right-aligned IN THEIR OWN COLUMN rather than against
   the tooltip's edge (Joe, 2026-09-14: "move the scores much closer to the
   text").

   The box is as wide as its longest line - the stance sentence, around 500px -
   so `margin-left:auto` threw the numbers 250px away from the labels they belong
   to and the two halves of the row stopped reading as one fact. The label now
   claims a fixed 150px and the value a fixed 128px immediately after it: the two
   rows still line up digit for digit, and they sit beside their text.
   `tabular-nums` keeps 44 and 39 the same width. */
.maptip-k{flex:0 0 150px}
.maptip-v{flex:0 0 128px;text-align:right;font-variant-numeric:tabular-nums}

/* Home icon in the top bar. Matches .gear exactly (same 30px box, border,
   radius and muted ink) so the two read as one control group rather than as a
   button and a link. _settings.js moves every non-.brandmark child of .topbar
   into .topright, so this lands beside the gear automatically. */
.homebtn{
  /* Sits directly above the first card, flush with its left edge. It is NOT in
     .topbar: the Novo logo is 320px wide, so a 60px icon plus the logo plus the
     gear overflowed a 996px bar and wrapped onto its own row, leaving the icon
     stranded far above the content. */
  display:inline-flex;align-items:center;justify-content:flex-start;
  width:auto;height:auto;padding:0;
  margin:0 0 10px -4px;          /* -4px cancels the glyph's inset inside its viewBox */
  color:var(--muted);
  background:transparent;border:0;border-radius:0;
  text-decoration:none;transition:color .12s;
}
.homebtn:hover{color:var(--brand)}
.homebtn svg{width:32px;height:32px;display:block}

/* --- home icon + logo hit-testing (2026-09-14) --- */
/* The Novo logo is a 320x160 decorative video whose BOX overlaps whatever sits
   below it, even where the artwork is transparent. It was swallowing clicks on
   the home icon: the icon drew correctly and did nothing. It is decoration and
   is never wrapped in a link anywhere in this project, so it takes no pointer
   events. */
.novologo{pointer-events:none}

/* On pages with no settings gear the logo is the top bar's only child, and
   space-between pins a lone child to the left. Center it. :only-child keeps
   pages that DO have the gear untouched. */
.topbar > .novologo:only-child{margin-left:auto;margin-right:auto}

/* --- HCP search card (2026-09-14) --- */
/* Lifted out of dol_lookup.html's inline <style> so the profile page and the
   lookup page share one definition instead of drifting apart. */
.searchbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.searchbar .field{flex:1;min-width:150px}
.searchbar input,.searchbar select{font:inherit;border:1px solid var(--line);border-radius:9px;padding:10px 12px;width:100%;background:#fff}
.searchbar select{cursor:pointer}
.searchbar .btn{padding:10px 20px;border-radius:9px;flex:0 0 auto}

/* Four alternative ways to identify the same person, so they are separated by
   "or" rather than stacked as if they were fields of one form. */
.orbar{display:flex;align-items:center;gap:12px;margin:14px 0}
.orbar::before,.orbar::after{content:"";flex:1;height:1px;background:var(--line)}
.orbar span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.findhcp h3{margin:0 0 14px}
.findhcp .idrow .field{min-width:170px}



/* --- find-HCP input tint --- */
/* 10% black tint inside the entry boxes, so an empty field reads as something
   to fill in rather than as part of the white card. rgba over the card keeps it
   a tint rather than a flat gray, so it sits correctly on any card color. */
.findhcp .searchbar input,
.findhcp .searchbar select{background:rgba(0,0,0,.10)}
.findhcp .searchbar input:focus,
.findhcp .searchbar select:focus{background:rgba(0,0,0,.06);outline:2px solid var(--brand);outline-offset:-1px}

/* --- find-HCP label weight --- */
/* The shared .field label is 600 (semi-bold). These want real bold, so they are
   raised here rather than globally - .field is used on the lookup page too. */
.findhcp .field label{font-weight:800}

/* --- find-HCP heading --- */
/* "Find an HCP" is the card's call to action, not a quiet section label like the
   other panel headings, so it is twice the shared 13px and bold. Scoped to this
   card: .panel h3 is used by every other panel on the page. */
.findhcp h3{font-size:26px;font-weight:800;color:var(--ink)}

/* --- production-only marker --- */
/* Translucent purple "Production only" across a card. The SVG canvas is 460x170
   for a 44px line rotated 12 degrees: a canvas sized to the text alone crops its
   own corners once the text is rotated, which renders as a clipped word. The
   canvas grew with the wording - "Production only" is four characters longer
   than the "Coming soon" it replaced. */
.card.soon{position:relative;overflow:hidden}
.card.soon::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  z-index:5;pointer-events:none;user-select:none;
  background-repeat:no-repeat;background-position:center;background-size:78% auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 170' width='460' height='170'%3E%3Ctext x='230' y='85' transform='rotate(-12 230 85)' fill='%237C3AED' fill-opacity='0.34' font-family='Segoe UI, Helvetica, Arial, sans-serif' font-size='44' font-weight='700' letter-spacing='2' text-anchor='middle' dominant-baseline='middle'%3EProduction only%3C/text%3E%3C/svg%3E");
}