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

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

    Platform: IQ Platform
    Created : 2026-07-28
    Updated : 2026-08-04
    Version : 2.3.0

    The Projects screen. Every selector is namespaced .liq-proj- , a
    prefix that did not exist before this file, so nothing here can
    collide with or duplicate anything already in product.css.

    Loads AFTER product.css and BEFORE mobile-tabs.css, since
    mobile-tabs owns the touch-width shell overrides.

    Every colour is a token read. No hex anywhere in this file - a
    seventh theme has to be one [data-theme] block, not a rewrite.

    Status colour mapping, deliberate:
        active    accent    - the declared commitment
        paused    border  - the default card treatment. Unlimited and
                  unremarked, on purpose: inventory is not a problem.
        done      signal    - green. It closed.

    Inactive gets no rule of its own because "no treatment" IS the
    treatment. A card that colours everything you own turns a bookshelf
    into an accusation.

    Staleness gets a dashed left border rather than a colour wash, and
    only active projects can carry it - the server clamps isStale to
    active. A card that goes red every time you look at it stops
    registering and starts reading as a verdict on the person.

    Version History:
        2.3.0 - 2026-08-04 : Status class is --paused; the stored value was
                             renamed from inactive to match the label.
        2.2.0 - 2026-08-04 : Status picker segment. Three states, always
                             visible, current one lit.
        2.1.0 - 2026-08-03 : Collapsed rows. One line per project, opening
                             on tap. The card used to render its
                             description, meta and five buttons whether
                             or not any of it was wanted.
        2.0.0 - 2026-07-29 : Three statuses. paused and abandoned card
                             and pill rules removed. The chip row is a
                             wrapping flex row and a 4-column grid on a
                             phone - no horizontal scroller at all,
                             because four chips fit and seven did not.
                             The overflow rules that were managing that
                             scroll are gone with it, and so is a whole
                             class of overflow-axis bug.
        1.0.2 - 2026-07-29 : overflow-x:hidden -> clip; hidden forces
                             overflow-y:auto and added a stray scrollbar.
        1.0.1 - 2026-07-28 : Horizontal overflow fixed. The filter-chip
                             row is a flex child with overflow-x:auto,
                             and a flex child defaults to
                             min-width:auto - so it refused to shrink
                             below its content width, pushed .liq-proj-
                             wrap wider than the viewport, and the whole
                             PAGE scrolled sideways instead of just the
                             chips. min-width:0 on every flex child that
                             holds variable content, plus overflow-x:
                             hidden on the wrap as a backstop. Long
                             project names now break instead of pushing.
                             Card actions drop to 2 columns on a phone -
                             five buttons across 390px was unreadable.
        1.0.0 - 2026-07-28 : Initial version.
================================================================================
*/

/* Scoped box model. Everything in this file sizes predictably without
   touching anything outside the Projects screen. */
.liq-proj-wrap,
.liq-proj-wrap * {
    box-sizing: border-box;
}

.liq-proj-wrap {
    display: flex;

    flex-direction: column;
    gap: var(--space-4, 16px);
    padding-bottom: calc(var(--tabbar-h, 56px) + var(--space-4, 16px));

    /* Backstop only. Nothing inside this screen scrolls sideways any
       more; a long project name breaks instead of pushing. */
    max-width: 100%;
    overflow-x: clip;
}

.liq-proj-loading,
.liq-proj-empty {
    padding: var(--space-6, 24px);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-min-body, 14px);
}

.liq-proj-empty p {
    margin: 0 0 var(--space-4, 16px) 0;
}

/* ---------------------------------------------------------------------------
   Header strip. Close rate first, inventory last and quiet.
   --------------------------------------------------------------------------- */

.liq-proj-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: var(--space-2, 8px);
}

.liq-proj-stats--dead {
    display: block;
    padding: var(--space-3, 12px);
    color: var(--text-dim);
    font-size: var(--font-min-secondary, 13px);
}

.liq-proj-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-3, 12px) var(--space-2, 8px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    min-height: var(--touch-target-min, 40px);
}

.liq-proj-stat-val {
    font-family: var(--font-display, inherit);
    font-size: 22px;
    line-height: 1.1;
    color: var(--text-primary);
}

.liq-proj-stat-lbl {
    font-size: var(--font-min-display, 12px);
    color: var(--text-dim);
    text-align: center;
    line-height: 1.25;
}

.liq-proj-stat--good .liq-proj-stat-val { color: var(--signal); }
.liq-proj-stat--warn .liq-proj-stat-val { color: var(--necessary); }

.liq-proj-note {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-secondary);
    background: var(--bg-surface);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-sm, 4px);
}

.liq-proj-note--warn {
    color: var(--text-primary);
    border-left-color: var(--necessary);
}

/* ---------------------------------------------------------------------------
   Filter row. Four chips, so they wrap rather than scroll.
   --------------------------------------------------------------------------- */

.liq-proj-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
    min-width: 0;
}

.liq-proj-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);

    /* min-width:0 stays. A flex child defaults to min-width:auto and
       refuses to shrink below its content, which is what pushed the
       whole page sideways in 1.0.0. */
    min-width: 0;
    flex: 1 1 auto;
}

.liq-proj-chip {
    flex: 0 0 auto;
    min-height: var(--touch-target-min, 40px);
    padding: 0 var(--space-3, 12px);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    color: var(--text-secondary);
    font-size: var(--font-min-secondary, 13px);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast, 120ms ease);
}

.liq-proj-chip:hover {
    color: var(--text-primary);
    border-color: var(--accent-bord);
}

.liq-proj-chip.is-active {
    background: var(--accent-dim);
    border-color: var(--accent-bord);
    color: var(--accent-light);
}

.liq-proj-new {
    flex: 0 0 auto;
    min-height: var(--touch-target-touch, 44px);
    padding: 0 var(--space-4, 16px);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-md, 8px);
    color: var(--bg-base);
    font-size: var(--font-min-body, 14px);
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Inline create / edit panel
   --------------------------------------------------------------------------- */

.liq-proj-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    background: var(--bg-elevated, var(--bg-surface));
    border: 1px solid var(--accent-bord);
    border-radius: var(--radius-md, 8px);
}

.liq-proj-input {
    width: 100%;
    min-height: var(--touch-target-touch, 44px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-min-body, 14px);
    box-sizing: border-box;
}

.liq-proj-input:focus {
    outline: none;
    border-color: var(--accent);
}

.liq-proj-textarea {
    resize: vertical;
    min-height: 64px;
    padding-top: var(--space-3, 12px);
}

.liq-proj-form-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.liq-proj-lbl {
    flex: 0 0 auto;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-secondary);
}

.liq-proj-date {
    flex: 1 1 auto;
}

.liq-proj-form-actions {
    display: flex;
    gap: var(--space-2, 8px);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.liq-proj-btn {
    min-height: var(--touch-target-touch, 44px);
    padding: 0 var(--space-4, 16px);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    color: var(--text-secondary);
    font-size: var(--font-min-body, 14px);
    cursor: pointer;
    transition: var(--transition-fast, 120ms ease);
}

.liq-proj-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-bord);
}

.liq-proj-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-base);
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.liq-proj-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.liq-proj-card {
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

/* The collapsed row IS the toggle. One line per project: a status dot,
   the name, and whether it is moving. Everything else waits until asked
   for - ten projects used to take ten screens because every card carried
   five buttons nobody had asked to see. */
.liq-proj-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    min-height: 60px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: transparent;
    border: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.liq-proj-card.is-open .liq-proj-row {
    background: var(--bg-raised);
}

/* Status as a dot rather than a pill. A pill puts a word in front of the
   name on every row; the dot says the same thing in 10px and the sub
   line spells it out anyway. */
.liq-proj-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-light, var(--border));
}

.liq-proj-dot--active   { background: var(--accent); }
.liq-proj-dot--paused { background: var(--text-dim); }
.liq-proj-dot--done     { background: var(--signal); }

.liq-proj-rowtx {
    flex: 1 1 auto;
    min-width: 0;
}

.liq-proj-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--font-min-display, 12px);
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.liq-proj-chev {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
}

.liq-proj-body {
    padding: 0 var(--space-4, 16px) var(--space-4, 16px);
}

.liq-proj-card--active { border-left-color: var(--accent); }
.liq-proj-card--done   { border-left-color: var(--signal); opacity: 0.72; }

/* Staleness is a border style, not a colour wash. A card that shouts
   every time you open the screen stops being read. */
.liq-proj-card.is-stale {
    border-left-style: dashed;
}

.liq-proj-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
    min-width: 0;
}

.liq-proj-name {
    display: block;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;

    /* One line. A long project name wrapping to three lines defeats the
       point of collapsing the card in the first place. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.liq-proj-pill {
    flex: 0 0 auto;
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--font-min-display, 12px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.liq-proj-pill--active {
    background: var(--accent-dim);
    border-color: var(--accent-bord);
    color: var(--accent-light);
}

.liq-proj-pill--done {
    background: var(--signal-dim);
    border-color: var(--signal-bord);
    color: var(--signal);
}

.liq-proj-desc {
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0;
    font-size: var(--font-min-secondary, 13px);
    color: var(--text-secondary);
    line-height: 1.45;
}

.liq-proj-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--font-min-display, 12px);
    color: var(--text-dim);
}

.liq-proj-meta-item.is-stale {
    color: var(--necessary);
}

.liq-proj-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
    margin-top: var(--space-1, 4px);
}

.liq-proj-act {
    min-width: 0;
    min-height: var(--touch-target-min, 40px);
    padding: 0 var(--space-3, 12px);
    background: transparent;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-secondary);
    font-size: var(--font-min-display, 12px);
    cursor: pointer;
    transition: var(--transition-fast, 120ms ease);
}

.liq-proj-act:hover {
    color: var(--text-primary);
    border-color: var(--accent-bord);
}

/* ---------------------------------------------------------------------------
   Touch widths. The chip row and the action row are the two things that
   break first on a phone, so both get an explicit grid instead of a
   wrapped scatter.
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {

    .liq-proj-bar {
        flex-direction: column;
        align-items: stretch;
    }

    /* Four equal cells across the width. No scroller, so no
       overflow-axis pairing to get wrong. */
    .liq-proj-chips {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
    }

    .liq-proj-chip {
        padding: 0 var(--space-1, 4px);
        font-size: var(--font-min-display, 12px);
        text-align: center;
    }

    .liq-proj-new {
        width: 100%;
    }

    /* Two columns, not four. Four actions across 390px gave 90px per
       button and "Stand down" had nowhere to go. */
    .liq-proj-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .liq-proj-act {
        min-height: var(--touch-target-touch, 44px);
        padding: 0 var(--space-2, 8px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .liq-proj-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .liq-proj-stat-val {
        font-size: 19px;
    }
}


/* ---- status picker --------------------------------------------------------

   Three segments, all three always present, the current one lit. The old
   card showed only the states you were NOT in, which made "how do I
   pause this" unanswerable - the answer was a button that appeared only
   once you had already left. */

.liq-proj-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1, 4px);
    margin-bottom: var(--space-3, 12px);
}

.liq-proj-st {
    min-width: 0;
    min-height: var(--touch-target-touch, 44px);
    padding: 0 var(--space-2, 8px);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-min-secondary, 13px);
    cursor: pointer;
    transition: var(--transition-fast, 120ms ease);
}

.liq-proj-st.is-on {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent-light);
}

/* Edit and Delete are not status changes and should not look like them. */
.liq-proj-actions {
    grid-template-columns: repeat(2, 1fr);
}