/* web/linkedin-visits.css — LinkedIn visits (2026-10-03, docs/specs/LINKEDIN_VISITS_CONTRACT.md):
   the counter right of the DraftADay name, its panel, and each tab's "LinkedIn visits" button and
   settings panel (web/linkedin-visits.js). Theme tokens only, light and dark alike. At a phone's width
   the panels are a sheet along the bottom of the screen with a 16 px gutter, and nothing scrolls
   sideways. */

/* The two series of its charts, checked for colour-blind separation on each theme's card (the dataviz
   palette validator: every check passes for Studio amber against You blue). The dark card needs a
   deeper amber than the dark --amber ink, which is too light to sit in the band beside the blue. */
:root { --lv-studio: var(--amber); --lv-you: var(--blue); }
:root[data-theme="dark"] { --lv-studio: #b38d24; --lv-you: var(--blue); }

/* ---- The counter, in the app bar (navy in both themes) ---- */
.lv-counter {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 30px; padding: 0 10px 0 8px; margin-left: 4px;
  border: 1px solid var(--navy-line); border-radius: var(--radius-pill);
  background: var(--navy-line); color: var(--ink-invert);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color var(--t-fast);
}
.lv-counter:hover { border-color: var(--ink-invert-soft); }
.lv-counter:focus-visible { outline: 2px solid var(--ink-invert); outline-offset: 2px; }
.lv-counter[aria-expanded="true"] { border-color: var(--ink-invert); }
.lv-counter__n { display: inline-block; min-width: 1ch; }
/* It went up: the number nods once. */
.lv-counter.is-up .lv-counter__n { animation: lv-up .9s ease; }
@keyframes lv-up { 0% { transform: scale(1); } 30% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lv-counter.is-up .lv-counter__n { animation: none; } }

.lv-eye { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- A tab's button ---- */
.lv-mount { display: inline-flex; }
.lv-labelrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.lv-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lv-btn .lv-eye { width: 15px; height: 15px; }
.lv-btn[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
@media (max-width: 640px) {
  /* the eye alone on a phone; the words stay for a screen reader */
  .lv-btn { padding-left: 9px; padding-right: 9px; }
  .lv-btn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ---- The panels: a popover under its button ---- */
.lv-backdrop { display: none; }
.lv-pop {
  position: fixed; z-index: 1250; box-sizing: border-box;
  max-width: calc(100vw - 32px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 18px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-size: 13.5px; line-height: 1.45; text-align: left;
}
.lv-pop:focus { outline: none; }
.lv-pop:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lv-pop__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.lv-pop__titles { flex: 1 1 auto; min-width: 0; }
.lv-pop__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.lv-pop__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.lv-close {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.lv-close:hover { color: var(--ink); border-color: var(--ink-soft); }
.lv-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lv-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lv-sec__h { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.lv-sub { margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.lv-empty, .lv-note { margin: 0; font-size: 13px; color: var(--ink-soft); }
.lv-note + .lv-note, .lv-tiles + .lv-note { margin-top: 8px; }
.lv-foot-note { margin-top: 16px; }
.lv-err { margin: 6px 0 0; font-size: 12.5px; color: var(--red); }
.lv-err:empty { margin: 0; }
.lv-retry { margin-top: 8px; }

/* Day, week or month: the period every number below is for (owner, 2026-10-03) */
.lv-period { display: inline-flex; gap: 2px; margin: 0 0 12px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); }
.lv-period__btn {
  min-height: 32px; padding: 4px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.lv-period__btn:hover { color: var(--ink); }
.lv-period__btn[aria-pressed="true"] { background: var(--blue-fill, var(--blue)); color: var(--ink-invert); }
.lv-period__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lv-sec[hidden] { display: none; }

/* Today's totals */
.lv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lv-tile { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.lv-tile__label { display: block; font-size: 12px; color: var(--ink-soft); }
.lv-tile__value { display: block; font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--ink); }
.lv-tile__detail { display: block; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }

/* Tables (today by feature, the numbers under a chart) */
.lv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lv-table th, .lv-table td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); text-align: right; font-variant-numeric: tabular-nums; vertical-align: top; }
.lv-table th:first-child, .lv-table td:first-child { padding-left: 0; text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.lv-table thead th { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.lv-table tbody th { color: var(--ink); }

/* Each Chrome */
.lv-insts { list-style: none; margin: 0; padding: 0; }
.lv-inst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.lv-inst:last-child { border-bottom: 0; }
.lv-inst__name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.lv-inst__meta { flex: 1 1 100%; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.lv-inst .lv-inst__input { flex: 1 1 160px; width: auto; min-width: 0; padding: 5px 8px; font-size: 13px; }
.lv-inst .lv-err { flex: 1 1 100%; }
.lv-link { padding: 2px 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lv-link:hover { text-decoration: underline; }
.lv-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.lv-link[hidden] { display: none; }

/* Links to each tab's settings */
.lv-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lv-links .btn { white-space: normal; text-align: left; }

/* ---- Charts: columns, Studio at the baseline and you above it ---- */
.lv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 14px; font-size: 12px; color: var(--ink-soft); }
.lv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lv-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.lv-swatch--studio, .lv-seg--studio, .lv-key--studio { background: var(--lv-studio); }
.lv-swatch--you, .lv-seg--you, .lv-key--you { background: var(--lv-you); }
.lv-chart { position: relative; min-width: 0; }
.lv-plot { position: relative; height: 96px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); }
.lv-plot:focus { outline: none; }
.lv-plot:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; }
.lv-plot__max { position: absolute; top: -8px; left: 0; padding-right: 4px; background: var(--card); font-size: 10.5px; line-height: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Few columns (12 weeks, 12 months) are narrower than their share: spread so each sits over its tick. */
.lv-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 2px; }
.lv-chart--dense .lv-bars { gap: 1px; }
.lv-col { display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 0; min-width: 0; max-width: 24px; height: 100%; }
.lv-seg { display: block; width: 100%; }
/* the data end rounded, square at the baseline; a 2 px gap of the card between Studio and you */
.lv-col > .lv-seg:first-child { border-radius: 4px 4px 0 0; }
.lv-chart--dense .lv-col > .lv-seg:first-child { border-radius: 2px 2px 0 0; }
.lv-seg + .lv-seg { margin-top: 2px; }
.lv-bars.is-active .lv-col:not(.is-on) { opacity: .4; }
.lv-ticks { position: relative; height: 16px; margin-top: 4px; font-size: 10.5px; line-height: 16px; color: var(--ink-soft); }
.lv-tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lv-tick.is-start { left: 0; transform: none; }
.lv-tick.is-end { right: 0; transform: none; }
.lv-tip {
  position: absolute; top: 4px; z-index: 2; min-width: 112px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: var(--shadow);
  font-size: 12px; line-height: 1.4; color: var(--ink-soft); white-space: nowrap; pointer-events: none;
}
.lv-tip[hidden] { display: none; }
.lv-tip__n { display: block; font-size: 13px; color: var(--ink); }
.lv-tip__when { display: block; margin-bottom: 2px; }
.lv-tip__row { display: flex; align-items: center; gap: 6px; }
.lv-key { display: inline-block; width: 10px; height: 2px; border-radius: 1px; }
.lv-numbers { margin-top: 6px; font-size: 12.5px; }
.lv-numbers summary { width: max-content; color: var(--blue); font-weight: 600; cursor: pointer; }
.lv-numbers summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.lv-numbers .lv-table { margin-top: 6px; }
.lv-hist__sum { margin-bottom: 10px; }
.lv-hist__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.lv-hist__label { font-size: 12.5px; color: var(--ink-soft); }
.lv-hist__pick { width: auto; max-width: 100%; min-width: 0; padding: 6px 32px 6px 10px; font-size: 13px; }

/* ---- A tab's settings ---- */
.lv-today { margin-bottom: 4px; }
.lv-today__line { margin: 0; font-size: 13.5px; color: var(--ink); }
.lv-today__list { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.lv-today .lv-note { margin-top: 4px; }
.lv-sets { margin-top: 10px; }
.lv-set { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.lv-set__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.lv-set__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lv-set__select { width: 100%; padding: 7px 34px 7px 10px; font-size: 13.5px; }
/* two classes: styles.css's input[type="number"] { width: 100% } outranks one */
.lv-set .lv-set__num { flex: 0 0 auto; width: 96px; padding: 7px 10px; font-size: 13.5px; }
.lv-set__unit { font-size: 13px; color: var(--ink-soft); }
.lv-set__hint { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.lv-set__status { margin: 5px 0 0; font-size: 12.5px; color: var(--green); }
.lv-set__status:empty { margin: 0; }
.lv-set__status.is-bad { color: var(--red); }
.lv-set__group { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.lv-set__group + .lv-set { border-top: 0; }
/* On / Off: two radios drawn as one control */
.lv-onoff { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.lv-onoff__opt { position: relative; display: inline-flex; margin: 0; }
.lv-onoff__opt + .lv-onoff__opt { border-left: 1px solid var(--line); }
.lv-onoff__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; opacity: 0; }
.lv-onoff__text { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.lv-onoff__input:checked + .lv-onoff__text { background: var(--blue-fill); color: var(--ink-invert); }
.lv-onoff__input:focus-visible + .lv-onoff__text { outline: 2px solid var(--blue); outline-offset: -2px; }
.lv-onoff__input:disabled + .lv-onoff__text { cursor: default; opacity: .6; }
.lv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.lv-foot .lv-note { flex: 1 1 220px; font-size: 12.5px; }

/* ---- A phone: the panel is a sheet along the bottom, over a dimmed page ---- */
@media (max-width: 640px) {
  .lv-backdrop.is-on { display: block; position: fixed; inset: 0; z-index: 1249; background: rgba(8, 22, 38, .42); }
  :root[data-theme="dark"] .lv-backdrop.is-on { background: rgba(0, 0, 0, .58); }
  .lv-pop {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none; max-height: 86vh !important;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-bottom: 0; border-radius: 14px 14px 0 0;
  }
  .lv-tile__value { font-size: 22px; }
}