/* ==========================================================================
   ADVICE

   Two states with very different jobs. A finding has to be readable at a
   glance and then in full. The waiting state has to look like a system
   patiently collecting, not one that failed — which is mostly a matter of
   giving it a shape and a checklist rather than a sentence of apology.

   Colour through role tokens; the brand colours are fills and borders here,
   never text.
   ========================================================================== */
.ldv-page .ldc-card + .ldc-card { margin-top: 14px; }

/* --- one finding ---------------------------------------------------------- */
.ldv-item { padding: 14px 0; }
.ldv-item + .ldv-item { border-top: 1px solid var(--ldc-border); }
.ldv-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ldv-item-icon { font-size: 18px; flex: 0 0 auto; line-height: 1.2; }
.ldv-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ldc-font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ldc-text);
}
.ldv-item-sev {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ldc-surface-soft);
    color: var(--ldc-text);
    white-space: nowrap;
}
.ldv-item.is-watch .ldv-item-sev { background: var(--ldc-surface-warn); }
.ldv-item.is-note  .ldv-item-sev { background: var(--ldc-surface-cool); }
.ldv-item.is-good  .ldv-item-sev { background: var(--ldc-surface-ok); }
.ldv-item-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ldc-text-soft);
}
/* On the dashboard the card holds one finding, so it needs no top padding
   and no rule above it. */
.ldc-dash-card .ldv-item:first-child { padding-top: 0; }
.ldv-more {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--ldc-text-muted);
    text-align: center;
}

/* --- waiting for enough data ---------------------------------------------
   Deliberately not styled as a warning. Nothing has gone wrong; the answer
   is simply "not yet", and it comes with the list of what would change it. */
.ldv-waiting {
    text-align: center;
    padding: 6px 0 12px;
}
.ldv-waiting-icon { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.ldv-waiting strong {
    display: block;
    font-family: var(--ldc-font-display);
    font-size: 16px;
    color: var(--ldc-text);
    margin-bottom: 4px;
}
.ldv-waiting > p {
    margin: 0 auto 14px;
    max-width: 46ch;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ldc-text-muted);
}
.ldv-waiting-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.ldv-waiting-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--ldc-radius-sm);
    background: var(--ldc-surface-soft);
    margin-bottom: 8px;
}
.ldv-waiting-what { font-weight: 700; font-size: 14px; color: var(--ldc-text); }
.ldv-waiting-count {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ldc-label);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- what it was read from ------------------------------------------------ */
.ldv-basis .ldc-hint { margin: 0 0 10px; }
.ldv-basis .ldc-row-sub { font-variant-numeric: tabular-nums; }

.ldv-disclaimer {
    font-size: 13px;
    line-height: 1.75;
    color: var(--ldc-text-soft);
}
.ldv-disclaimer strong {
    display: block;
    color: var(--ldc-red-ink);
    margin-bottom: 4px;
    font-size: 14px;
}

@media (max-width: 400px) {
    .ldv-waiting-list li { flex-direction: column; gap: 2px; }
    .ldv-waiting-count { white-space: normal; }
}

/* --------------------------------------------------------------------------
   The wait, separated from the shortfalls.

   Both used to be rows in one list, wearing the same "N more days" shape --
   so the smallest number read as the finish line, when the 30 days of use was
   still running underneath it. The clock gets its own block, ahead of the
   list, and the list drops the "more needed" phrasing for a plain "3 of 10"
   so it cannot be mistaken for a countdown of its own.
   -------------------------------------------------------------------------- */
.ldv-waiting-clock {
    margin: 14px auto 4px;
    padding: 12px 16px;
    border-radius: var(--ldc-radius-sm);
    background: var(--ldc-surface-accent);
    text-align: center;
}

.ldv-waiting-clock-line {
    display: block;
    font-family: var(--ldc-font-display);
    font-weight: 700;
    color: var(--ldc-text);
    font-variant-numeric: tabular-nums;
}

.ldv-waiting-clock-more {
    display: block;
    margin-top: 2px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ldc-accent-ink);
    font-variant-numeric: tabular-nums;
}

.ldv-waiting-lead {
    margin: 16px 0 8px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ldc-text-muted);
    text-align: center;
}

.ldv-waiting-why {
    margin: 12px 0 0;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--ldc-text-muted);
    text-align: left;
}

/* --------------------------------------------------------------------------
   Choosing what gets read.

   Two levels, and the nesting has to be visible without a word of explanation:
   an area, and the individual numbers inside it. The area is a card; its
   numbers are chips indented under it, and they dim as a group when the area
   itself is switched off -- because that is what actually happens to them.

   No script: the checkbox is moved out of sight rather than removed, so focus
   and screen readers still reach it, and `:has()` makes the card respond as
   soon as it is ticked instead of waiting for the save.
   -------------------------------------------------------------------------- */
.ldv-area {
    margin: 0 0 10px;
    padding: 4px 4px 10px;
    border: 1.5px solid var(--ldc-border);
    border-radius: 16px;
    background: var(--ldc-card-bg);
    transition: border-color .15s ease;
}

.ldv-area.is-on,
.ldv-area:has(.ldv-area-head input:checked) { border-color: var(--ldc-teal); }
.ldv-area.is-on:has(.ldv-area-head input:not(:checked)) { border-color: var(--ldc-border); }

/* Scoped to the card on purpose. These are <label> elements inside a
   .ldc-form, and `.ldc-form label { display: block }` -- one specificity point
   more than a bare `.ldv-area-head` -- flattens them: the switch collapsed to
   a 2px sliver and the chip ticks to a hairline. The component has to hold its
   shape wherever it is dropped, not only where it was born. Same lesson the
   fasting plan cards learnt. */
.ldv-topics .ldv-area-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 8px;
    cursor: pointer;
    position: relative;
}

.ldv-topics .ldv-area-head input,
.ldv-topics .ldv-var input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.ldv-area-icon { font-size: 1.15rem; line-height: 1; flex: 0 0 auto; }

.ldv-area-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ldc-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ldc-text-muted);
}

.ldv-area.is-on .ldv-area-name,
.ldv-area:has(.ldv-area-head input:checked) .ldv-area-name { color: var(--ldc-text); }
.ldv-area.is-on:has(.ldv-area-head input:not(:checked)) .ldv-area-name { color: var(--ldc-text-muted); }

/* The switch. A track and a knob, drawn in CSS -- it has to read as ON or OFF
   from across the room, which a tick in a box does not. */
.ldv-topics .ldv-area-state {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 23px;
    border-radius: 999px;
    /* An explicit border as well as a fill: --ldc-track is nearly the card
       colour on the pale themes, and without an edge the switch rendered as a
       lone knob floating in space with no track behind it. */
    background: var(--ldc-track);
    border: 1px solid var(--ldc-border);
    box-sizing: border-box;
    position: relative;
    transition: background-color .18s ease, border-color .18s ease;
}

.ldv-topics .ldv-area-state::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ldc-card-bg);
    box-shadow: 0 1px 3px rgba(60, 47, 34, .3);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.ldv-topics .ldv-area.is-on .ldv-area-state,
.ldv-topics .ldv-area:has(.ldv-area-head input:checked) .ldv-area-state {
    background: var(--ldc-teal);
    border-color: var(--ldc-teal);
}
.ldv-area.is-on .ldv-area-state::after,
.ldv-area:has(.ldv-area-head input:checked) .ldv-topics .ldv-area-state::after { transform: translateX(17px); }
.ldv-topics .ldv-area.is-on:has(.ldv-area-head input:not(:checked)) .ldv-area-state {
    background: var(--ldc-track);
    border-color: var(--ldc-border);
}
.ldv-area.is-on:has(.ldv-area-head input:not(:checked)) .ldv-topics .ldv-area-state::after { transform: none; }

.ldv-area-head input:focus-visible ~ .ldv-area-state {
    outline: 2px solid var(--ldc-teal);
    outline-offset: 3px;
}

/* ---- the numbers inside an area ---- */
.ldv-vars {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 2px 12px 0 44px;
}

/* The chip and its "i" sit on one line that never wraps, so the button can
   never end up orphaned under a long Thai label -- the chip shrinks and wraps
   its own text instead. The explanation is a sibling BELOW that line, so it
   pushes the rest down rather than floating over what you were reading; on a
   phone there is no hover, and a panel that covers the page is worse than one
   that moves it. */
.ldv-var-row { display: block; }

.ldv-var-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.ldv-topics .ldv-help-btn {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--ldc-border);
    background: var(--ldc-card-bg);
    color: var(--ldc-text-muted);
    font-family: var(--ldc-font-display);
    font-weight: 700;
    font-size: .78rem;
    line-height: 1;
    cursor: pointer;
}

.ldv-topics .ldv-help-btn input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.ldv-var-row:has(.ldv-help-toggle:checked) .ldv-help-btn {
    border-color: var(--ldc-teal);
    background: var(--ldc-surface-accent);
    color: var(--ldc-text);
}

.ldv-help-text {
    margin: 6px 0 2px;
    padding: 9px 12px;
    border-radius: var(--ldc-radius-sm);
    background: var(--ldc-surface-soft);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--ldc-text-muted);
}

.ldv-var-row:not(:has(.ldv-help-toggle:checked)) .ldv-help-text { display: none; }

/* Where :has() is not supported the button cannot do anything, so it is
   removed and the explanations simply stay open. Verbose beats a button that
   does nothing when pressed. */
@supports not selector(:has(*)) {
    .ldv-topics .ldv-help-btn { display: none; }
    .ldv-help-text { display: block; }
}

.ldv-topics .ldv-var {
    position: relative;
    /* Shrinkable, so a long label wraps INSIDE the chip instead of shoving
       the "i" onto a line of its own -- which read as an orphaned button
       belonging to nothing. */
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border: 1.5px solid var(--ldc-border);
    border-radius: 999px;
    background: var(--ldc-card-bg);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ldc-text-muted);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* A small tick, so an on chip is not distinguished by colour alone. */
.ldv-topics .ldv-var::before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1.5px solid var(--ldc-border);
    background: transparent;
}

.ldv-topics .ldv-var.is-on,
.ldv-topics .ldv-var:has(input:checked) {
    border-color: var(--ldc-teal);
    background: var(--ldc-surface-accent);
    color: var(--ldc-text);
}

.ldv-topics .ldv-var.is-on::before,
.ldv-topics .ldv-var:has(input:checked)::before {
    border-color: var(--ldc-teal);
    background: var(--ldc-teal);
    box-shadow: inset 0 0 0 2px var(--ldc-card-bg);
}

.ldv-topics .ldv-var.is-on:has(input:not(:checked)) {
    border-color: var(--ldc-border);
    background: var(--ldc-card-bg);
    color: var(--ldc-text-muted);
}

.ldv-topics .ldv-var.is-on:has(input:not(:checked))::before {
    border-color: var(--ldc-border);
    background: transparent;
    box-shadow: none;
}

.ldv-var input:focus-visible ~ .ldv-var-name {
    outline: 2px solid var(--ldc-teal);
    outline-offset: 3px;
    border-radius: 4px;
}

.ldv-topics-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .ldv-area, .ldv-area-state, .ldv-area-state::after, .ldv-var { transition: none; }
}

/* --------------------------------------------------------------------------
   The supplements, one row each.

   An honest supplement panel is mostly a list of things that do less than the
   label suggests, so the evidence grade is the loudest thing in each row --
   coloured AND worded, never colour alone.
   -------------------------------------------------------------------------- */
.ldv-supp {
    padding: 12px 0;
    border-top: 1px solid var(--ldc-border);
}

.ldv-supp:first-of-type { border-top: 0; }

.ldv-supp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.ldv-supp-name {
    font-family: var(--ldc-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ldc-text);
}

.ldv-supp-take {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ldc-text-muted);
    font-variant-numeric: tabular-nums;
}

.ldv-supp-take.is-thin { color: var(--ldc-accent-ink); }

.ldv-supp-claim {
    margin: 0 0 6px;
    font-size: .86rem;
    line-height: 1.7;
    color: var(--ldc-text-muted);
}

.ldv-grade {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: 1px;
}

.ldv-grade.is-strong   { background: var(--ldc-surface-ok);     color: var(--ldc-ok); }
.ldv-grade.is-moderate { background: var(--ldc-surface-accent); color: var(--ldc-accent-ink); }
.ldv-grade.is-weak     { background: var(--ldc-surface-warn);   color: var(--ldc-accent-ink); }
.ldv-grade.is-none     { background: var(--ldc-surface-soft);   color: var(--ldc-text-muted); }

.ldv-supp-note {
    margin: 4px 0 0;
    padding: 8px 11px;
    border-radius: var(--ldc-radius-sm);
    background: var(--ldc-surface-warn);
    font-size: .82rem;
    line-height: 1.6;
    color: var(--ldc-text);
}