/*
================================================================================
    ML Software, LLC
    Copyright 2026. All rights reserved.

    Life IQ | lifeiq.mlsoftware.com
    assets/css/plan.css

    Platform: IQ Platform
    Created : 2026-08-05
    Updated : 2026-08-05
    Version : 1.14.0

    The Plan screen (plan.js 1.0.0).

    Its own stylesheet rather than more of product.css. product.css is
    past sixty version bumps and four thousand lines, and a new screen
    with fifteen selectors of its own is exactly the thing that should
    not be appended to it - truth.css set the precedent and it has been
    the easier of the two to work in ever since.

    Commitment colours are INLINE, not here. They are data the person
    chose and a stylesheet cannot know them.
*/

.liq-plan {
    padding-bottom: 20px;
}


/* ----------------------------------------------------------------------------
   Day header
   -------------------------------------------------------------------------- */

.liq-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.liq-plan-date {
    font-family: var(--font-display, inherit);
    font-size: 17px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.liq-plan-nav {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
}

.liq-plan-nb {
    min-width: 34px;
    min-height: var(--touch-target-touch, 44px);
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

/* Their own row under the date. These act on every day rather than on
   the one being viewed, and putting them beside the date arrows would
   read as though they did. */
.liq-plan-tools {
    display: flex;
    gap: 6px;
    margin: -4px 0 14px;
}

/* Buttons, not pills. Every other pill in this app is a filter that
   changes what the list below shows - these leave the screen entirely,
   and borrowing the filter shape says the opposite of what they do.

   Squared corners, a real surface behind them, and a chevron pointing
   out. */
.liq-plan-tool {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--touch-target-touch, 44px);
    padding: 0 13px;
    border: 1px solid var(--border-light, var(--border));
    border-radius: var(--radius, 8px);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-min-secondary, 13px);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

/* Drawn rather than a character: a chevron glyph sits off the baseline
   at this size and the fix is per-font. */
.liq-plan-tool::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--text-dim);
    border-right: 1.5px solid var(--text-dim);
    transform: rotate(45deg);
}

/* Back out of an editor. Mirrors the tool button it was reached from,
   pointing the other way. */
.liq-skel-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 40px;
    min-height: var(--touch-target-touch, 44px);
    margin-right: 4px;
    padding: 0;
    border: 1px solid var(--border-light, var(--border));
    border-radius: var(--radius, 8px);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.liq-plan-nb.is-on {
    border-color: var(--accent-bord, var(--accent));
    background: var(--accent-dim, rgba(74, 158, 255, 0.18));
    color: var(--accent-light, var(--accent));
}


/* ----------------------------------------------------------------------------
   A block

   Four tracks: time, spine, body, log. All four always present - the log
   button has a spacer when it does not apply, because a missing grid
   child pulls every child after it one column left.
   -------------------------------------------------------------------------- */

.liq-blk {
    display: grid;
    grid-template-columns: 52px 3px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: stretch;
    margin-bottom: 7px;
}

.liq-blk-time {
    padding-top: 11px;
    font-family: var(--font-display, inherit);
    font-size: 13px;
    line-height: 1.25;
    color: var(--text-dim);
    text-align: right;
}

.liq-blk-time b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* The commitment's colour, or grey when the block is open. Inline style
   overrides this when there is one. */
.liq-blk-spine {
    border-radius: 2px;
    background: var(--border);
}

.liq-blk-body {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* Dashed and unfilled. An open block is a legitimate state, not a gap to
   be apologised for, so it reads as available rather than as missing. */
.liq-blk-body.is-open {
    border-style: dashed;
    background: transparent;
}

.liq-blk.is-now .liq-blk-body {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-dim, rgba(74, 158, 255, 0.18));
}

/* Logged. Quieter, never struck through - the time was spent and the
   record of it should not read as cancelled. */
.liq-blk.is-done .liq-blk-body {
    opacity: 0.6;
}

.liq-blk-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.liq-blk-name {
    font-size: var(--font-min-body, 16px);
    font-weight: 500;
    color: var(--text-primary);
}

.liq-blk-name.is-dim {
    font-weight: 400;
    color: var(--text-dim);
}

.liq-blk-now {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: 7px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--bg-base);
    font-family: var(--font-display, inherit);
    font-size: 11px;
    letter-spacing: 0.06em;
}

.liq-blk-meta {
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
    white-space: nowrap;
}


/* ----------------------------------------------------------------------------
   Tasks inside a block

   Read only and capped at three. This is a plan, not the task list - the
   point is seeing that work is waiting, not working it here.
   -------------------------------------------------------------------------- */

.liq-blk-tasks {
    display: block;
    margin-top: 8px;
}

.liq-blk-task {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-secondary);
}

.liq-blk-task i {
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-dim);
}

.liq-blk-task.is-more {
    padding-left: 11px;
    color: var(--text-dim);
}


/* ----------------------------------------------------------------------------
   Log it

   The button that makes this screen pay for itself. Quiet, because it is
   pressed after the work rather than before it, and a loud one on every
   filled block would turn the day into a row of things demanding to be
   ticked.
   -------------------------------------------------------------------------- */

.liq-blk-log {
    align-self: center;
    min-height: var(--touch-target-touch, 44px);
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-min-secondary, 13px);
    cursor: pointer;
    white-space: nowrap;
}

/* Holds the fourth track open on rows without a log button, so the three
   before it keep their widths. */
.liq-blk-log-sp {
    display: block;
    width: 0;
}


/* ----------------------------------------------------------------------------
   The seam -- split, join, empty

   Only under the selected block. A permanent divider between every block
   would put six of these on a screen to serve something done twice a
   week.
   -------------------------------------------------------------------------- */

.liq-seam {
    display: grid;
    grid-template-columns: 52px 3px minmax(0, 1fr) auto;
    gap: 9px;
    margin: -2px 0 6px;
}

/* Column 3 is the block card's own column, so the pills start on the
   same vertical line the card does - the seam reads as belonging to the
   block above it rather than floating under the row.

   The connector rules are gone. They were decoration, and they pushed
   the first pill inward so nothing lined up with anything. */
.liq-seam-line {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Solid and blue. Dashed grey read as disabled next to two solid
   coloured pills, and these are the two you use most - Resize and Time
   change the shape of the day, where the dragon and the x are
   occasional.

   Accent rather than another colour: it is what every other actionable
   control in this app already uses, and the row now says its own
   meaning in colour - blue changes the block, amber marks it, red
   empties it. */
.liq-seam-btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--accent-bord, var(--accent));
    border-radius: 999px;
    background: var(--accent-dim, rgba(74, 158, 255, 0.14));
    color: var(--accent-light, var(--accent));
    font-family: inherit;
    font-size: var(--font-min-secondary, 13px);
    cursor: pointer;
    white-space: nowrap;
}

/* The icon pills carry their own tints, set below. They must not inherit
   the blue fill from the rule above. */
.liq-seam-btn.is-icon {
    background: transparent;
}


/* ----------------------------------------------------------------------------
   Sheets
   -------------------------------------------------------------------------- */

.liq-plan-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
    background: rgba(0, 0, 0, 0.58);
}

.liq-plan-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 74vh;
    min-height: 0;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elevated, var(--bg-surface));
    margin-bottom: calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom, 0px));
}

.liq-plan-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    margin-bottom: 4px;
    font-size: var(--font-min-body, 16px);
    color: var(--text-primary);
}

.liq-plan-panel-sub {
    flex: 0 0 auto;
    margin: 0 0 12px;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
}

/* The list scrolls, the head and the actions do not. */
.liq-plan-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: clip;
}

.liq-plan-panel-acts {
    flex: 0 0 auto;
    margin-top: 12px;
}

.liq-plan-panel-acts .btn {
    width: 100%;
    min-height: var(--touch-target-touch, 44px);
}


/* ----------------------------------------------------------------------------
   Commitments in the fill sheet
   -------------------------------------------------------------------------- */

.liq-cmt {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.liq-cmt-top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.liq-cmt-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.liq-cmt-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-min-body, 16px);
    color: var(--text-primary);
}

.liq-cmt-bud {
    flex: 0 0 auto;
    font-family: var(--font-display, inherit);
    font-size: 13px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Amber, not red. Over a weekly target is information and quite often
   the right answer - the paying gig went long because it had to. */
.liq-cmt-bud.is-over {
    color: var(--necessary);
}

/* No target, no judgement. Family and Self show hours and nothing else,
   because a bar reading "60% of the way to enough family time" is not a
   thing to put on a screen. */
.liq-cmt-bud.is-none {
    color: var(--text-dim);
}

.liq-cmt-bar {
    display: block;
    height: 3px;
    margin-top: 7px;
    border-radius: 2px;
    background: var(--bg-raised);
    overflow: hidden;
}

.liq-cmt-bar i {
    display: block;
    height: 100%;
}


/* ----------------------------------------------------------------------------
   Split options

   Drawn to scale. The choice is a shape, not arithmetic, and two bars in
   proportion say it faster than "2h + 2h" reads.
   -------------------------------------------------------------------------- */

.liq-split-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 52px;
    margin-bottom: 8px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-raised);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.liq-split-bars {
    display: flex;
    flex: 0 0 46px;
    gap: 2px;
}

.liq-split-bars s {
    display: block;
    height: 22px;
    border-radius: 2px;
    background: var(--accent);
    text-decoration: none;
}

/* The second half is the one being freed up, so it reads as empty. */
.liq-split-bars s:last-child {
    background: var(--border-light, var(--border));
}

.liq-split-lbl {
    flex: 1 1 auto;
    font-size: var(--font-min-body, 16px);
    color: var(--text-primary);
}

.liq-split-at {
    flex: 0 0 auto;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
    white-space: nowrap;
}


/* ----------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.liq-plan-empty {
    padding: 26px 4px;
    color: var(--text-dim);
    font-size: var(--font-min-body, 16px);
}

.liq-plan-empty p {
    margin: 0 0 14px;
}

.liq-plan-empty .btn {
    min-height: var(--touch-target-touch, 44px);
}


/* ----------------------------------------------------------------------------
   Narrow phones
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {

    .liq-blk,
    .liq-seam {
        grid-template-columns: 44px 3px minmax(0, 1fr) auto;
        gap: 7px;
    }

    .liq-blk-body {
        padding: 9px;
    }

    /* The label goes and the target stays. At this width the word costs
       more than it carries, and "Log it" is unambiguous from position
       alone by the second time it is used. */
    .liq-blk-log {
        padding: 0 8px;
        font-size: 12px;
    }
}


/* ============================================================================
   Skeleton and commitments editors

   Both reuse .liq-plan-scrim, .liq-plan-panel and .liq-plan-empty. Three
   screens with three copies of the same bottom sheet is how the three
   drift apart, and these two are only ever reached from Plan.
   ============================================================================ */

.liq-skel {
    padding-bottom: 20px;
}

.liq-skel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.liq-skel-title {
    font-family: var(--font-display, inherit);
    font-size: 17px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.liq-skel-tabs {
    display: flex;
    gap: 6px;
}

.liq-skel-tab {
    min-height: var(--touch-target-touch, 44px);
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: var(--font-min-secondary, 13px);
    cursor: pointer;
    white-space: nowrap;
}

.liq-skel-tab.is-on {
    border-color: var(--accent-bord, var(--accent));
    background: var(--accent-dim, rgba(74, 158, 255, 0.18));
    color: var(--accent-light, var(--accent));
}

/* Four tracks on the skeleton screen and three on commitments, which is
   why the swatch spans two - the row shape stays one rule and the
   spine/swatch column simply carries a different thing. */
.liq-skel-row {
    display: grid;
    grid-template-columns: 62px 3px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    margin-bottom: 7px;
}

.liq-skel-row.is-off {
    opacity: 0.5;
}

.liq-skel-time {
    font-family: var(--font-display, inherit);
    font-size: 13px;
    line-height: 1.25;
    color: var(--text-dim);
    text-align: right;
}

.liq-skel-time b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.liq-skel-spine {
    align-self: stretch;
    min-height: 44px;
    border-radius: 2px;
    background: var(--border);
}

/* On the commitments screen the colour IS the row's identity, so it
   takes the first two tracks rather than sitting in a time column that
   has nothing to show. */
.liq-skel-swatch {
    grid-column: 1 / span 2;
    justify-self: end;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.liq-skel-body {
    display: block;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.liq-skel-name {
    display: block;
    font-size: var(--font-min-body, 16px);
    color: var(--text-primary);
}

.liq-skel-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
}

.liq-skel-x {
    min-width: 34px;
    min-height: var(--touch-target-touch, 44px);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.liq-skel-act {
    min-height: var(--touch-target-touch, 44px);
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: var(--font-min-secondary, 13px);
    cursor: pointer;
    white-space: nowrap;
}

.liq-skel-group {
    margin: 18px 0 8px 2px;
    font-family: var(--font-display, inherit);
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Gaps and overlaps. Stated once, in grey, and never blocked - a gap is
   usually time you deliberately did not account for, and an overlap is
   occasionally the truth. */
.liq-skel-note {
    margin: 14px 0 0;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
    line-height: 1.6;
}


/* ----------------------------------------------------------------------------
   Colour picker
   -------------------------------------------------------------------------- */

.liq-cm-colors {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
    margin-bottom: 12px;
}

.liq-cm-color {

    aspect-ratio: 1 / 1;
    min-height: 34px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 7px;
    cursor: pointer;
}

/* The ring sits outside the swatch so the colour itself is never
   obscured by the thing marking it as chosen. */
.liq-cm-color.is-on {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-elevated, var(--bg-surface));
}

.liq-cm-hint {
    margin: 0;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
    line-height: 1.6;
}


/* Both editors put two buttons in the panel actions, so that row becomes
   a pair rather than the single full-width button Plan uses. */
.liq-plan-panel-acts {
    display: flex;
    gap: 8px;
}

.liq-plan-panel-acts .btn {
    flex: 1 1 0;
    width: auto;
}

.liq-plan-panel-acts .btn-primary {
    flex: 2 1 0;
}


@media (max-width: 380px) {

    .liq-skel-row {
        grid-template-columns: 56px 3px minmax(0, 1fr) auto;
        gap: 7px;
    }

    .liq-cm-colors {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ============================================================================
   The day's ritual, on the screen a person actually lands on

   The check-in used to live on a screen nobody would visit once this one
   opened first - and closing days is the single habit in here worth
   protecting.
   ============================================================================ */

.liq-plan-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 11px 12px;
    border: 1px solid var(--accent-bord, var(--accent));
    border-radius: 9px;
    background: var(--accent-dim, rgba(74, 158, 255, 0.18));
    cursor: pointer;
}

.liq-plan-strip-t {
    flex: 1 1 auto;
    font-size: var(--font-min-secondary, 13px);
    color: var(--accent-light, var(--accent));
}

.liq-plan-strip-go {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 7px;
    background: var(--accent);
    color: var(--bg-base);
    font-size: var(--font-min-secondary, 13px);
    font-weight: 600;
}

/* Closing is an invitation, not a prompt. The day is over either way and
   a loud button at nine at night is the app asking for something rather
   than offering it. */
.liq-plan-strip.is-quiet {
    margin: 16px 0 0;
    border-color: var(--border);
    background: var(--bg-surface);
}

.liq-plan-strip.is-quiet .liq-plan-strip-t {
    color: var(--text-secondary);
}

.liq-plan-strip.is-quiet .liq-plan-strip-go {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
}


/* ----------------------------------------------------------------------------
   Mood row

   One tap, no count, no streak. A mood logged in one tap gets logged and
   one that costs a sheet does not.
   -------------------------------------------------------------------------- */

.liq-plan-mood {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-surface);
}

.liq-plan-mood-q {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
}

.liq-plan-mood-dots {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

/* The dot is 16px and the button around it is the full touch target -
   five 16px targets in a row would be unhittable at arm's length. */
.liq-plan-mood-dot {
    display: block;
    width: 30px;
    min-height: var(--touch-target-touch, 44px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.liq-plan-mood-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
}

/* Red, amber, grey, blue, green - five distinct steps. +1 and +2 were
   both green once, which made the top half of a five point scale a four
   point scale with a duplicate. */
.liq-plan-mood-dot.v0::after { background: var(--noise); }
.liq-plan-mood-dot.v1::after { background: var(--necessary); }
.liq-plan-mood-dot.v2::after { background: var(--text-dim); }
.liq-plan-mood-dot.v3::after { background: var(--accent); }
.liq-plan-mood-dot.v4::after { background: var(--signal); }


/* ----------------------------------------------------------------------------
   Dragon

   The badge marks the block; the line names the task. A dragon is still
   a task and is still set at check-in - what changed is that it is
   visible on the screen a person now lives on.
   -------------------------------------------------------------------------- */

.liq-blk-dragon {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: 7px;
    padding: 0 6px;
    border: 1px solid var(--dragon, var(--necessary));
    border-radius: 4px;
    background: rgba(255, 140, 66, 0.28);
    color: var(--text-primary);
    font-family: var(--font-display, inherit);
    font-size: 11px;
    letter-spacing: 0.06em;
}

.liq-blk-dragon-name {
    display: block;
    margin-top: 6px;
    font-size: var(--font-min-secondary, 13px);
    color: var(--dragon, var(--necessary));
}


/* ============================================================================
   Activity -- the record

   Day at the top, week below it. Scrolling is the only mode switch:
   evening lands on the day, Sunday scrolls past a quiet one into the
   week. No toggle and no remembered state, so there is nothing to check
   before reading.
   ============================================================================ */

.liq-act {
    padding-bottom: 20px;
}

.liq-act-card {
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
}

.liq-act-t {
    margin: 0 0 10px;
    font-family: var(--font-display, inherit);
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.liq-act-big {
    display: block;
    font-family: var(--font-display, inherit);
    font-size: 30px;
    line-height: 1;
    color: var(--text-primary);
}

.liq-act-sub {
    margin: 5px 0 0;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
}

/* Planned and logged, side by side. Either alone says little - a plan is
   a wish and a total is a number without a scale. */
.liq-act-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.liq-act-pair .liq-act-card {
    margin-bottom: 12px;
}


/* ----------------------------------------------------------------------------
   Streak
   -------------------------------------------------------------------------- */

.liq-act-streak {
    display: flex;
    gap: 5px;
}

.liq-act-cell {
    flex: 1 1 0;
    height: 32px;
    border-radius: 5px;
    background: var(--bg-raised);
}

.liq-act-cell.is-closed {
    background: var(--accent);
}

/* A ring, not a fill. An open day is not a lesser closed day - it is a
   different state, and shading it would rank the two. */
.liq-act-cell.is-open {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--necessary);
}


/* ----------------------------------------------------------------------------
   Where the week went
   -------------------------------------------------------------------------- */

.liq-act-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.liq-act-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.liq-act-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.liq-act-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-min-body, 16px);
    color: var(--text-secondary);
}

.liq-act-num {
    flex: 0 0 auto;
    font-family: var(--font-display, inherit);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Amber, not red. Over a weekly target is information and often the
   right answer - the paying gig ran long because it had to. */
.liq-act-num.is-over {
    color: var(--necessary);
}


/* ----------------------------------------------------------------------------
   Reflection and quote
   -------------------------------------------------------------------------- */

.liq-act-quote {
    margin: 0;
    font-size: var(--font-min-body, 16px);
    line-height: 1.6;
    color: var(--text-secondary);
    font-style: italic;

    /* Written prose, kept as written. */
    white-space: pre-wrap;
    word-break: break-word;
}

.liq-act-attr {
    margin: 8px 0 0;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-dim);
}


@media (max-width: 380px) {

    .liq-act-pair {
        gap: 8px;
    }

    .liq-act-big {
        font-size: 26px;
    }
}

/* The dragon picker reuses .liq-cmt. Orange rather than the accent,
   because this row is not a choice among equals - it is the one you are
   avoiding, and it should look like the dragon mark it produces. */
.liq-cmt.is-on {
    border-color: var(--dragon, var(--necessary));
    background: rgba(255, 140, 66, 0.16);
}

/* ----------------------------------------------------------------------------
   The day's principle

   One of 152 the person wrote, chosen for today. It sat here as loose
   italic text with nothing to say it had been chosen, by what, or why -
   which is why it read as a stray sentence rather than as doctrine.

   The amber rule is the anchor. Amber because this is the app's "pay
   attention" colour and a principle is doctrine rather than
   information - but as a 3px edge rather than a fill, because a filled
   amber panel means "something is wrong" everywhere else here and this
   appears every single day.
   -------------------------------------------------------------------------- */

.liq-prin {
    margin: 0 0 14px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--necessary);
    border-radius: 9px;
    background: var(--bg-surface);
    cursor: pointer;
}

.liq-prin-k {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-family: var(--font-display, inherit);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--necessary);
}

.liq-prin-mark {
    font-size: 9px;
    line-height: 1;
}

/* 14px, level with the block names below. The day is what this screen is
   for and the principle should not push it down the page - at 16 it led,
   which is one thing too many leading. */
.liq-prin-t {
    margin: 0;
    font-size: 14px;
    line-height: 1.62;
    color: var(--text-primary);
    font-style: italic;
}

.liq-prin-s {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--text-dim);
}

/* Collapsed, the first line stays. An empty bar asking to be reopened is
   furniture; one line is a reminder, which is the whole job. */
.liq-prin.is-shut {
    padding: 9px 12px;
}

.liq-prin.is-shut .liq-prin-k,
.liq-prin.is-shut .liq-prin-s {
    display: none;
}

.liq-prin.is-shut .liq-prin-t {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-dim);
    font-size: 13px;
}


/* ----------------------------------------------------------------------------
   Icon pills on the seam

   Five word pills measured about 350px and the seam gets 269 - so two of
   them became marks. Dragon and Empty are the right two to lose their
   words: the dragon is the same glyph it puts on the block, and a red x
   for discarding is not a convention anyone has to learn.
   -------------------------------------------------------------------------- */

/* Wider than a word pill needs to be. A 16px mark in a 38px box is a
   small target dressed as a button - the pill is what gets tapped, so
   the pill is what has to be thumb-sized. */
.liq-seam-btn.is-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0 16px;
}

/* Sized here rather than in the markup, so the icon's own width and
   height attributes do not have to be trusted or edited. */
.liq-seam-btn.is-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* NOTHING here styles the dragon's paint. It is the one filled icon in
   the set - views-core draws it with fill="currentColor" and no stroke,
   deliberately, because a stroked dragon at this size is unreadable - so
   it already inherits colour from the button and needs no help.

   The stroke rule belongs to the x alone, which is drawn inline here and
   is the only stroked mark in a seam pill. A blanket rule over every svg
   put fill: none on the dragon and outlined all four of its paths. */
.liq-seam-btn.is-icon .liq-x svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Amber whether it is set or not. It was inheriting the row's grey,
   which made a dragon at 16px unreadable - the glyph is a silhouette and
   a silhouette in grey on grey is a smudge. currentColor does the rest:
   the icon is drawn with fill="currentColor" precisely so the button can
   colour it. */
.liq-seam-btn.is-icon[data-act="dragon"] {
    border-style: solid;
    border-color: rgba(255, 140, 66, 0.45);

    /* Lighter than the blue behind Resize, on purpose. Three filled
       pills at equal strength is three things shouting; the two you use
       most should carry the most weight. */
    background: rgba(255, 140, 66, 0.10);
    color: var(--dragon, var(--necessary));
}

/* Set. Twice the fill of the unset state and a full-strength border, so
   the difference is visible without reading the glyph. */
.liq-seam-btn.is-dragon-on {
    border-color: var(--dragon, var(--necessary));
    background: rgba(255, 140, 66, 0.26);
    color: var(--dragon, var(--necessary));
}

/* Solid rather than dashed, and the only red on the row. Empty is the
   one control here that throws away something chosen. */
.liq-seam-btn.is-danger {
    border-style: solid;
    border-color: rgba(239, 83, 80, 0.4);

    /* The faintest of the three. It is the only destructive control on
       the row and it should be findable rather than inviting. */
    background: rgba(239, 83, 80, 0.09);
    color: var(--noise);
}

/* A one-off block reads as what it is, with the commitment it is filed
   under underneath in that commitment's colour. Mowing the grass is not
   House & yard, but its two hours are. */
.liq-blk-under {
    display: block;
    margin-top: 3px;
    font-size: var(--font-min-secondary, 13px);
    opacity: 0.85;
}

/* The one-off text box in the fill sheet. */
.liq-fill-label {
    width: 100%;
    min-height: 44px;
    margin-bottom: 6px;

    /* 16px or iOS zooms the page when it takes focus. */
    font-size: var(--font-min-body, 16px);
}