/* Shared components: popover, toast, charts, data tables. */

/* ---------- How to read this board (popover) ---------- */

.popover {
  position: fixed;
  inset: auto;
  margin: 0;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 12px 32px -12px rgb(1 20 37 / 0.35);
  opacity: 1;
  transform: scale(1);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), overlay 160ms allow-discrete, display 160ms allow-discrete;
}
.popover:not(:popover-open) { opacity: 0; transform: scale(0.97); transition-duration: 110ms; }
@starting-style {
  .popover:popover-open { opacity: 0; transform: scale(0.97); }
}
.popover-title { font-size: var(--fs-lead); font-weight: 700; line-height: 1.2; }
.popover-lead { margin-top: var(--s-2); color: var(--ink); }
.popover-sub { margin-top: var(--s-5); font-size: var(--fs-small); font-weight: 700; }
.howto-states { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.howto-states { grid-template-columns: max-content 1fr; column-gap: var(--s-4); }
.howto-states li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; font-size: var(--fs-small); }
.howto-states li > span:last-child { font-size: var(--fs-small); align-self: center; }
.howto-states .status { font-size: var(--fs-small); }
.howto-glossary { display: grid; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-small); }
.howto-glossary dt { display: inline; font-weight: 700; }
.howto-glossary dt::after { content: ": "; }
.howto-glossary dd { display: inline; margin: 0; color: var(--ink); }
.popover-close { margin-top: var(--s-5); }
/* Got it stays in view at the bottom of the panel while its content scrolls (How to read is taller
   than a 1080p or 900px window). The bar runs edge to edge over the panel's padding. */
.popover-foot {
  position: sticky;
  bottom: calc(-1 * var(--s-5));
  z-index: 1;
  margin: var(--s-4) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
  padding: var(--s-3) var(--s-5) var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.popover-foot .popover-close { margin-top: 0; }
.popover-note { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--fs-small); }

/* Phones: How to read becomes a bottom sheet that scrolls inside itself. */
@media (max-width: 599px) {
  .howto {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    border-width: 1px 0 0;
    transform: translateY(0);
    transform-origin: bottom center;
    transition: transform 240ms var(--ease-drawer), opacity 200ms ease, overlay 240ms allow-discrete, display 240ms allow-discrete;
  }
  .howto:not(:popover-open) { opacity: 1; transform: translateY(100%); transition-duration: 180ms; }
  @starting-style {
    .howto:popover-open { opacity: 1; transform: translateY(100%); }
  }
  .howto .popover-close { width: 100%; }
  /* The sheet's sides are the page gutter, and its bottom keeps clear of the home indicator. */
  .howto .popover-foot {
    bottom: calc(-1 * (var(--s-5) + env(safe-area-inset-bottom, 0px)));
    margin: var(--s-4) calc(-1 * var(--gutter)) calc(-1 * (var(--s-5) + env(safe-area-inset-bottom, 0px)));
    padding: var(--s-3) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  }
}

/* Term definitions */
.term-pop { padding: var(--s-3) var(--s-4); }
.term-pop-title { font-weight: 700; }
.term-pop-text { margin-top: var(--s-1); font-size: var(--fs-small); line-height: 1.4; }

@media (max-width: 599px) {
  .howto-states { grid-template-columns: 1fr; row-gap: 2px; }
  .howto-states li > span:last-child { margin-bottom: var(--s-2); }
}

/* ---------- Toast ---------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--mobilebar-h) + var(--s-5));
  z-index: 60;
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: 8px;
  background: var(--lx-navy-950);
  color: var(--n-0);
  box-shadow: 0 10px 30px -12px rgb(1 20 37 / 0.45);
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
@starting-style {
  .toast { transform: translateY(12px); opacity: 0; }
}
.toast.is-leaving { transform: translateY(12px); opacity: 0; transition-duration: 150ms; }
/* Pretty wrapping keeps the last line from being one stranded word or date part ("Fri, Feb / 27"). */
.toast-text { flex: 1; font-weight: 550; line-height: 1.35; text-wrap: pretty; }
.toast-action { min-height: var(--tap); padding: 0 var(--s-4); color: var(--lx-mint-400); border-color: var(--lx-mint-400); }
.toast-close { color: var(--n-0); border-color: transparent; }
/* "Undo ⌘Z": the shortcut in a small chip, like the meeting's "Exit Esc". Touch screens have no keys to press. */
.toast-kbd {
  margin-left: 0.5em;
  padding: 0.05em 0.35em;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 3px;
  font-size: max(0.8em, 11px);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
@media (hover: none), (pointer: coarse) {
  .toast-kbd { display: none; }
}
.toast :focus-visible { outline-color: var(--lx-mint-400); }
@media (hover: hover) and (pointer: fine) {
  .toast-action:hover { background: var(--lx-navy-900); }
}

/* ---------- Charts ---------- */

.chart { position: relative; outline: none; border-radius: 4px; }
.chart:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.chart-svg svg { display: block; overflow: visible; }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis { stroke: var(--rule); stroke-width: 1; }
.chart-label { fill: var(--chart-label); font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.chart-label.is-strong { fill: var(--ink); font-weight: 700; }
.chart-value { fill: var(--ink); font-family: var(--font-ui); font-weight: 700; }
.chart-bar { fill: var(--chart-bar); }
.chart-bar--off { fill: var(--chart-off); }
.chart-flag { fill: var(--chart-off); }
.chart-missing { fill: var(--surface); stroke: var(--neutral); stroke-width: 2; }
.chart-goal { stroke: var(--chart-goal); stroke-width: 2; stroke-dasharray: 4 3; }
.chart-goal-line { fill: none; stroke: var(--chart-goal); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-line { fill: none; stroke: var(--chart-bar); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-end { fill: var(--chart-bar); stroke: var(--chart-ring); stroke-width: 2; }
.chart-hit { fill: transparent; }
.chart-hit.is-cursor { fill: var(--chart-bar); stroke: var(--chart-ring); stroke-width: 2; }
.chart-selected { fill: none; stroke: var(--ink); stroke-width: 2; }
.chart-bar.is-cursor { filter: brightness(1.35); }
[data-theme="meeting"] .chart-bar.is-cursor { filter: brightness(0.8); }

.chart-tip {
  position: absolute;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--tip-bg);
  color: var(--tip-ink);
  font-size: var(--fs-small);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-14px, calc(-100% - 6px));
  transition: opacity 120ms ease;
}
.chart-tip[data-side="left"] { transform: translate(calc(-100% + 14px), calc(-100% - 6px)); }
.chart.is-active .chart-tip { opacity: 1; }
.chart-tip strong { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-tip span { display: inline-flex; align-items: center; gap: 4px; color: var(--tip-ink-2); font-size: var(--fs-caption); }
.chart-tip .glyph { width: 13px; height: 13px; }
.chart-tip[data-status="off"] .glyph { color: var(--tip-off); }
.chart-tip[data-status="on"] .glyph { color: var(--tip-on); }

.key--bar { width: 10px; height: 10px; border-radius: 2px; background: var(--chart-bar); }
/* The off-goal key is the same glyph as everywhere else: red dot with a "!". */
.key-glyph { width: max(12px, 0.85em); height: max(12px, 0.85em); margin-left: 8px; flex: none; color: var(--chart-off); vertical-align: -0.1em; }
.chart-dot { fill: var(--chart-bar); stroke: var(--chart-ring); stroke-width: 2; }
.chart-point.is-cursor { stroke: var(--ink); stroke-width: 2; }
.chart-flag.is-cursor > circle:first-child { stroke: var(--ink); stroke-width: 2; }
.chart-flag .chart-flag-mark { fill: var(--chart-ring); }

/* ---------- Problem status (Open · In progress · Closed) ---------- */
.ist { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; white-space: nowrap; }
.ist-dot { width: 0.6em; height: 0.6em; flex: none; border-radius: 50%; background: currentColor; }
.ist--open { color: var(--off); }
.ist--in-progress { color: var(--progress); }
.ist--closed { color: var(--on); }
.ist--unset { color: var(--neutral); font-weight: 550; }
.ist--unset .ist-dot { background: none; border: 1.5px solid currentColor; }
.problem-status { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.problem-status-label { color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }

/* ---------- Data tables ---------- */

.table-wrap { margin-top: var(--s-2); overflow-x: auto; }
.data-table { width: 100%; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 6px var(--s-3) 6px 0; border-bottom: 1px solid var(--rule-quiet); text-align: left; font-weight: 400; }
.data-table thead th { color: var(--ink-2); font-weight: 650; border-bottom-color: var(--rule); }
.data-table tbody th { font-weight: 600; }
.data-table .num { text-align: right; }
.data-table .status { font-size: var(--fs-small); }

/* Day-by-day goal: one stepped line over the bars, in ink so it reads across them (no halo). */
.chart-goal-step { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: miter; }
[data-theme="meeting"] .chart-goal-step { stroke: var(--d-text); stroke-width: 3; }
/* The bar charts' key draws its goal in the same ink as the step. */
.legend:has(.key--bar) .key--goal { border-top-color: var(--ink); }
[data-theme="meeting"] .legend:has(.key--bar) .key--goal { border-top-color: var(--d-text); }
/* A zero is a 4px stub in the Actual color (the key lists Actual and Off goal), so a clean day still shows a mark. */
.chart-bar--zero { fill: var(--chart-bar); }
/* "Goal 616" at the right end of a Detail or Meeting chart's goal line. */
.chart-goal-label { fill: var(--chart-goal); font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Narrow year charts: one solid tick per month (dashes would break into specks). */
.chart-goal--solid { stroke-dasharray: none; stroke-width: 2; }
/* Year charts: months still to come keep their goal at half strength (no jitter beside real results). */
.chart-goal--future { opacity: 0.5; }

/* ---------- Selects (Board setup, Enter numbers, Action register, Add action) ---------- */

/* One drawn chevron, 14px in from the right edge, in place of the browser's arrow
   (which sat about 6px from the border). Navy on light, light on the meeting's dark ground. */
:root {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2302274C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="meeting"] {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E8EEF4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:is(.su-field, .ar-pick) select:not([multiple]),
select:is(.day-select, .ma-select):not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
/* The Action register drew its own chevron after the box; the shared one replaces it. */
span.ar-pick::after { content: none; }

/* The term definition opens right after its ⓘ button, wherever that sits (a nowrap name, a status
   block's light text, a heading): it keeps its own type and wraps, never the look around it. */
.term-pop { font: 400 var(--fs-body)/1.45 var(--font-ui); font-variant-numeric: normal; letter-spacing: normal; word-spacing: normal; text-align: start; text-indent: 0; text-transform: none; white-space: normal; text-wrap: wrap; cursor: auto; pointer-events: auto; }
.term-pop .term-pop-title:focus { outline: none; } /* it takes focus only so a screen reader starts there */