/* ==========================================================================
   WATER LOG — บันทึกการดื่มน้ำ

   Teal is the water colour throughout, which is Core's existing --ldc-teal.
   Nothing here introduces a new hue: the palette is fixed at four and a fifth
   one would make every other screen look like a different product.
   ========================================================================== */

.ldwa-page .ldc-card { text-align: center; }
.ldwa-page .ldc-card-title,
.ldwa-page .ldc-form,
.ldwa-page .ldwa-day,
.ldwa-page .ldwa-entry { text-align: left; }

/* ---- the vase ---------------------------------------------------------- */
.ldwa-vase {
    width: 190px;
    max-width: 66%;
    margin: 2px auto 6px;
}
.ldwa-vase-svg { display: block; width: 100%; height: auto; overflow: visible; }

.ldwa-glass {
    fill: var(--ldc-glass-fill);
    stroke: var(--ldc-border-strong);
    stroke-width: 3.6;
    stroke-linejoin: round;
}
/* Opaque enough to swallow the stems it covers. At .82 the submerged part
   showed through as a ghost, which read as a drawing mistake rather than as
   water. */
.ldwa-water { fill: var(--ldc-teal); opacity: .93; }
/* the crest is a paler band, so the surface reads as water rather than as a
   seam where two shapes of the same colour meet */
.ldwa-wave  { fill: var(--ldc-teal-soft); opacity: 1; }
.ldwa-rim {
    fill: var(--ldc-glass-fill);
    stroke: var(--ldc-border-strong);
    stroke-width: 2.8;
}

/* The stems are drawn behind the glass, so the neck crosses them and the
   flowers look like they are standing in the water rather than in front. */
.ldwa-stem {
    fill: none;
    stroke: var(--ldc-leaf);
    stroke-width: 3.4;
    stroke-linecap: round;
}
.ldwa-leaf { fill: var(--ldc-leaf); }

/* --ldwa-p runs 0 to 1 with the day. The blooms open as it climbs: this is
   the entire reward for drinking, and it costs one custom property. */
.ldwa-bloom {
    transform: scale(calc(.62 + var(--ldwa-p, 0) * .38));
    opacity: calc(.42 + var(--ldwa-p, 0) * .58);
    transition: transform .5s ease, opacity .5s ease;
}
.ldwa-petal {
    fill: var(--ldc-surface-soft);
    stroke: var(--ldc-orange);
    stroke-width: 1.9;
    stroke-linejoin: round;
}
.ldwa-pollen { fill: var(--ldc-orange); }

.ldwa-vase.is-full .ldwa-petal { fill: var(--ldc-surface-soft); stroke: var(--ldc-red); }
.ldwa-vase.is-full .ldwa-pollen { fill: var(--ldc-red); }

/* the surface drifts, slowly, the way water in a glass actually does */
@keyframes ldwa-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(100px); }
}
.ldwa-wave { animation: ldwa-drift 7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .ldwa-wave { animation: none; }
    .ldwa-bloom { transition: none; }
}

/* ---- the readout ------------------------------------------------------- */
.ldwa-readout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 6px 0 4px;
    flex-wrap: wrap;
}
.ldwa-readout-pct {
    font-family: var(--ldc-font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--ldc-link);
    font-variant-numeric: tabular-nums;
}
.ldwa-readout-pct span { font-size: 1.3rem; margin-left: 2px; }
.ldwa-readout-side { text-align: left; min-width: 0; }
.ldwa-readout-total {
    font-family: var(--ldc-font-display);
    font-weight: 700;
    font-size: 1.32rem;
    color: var(--ldc-text);
    font-variant-numeric: tabular-nums;
}
.ldwa-readout-left { font-size: .84rem; color: var(--ldc-text-muted); }
.ldwa-main.is-reached .ldwa-readout-left { color: var(--ldc-link); font-weight: 600; }

.ldwa-goal-line {
    font-size: .8rem;
    color: var(--ldc-text-muted);
    margin-bottom: 12px;
}
.ldwa-goal-line .ldc-linkbtn { font-size: .8rem; margin-left: 4px; }

/* ---- the cup buttons --------------------------------------------------- */
.ldwa-cups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.ldwa-cup-form { margin: 0; display: block; min-width: 0; }
.ldwa-cup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    min-height: 82px;
    padding: 10px 6px;
    border: 1.5px solid var(--ldc-border);
    border-radius: 16px;
    background: var(--ldc-card-bg);
    cursor: pointer;
    font: inherit;
    color: var(--ldc-text);
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.ldwa-cup:hover, .ldwa-cup:focus-visible { border-color: var(--ldc-link); background: var(--ldc-surface-cool); }
.ldwa-cup:active { transform: scale(.96); }
/* ---- the drawn vessels ------------------------------------------------- */
.ldwa-vessel {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ldwa-vessel-body {
    fill: var(--ldc-glass-fill);
    stroke: var(--ldc-ink);
    stroke-width: 2.7;
    stroke-linejoin: round;
}
.ldwa-vessel-water { fill: var(--ldc-teal); opacity: .8; }
.ldwa-vessel-line {
    fill: none;
    stroke: var(--ldc-ink);
    stroke-width: 2.7;
    stroke-linecap: round;
}
.ldwa-cup-icon { width: 34px; height: 39px; }
.ldwa-cup-ml {
    font-family: var(--ldc-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ldc-link);
    font-variant-numeric: tabular-nums;
}
.ldwa-cup-unit { font-size: .68rem; color: var(--ldc-text-muted); }

.ldwa-cups.is-compact .ldwa-cup { min-height: 64px; padding: 7px 4px; border-radius: 13px; }
.ldwa-cups.is-compact .ldwa-cup-icon { width: 26px; height: 30px; }
.ldwa-cups.is-compact .ldwa-cup-ml { font-size: .88rem; }

.ldwa-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
/* Undo is a correction, not a decision -- it should not shout the way the
   red outline button does everywhere else in the suite. */
.ldwa-undo-form { margin: 0; }
.ldwa-undo-form .ldc-btn {
    border-color: var(--ldc-border);
    color: var(--ldc-text-muted);
    background: var(--ldc-card-bg);
    font-weight: 600;
}
.ldwa-undo-form .ldc-btn:hover,
.ldwa-undo-form .ldc-btn:focus-visible {
    border-color: var(--ldc-red);
    color: var(--ldc-red-ink);
}
.ldwa-custom { width: 100%; text-align: left; }
.ldwa-custom > summary {
    cursor: pointer;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ldc-link);
    padding: 6px 0;
}
.ldwa-custom .ldc-form { margin-top: 6px; }

/* ---- seven days -------------------------------------------------------- */
.ldwa-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
    align-items: end;
    margin: 4px 0 10px;
}
.ldwa-week-col { text-align: center; min-width: 0; }
.ldwa-week-tube {
    position: relative;
    height: 76px;
    border-radius: 999px;
    background: var(--ldc-track);
    overflow: hidden;
    border: 1px solid var(--ldc-border);
}
.ldwa-week-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ldc-teal);
    opacity: .8;
    border-radius: 999px;
}
.ldwa-week-tick {
    position: absolute;
    inset: auto 0 5px;
    font-size: .72rem;
    color: var(--ldc-on-accent);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.ldwa-week-day { font-size: .7rem; color: var(--ldc-text-muted); margin-top: 4px; }
.ldwa-week-col.is-today .ldwa-week-day { color: var(--ldc-red-ink); font-weight: 700; }
.ldwa-week-col.is-today .ldwa-week-tube { outline: 2px solid rgba(0, 183, 205, .3); outline-offset: 1px; }

/* ---- entries and history ----------------------------------------------- */
.ldwa-card-total {
    float: right;
    font-family: var(--ldc-font-display);
    font-weight: 700;
    color: var(--ldc-link);
    font-variant-numeric: tabular-nums;
}
.ldwa-entry .ldc-row { border-bottom: 0; min-height: 52px; }
/* the row icon slot is a rounded tile; the vessel sits inside it */
.ldwa-entry .ldc-row-icon { display: flex; align-items: center; justify-content: center; }
.ldwa-entry .ldc-row-icon .ldwa-vessel { width: 26px; height: 30px; }
/* water is teal everywhere in this module; the shared row's default red is
   the alarm colour and an ordinary glass of water is not an alarm */
.ldwa-entry .ldc-row-value { color: var(--ldc-link); }
.ldwa-entry {
    border-bottom: 1px solid var(--ldc-border);
}
.ldwa-entry:last-child { border-bottom: 0; }
.ldwa-entry.is-editing {
    border: 1.5px solid var(--ldc-teal);
    border-radius: var(--ldc-radius-sm);
    background: var(--ldc-surface-cool);
    padding: 4px 10px 12px;
    margin: 6px 0;
}
.ldwa-entry-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 2px 10px 56px;
    margin-top: -8px;
}
.ldwa-delete-form { display: inline; margin: 0; }

.ldwa-day { margin-bottom: 14px; }
.ldwa-day:last-child { margin-bottom: 0; }
.ldwa-day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 8px 2px 4px;
    border-bottom: 1px solid var(--ldc-border);
}
.ldwa-day-name { font-family: var(--ldc-font-display); font-weight: 700; font-size: .96rem; }
.ldwa-day-total {
    font-family: var(--ldc-font-display);
    font-weight: 700;
    color: var(--ldc-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ldwa-day-total.is-hit { color: var(--ldc-link); }

/* ---- settings ---------------------------------------------------------- */
.ldwa-goal-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 4px 0 6px;
}
.ldwa-goal-modes .ldwa-goal-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1.5px solid var(--ldc-border);
    border-radius: 14px;
    background: var(--ldc-card-bg);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
/* the radio stays in the accessibility tree, just out of sight */
.ldwa-goal-modes .ldwa-goal-mode input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.ldwa-goal-modes .ldwa-goal-mode.is-selected { border-color: var(--ldc-link); background: var(--ldc-surface-cool); }
.ldwa-goal-mode-name { font-weight: 700; font-size: .92rem; }
.ldwa-goal-modes .ldwa-goal-mode.is-selected .ldwa-goal-mode-name { color: var(--ldc-link); }
.ldwa-goal-mode-sub { font-size: .78rem; color: var(--ldc-text-muted); }
.ldwa-goal-modes .ldwa-goal-mode input:focus-visible + .ldwa-goal-mode-name {
    outline: 2px solid var(--ldc-teal);
    outline-offset: 3px;
    border-radius: 4px;
}

.ldwa-cup-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    margin: 4px 0 6px;
}
.ldwa-cup-setting {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ldwa-cup-setting-icon { width: 24px; height: 28px; flex: 0 0 auto; }
/* The spinner arrows eat about 20px of a 70px field and clip the last digit
   of "600". Nobody nudges a cup size one millilitre at a time anyway. */
.ldwa-cup-setting input {
    min-width: 0;
    width: 100%;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ldwa-cup-setting input::-webkit-outer-spin-button,
.ldwa-cup-setting input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ldwa-caveat {
    font-size: .78rem;
    color: var(--ldc-text-muted);
    line-height: 1.6;
    margin: 4px 2px 0;
}

/* ---- the home-screen card ---------------------------------------------- */
.ldwa-dash-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.ldwa-dash .ldwa-vase { width: 76px; max-width: 76px; margin: 0; flex: 0 0 auto; }
.ldwa-dash-figures { min-width: 0; text-align: left; }
.ldwa-dash-total {
    font-family: var(--ldc-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ldc-link);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.ldwa-dash-goal { font-size: .8rem; color: var(--ldc-text-muted); }
.ldwa-dash-left { font-size: .82rem; color: var(--ldc-text); margin-top: 2px; }

@media (max-width: 380px) {
    .ldwa-cups { gap: 7px; }
    .ldwa-cup { min-height: 74px; }
}

/* --------------------------------------------------------------------------
   Stepping back a day.

   The page used to be nailed to today. It follows the day strip now, so it
   needs the same header the nutrition log has -- one line, arrows at the
   edges, the day in the middle -- and a line under the cups saying which day
   a tap will land on, because the cups look identical either way and that is
   exactly the kind of thing somebody finds out afterwards.
   -------------------------------------------------------------------------- */
.ldwa-daynav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--ldc-font-display);
}

.ldwa-backfill-note {
    margin: 10px 0 0;
    text-align: center;
}