/* Habit tracker (/habit-tracker): what is its own, the habit grid (tick cells, day heads, streaks) and the heatmap.
   Everything else (stage, panels, fields, buttons, progress bars, colours) comes from the app kit (css/app-kit,
   docs/app-kit.md). Loaded only on this app's page (StylePaths). */

/* The app's own colours: the default tick colour, the heatmap greens, and the colour labels a user gives a habit. */
.habit-landing-app {
    --ht-tick: #16a34a;
    --ht-heat1: #bbf7d0;
    --ht-heat2: #4ade80;
    --ht-heat3: #16a34a;
    --ht-heat4: #166534;
    --ht-red: #ef4444;
    --ht-orange: #f97316;
    --ht-yellow: #eab308;
    --ht-green: #22c55e;
    --ht-blue: #3b82f6;
    --ht-purple: #a855f7;
}

.habit-landing-app[data-theme="dark"] > .filter-landing-stage {
    --ht-tick: #22c55e;
    --ht-heat1: #14532d;
    --ht-heat2: #15803d;
    --ht-heat3: #22c55e;
    --ht-heat4: #86efac;
}

.habit-landing-app > .filter-landing-stage.habit-landing-stage {
    position: relative;
    gap: var(--ak-space-3);
}

/* Full width, also where the shared narrow-screen layout (seo-pages.css, up to 960px) starts the stage's children at
   their own width: the grid and the heatmap then scroll inside instead of running off the stage. */
.habit-landing-app > .filter-landing-stage.habit-landing-stage > * {
    align-self: stretch;
}

/* In app mode the stage has a fixed height and hides what does not fit: the grid and the two panels share the height,
   each scrolling inside (the heatmap scrolls in its panel); the panels give way first, so the grid stays usable. */
.habit-landing-app > .filter-landing-stage.habit-landing-stage > .ak-panel {
    flex-shrink: 4;
    min-height: 0;
    overflow: hidden;
}

.habit-landing-app .ht-head {
    display: flex;
    flex-direction: column;
    gap: var(--ak-space-1);
}

.habit-landing-app .ht-title {
    font-size: var(--ak-fs-lg);
}

.habit-landing-app .ht-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ak-space-2);
}

.habit-landing-app .ht-period {
    flex: 1 1 auto;
    min-width: 10rem;
    margin: 0;
    color: var(--ak-text);
    font-weight: 600;
    text-align: center;
}

/* The chevrons point the way the dates go, also on a right-to-left page. */
[dir="rtl"] .habit-landing-app .ht-flip .ak-icon {
    transform: scaleX(-1);
}

.habit-landing-app .ht-grid {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.habit-landing-app .ht-empty {
    border: 1px dashed var(--ak-border);
    border-radius: var(--ak-radius);
}

.habit-landing-app .ht-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.2rem;
    color: var(--ak-text);
    font-size: 0.9rem;
}

.habit-landing-app .ht-table th,
.habit-landing-app .ht-table td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.habit-landing-app .ht-table .ht-th-habit,
.habit-landing-app .ht-table .ht-habit {
    min-width: 9rem;
    text-align: start;
}

.habit-landing-app .ht-table .ht-th-stat {
    padding: 0 0.3rem;
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* Day heads: a button that picks the day for the note. */
.habit-landing-app .ht-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 1.9rem;
    padding: 0.15rem 0;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: none;
    color: var(--ak-muted);
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.2;
    cursor: pointer;
}

.habit-landing-app .ht-day[aria-pressed="true"] {
    border-color: var(--ak-accent);
    color: var(--ak-text);
}

.habit-landing-app .ht-day.has-note .ht-day-n {
    text-decoration: underline dotted;
}

.habit-landing-app .ht-day-n {
    font-size: var(--ak-fs-sm);
    font-weight: 600;
}

.habit-landing-app .is-today .ht-day {
    color: var(--ak-accent);
}

/* A habit's colour: its label, else the tick green. */
.habit-landing-app .ht-row {
    --ht-color: var(--ht-tick);
}

.habit-landing-app .ht-row[data-color="red"] { --ht-color: var(--ht-red); }
.habit-landing-app .ht-row[data-color="orange"] { --ht-color: var(--ht-orange); }
.habit-landing-app .ht-row[data-color="yellow"] { --ht-color: var(--ht-yellow); }
.habit-landing-app .ht-row[data-color="green"] { --ht-color: var(--ht-green); }
.habit-landing-app .ht-row[data-color="blue"] { --ht-color: var(--ht-blue); }
.habit-landing-app .ht-row[data-color="purple"] { --ht-color: var(--ht-purple); }

.habit-landing-app .ht-table .ht-habit {
    padding: 0.3rem 0.4rem 0.3rem 0.55rem;
    border-inline-start: 4px solid var(--ht-color);
    border-radius: 0.35rem;
    background: var(--ak-panel);
}

.habit-landing-app .ht-row.is-archived .ht-habit {
    opacity: 0.65;
}

.habit-landing-app .ht-habit-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.habit-landing-app .ht-habit-target {
    display: block;
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
    font-weight: 400;
}

.habit-landing-app .ht-habit-tools {
    display: flex;
    gap: 0.15rem;
    margin-top: 0.2rem;
}

.habit-landing-app .ht-icon {
    color: var(--ak-muted);
}

.habit-landing-app .ht-icon:hover:not(:disabled) {
    color: var(--ak-text);
}

.habit-landing-app .ht-icon:disabled {
    opacity: 0.35;
}

/* Tick cells: filled with the habit's colour when done. */
.habit-landing-app .ht-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--ak-border);
    border-radius: 0.35rem;
    background: var(--ak-field);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--ak-duration) var(--ak-ease), border-color var(--ak-duration) var(--ak-ease);
}

.habit-landing-app .ht-cell .ak-icon {
    stroke-width: 3;
}

.habit-landing-app .ht-cell:hover:not(:disabled) {
    border-color: var(--ht-color);
}

.habit-landing-app .ht-cell.is-done {
    border-color: var(--ht-color);
    background: var(--ht-color);
}

.habit-landing-app .ht-cell:disabled {
    opacity: 0.4;
    cursor: default;
}

.habit-landing-app .ht-td.is-today .ht-cell:not(.is-done) {
    border-color: var(--ak-accent);
}

.habit-landing-app .ht-day:focus-visible,
.habit-landing-app .ht-cell:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 2px;
}

.habit-landing-app .ht-table .ht-stat {
    padding: 0 0.3rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The completion bar (ak-progress) in the habit's colour. */
.habit-landing-app .ht-bar {
    --ak-progress-color: var(--ht-color);
    display: block;
    height: 0.25rem;
    margin-top: 0.15rem;
}

.habit-landing-app .ht-heat {
    max-width: 100%;
    overflow-x: auto;
}

.habit-landing-app .ht-heat-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 0.8rem);
    grid-auto-columns: 0.8rem;
    gap: 0.18rem;
    width: max-content;
}

.habit-landing-app .ht-heat-cell {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.15rem;
    background: var(--ak-grid);
}

.habit-landing-app .ht-heat-cell.is-future { background: transparent; }
.habit-landing-app .ht-heat-cell[data-level="1"] { background: var(--ht-heat1); }
.habit-landing-app .ht-heat-cell[data-level="2"] { background: var(--ht-heat2); }
.habit-landing-app .ht-heat-cell[data-level="3"] { background: var(--ht-heat3); }
.habit-landing-app .ht-heat-cell[data-level="4"] { background: var(--ht-heat4); }

.habit-landing-app .ht-heat-legend {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0.35rem 0 0;
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
}

.habit-landing-app .ht-form {
    margin: var(--ak-space-2) 0;
}

.habit-landing-app .ht-options {
    margin-bottom: var(--ak-space-2);
}

.habit-landing-app .ht-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--ak-space-2);
}

/* Phones: the stage uses the full width and the grid scrolls sideways in month view. */
@media (max-width: 600px) {
    .habit-landing-app > .filter-landing-stage.habit-landing-stage {
        width: 100%;
        max-width: none;
        padding: 0.75rem 0.5rem;
    }

    .habit-landing-app .ht-table .ht-th-habit,
    .habit-landing-app .ht-table .ht-habit {
        min-width: 7rem;
    }

    .habit-landing-app .ht-two {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .habit-landing-app .ht-cell {
        transition: none;
    }
}