/* =====================================================================
   QuickHits (Chronoline) application styles.

   Rebuilt stylesheet. The original app.css was overwritten during an
   unfinished redesign and no backup survived, so this file was
   reconstructed from the class names, inline styles, and structural
   comments still present across app/Views/**, and from trello.css,
   which documents itself as "layered over app.css, redefining tokens
   the existing stylesheet already reads" - that comment is what fixed
   the token names and the 600 / 768 / 960 / 1280px breakpoints used
   below.

   Loaded before trello.css, which re-tints the whole application by
   overriding the --primary / --ink / --rule / --surface family of
   custom properties defined here.
   ===================================================================== */

/* ===========================
   DESIGN TOKENS
=========================== */

:root {
    /* -----------------------------------------------------------------
       Brand palette, as supplied. Six brand colours with tints derived
       from them, plus the legacy alias names (pine/violet/ochre/clay)
       that the badge, chip, and gantt-legend modifiers read throughout
       the views.
       ----------------------------------------------------------------- */
    --primary:        #023A51;
    --primary-deep:   #012836;
    --primary-tint:   #E2ECF1;
    --secondary:      #DDCBA4;
    --secondary-deep: #8A6F3C;
    --secondary-tint: #F8F3E9;
    --tertiary:       #A63D40;
    --tertiary-deep:  #82302C;
    --tertiary-tint:  #F7E8E8;
    --accent-1:       #6494AA;
    --accent-1-tint:  #E8F0F4;
    --accent-2:       #59667D;
    --accent-2-tint:  #EAEDF2;

    --ink:          #192A3D;
    --ink-soft:     #3B4A5D;
    --ink-muted:    #64768A;

    --rule:         #DDE4EA;
    --rule-strong:  #C3CFD9;

    --paper:        #F1F4F7;
    --surface:      #FFFFFF;
    --surface-sunk: #F7F9FB;

    /* Legacy aliases, mapped onto the palette above. These are what the
       badge--pine / --violet / --ochre / --clay modifiers, the gantt
       legend, and inline task-colour styles resolve against. */
    --pine:         var(--primary);
    --pine-deep:    var(--primary-deep);
    --pine-wash:    var(--primary-tint);
    --violet:       var(--accent-2);
    --violet-wash:  var(--accent-2-tint);
    --ochre:        var(--secondary-deep);
    --ochre-wash:   var(--secondary-tint);
    --clay:         var(--tertiary);
    --clay-wash:    var(--tertiary-tint);

    --success: var(--pine);
    --warning: var(--ochre);
    --danger:  var(--tertiary-deep);

    --radius:    10px;
    --radius-sm: 6px;
    --shadow:    0 8px 24px rgba(2, 20, 30, .08);
    --shadow-sm: 0 1px 2px rgba(2, 20, 30, .08);
    --transition: .18s ease;

    --tabbar-height: 3.5rem;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===========================
   RESET
=========================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--ink); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; margin-bottom: .6rem; }
h3 { font-size: 1rem; margin-bottom: .3rem; }
h4 { margin-bottom:1rem;}
p { line-height: 1.55; }

hr { border: 0; border-top: 1px solid var(--rule); }

fieldset { border: 0; }
legend { font-weight: 600; margin-bottom: .3rem; padding: 0; }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Skip link, hidden until focused */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

a.skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 2000;
    width: auto;
    height: auto;
    padding: .6rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
}

/* ===========================
   UTILITIES
=========================== */

.muted { color: var(--ink-muted); }
.small { 
    font-size: .8125rem; 
    margin-top: 0.5rem;
}
.numeric { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.centre { text-align: center; }
.is-late { color: var(--clay); font-weight: 600; }

.stack { display: flex; flex-direction: column; gap: .75rem; }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }

@media (min-width: 700px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--ink-muted);
}

.empty h3 { color: var(--ink); margin-bottom: .35rem; }
.empty .button { margin-top: 1rem; }

@media print {
    .no-print { display: none !important; }
}

/* ===========================
   BUTTONS
=========================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #FFFFFF;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.button:hover { background: var(--primary-deep); color: #FFFFFF; text-decoration: none; }
.button:disabled { opacity: .55; cursor: not-allowed; }

.button--ghost {
    background: transparent;
    border-color: var(--rule-strong);
    color: var(--ink);
}
.button--ghost:hover { background: var(--surface-sunk); color: var(--ink); border-color: var(--rule-strong); }

.button--quiet {
    min-height: 40px;
    padding: 0 .65rem;
    background: transparent;
    color: var(--primary);
    font-size: .8125rem;
}
.button--quiet:hover { background: var(--primary-tint); color: var(--primary-deep); }

.button--accent { background: var(--pine); }
.button--accent:hover { background: color-mix(in srgb, var(--pine) 80%, black); }

.button--danger { 
    background: var(--danger); 
    margin-top: 1rem;
}
.button--danger:hover { background: color-mix(in srgb, var(--danger) 80%, black); }

/* Kept the same height as every other field and button so a row that mixes
   sizes (a filter bar, a table's inline actions) never looks uneven; "small"
   now only means tighter padding and type, not a shorter box. */
.button--small { min-height: 40px; padding: 0 .75rem; font-size: .8125rem; }
.button--block { display: flex; width: 100%; margin-top: 1rem;}
.button--icon { min-width: 40px; padding: 0; }

/* ===========================
   FORMS
=========================== */

.field { display: block; margin-bottom: 1rem; }

.field label,
.field__label {
    display: block;
    margin-bottom: .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], input[type="time"],
input[type="number"], input[type="color"], select, textarea {
    width: 100%;
    min-height: 40px;
    padding: 0 .75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .875rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

textarea { min-height: unset; padding: .6rem .75rem; resize: vertical; }

input[type="color"] { min-height: 40px; padding: .25rem; cursor: pointer; }

/* Left to the browser, a <select> draws its own chrome around the arrow and
   never quite lines up with a plain text input of the same declared height,
   even with a matching min-height. Turning that native chrome off and
   drawing the arrow ourselves is what makes every dropdown match the single
   line fields exactly, in every browser. */
select,
.field select {
    height: 40px;
    padding-right: 2.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364768A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: .85rem;
}

select::-ms-expand { display: none; }

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
    outline: none;
}

input.is-invalid, select.is-invalid, textarea.is-invalid {
    border-color: var(--danger);
}

.field__hint {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--ink-muted);
}

.field__error {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--danger);
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    cursor: pointer;
}

.checkbox input { width: auto; min-height: auto; accent-color: var(--primary); }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
}

.filter-bar .field { flex: 1 1 12rem; min-width: 0; margin-bottom: 0; }

/* ===========================
   CARDS AND PANELS
=========================== */

.card {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.card--flush { padding: 0; }
.card--flush > .card__head { padding: 1.1rem 1.25rem 0; }

.card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.card__head h2 { margin: 0; }

.panel {
    padding: 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
}

/* ===========================
   BADGES AND NOTICES
=========================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--ink-soft);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge--pine   { background: var(--pine-wash);   color: var(--pine); }
.badge--violet { background: var(--violet-wash); color: var(--violet); }
.badge--ochre  { background: var(--ochre-wash);  color: var(--ochre); }
.badge--clay   { background: var(--clay-wash);   color: var(--clay); }
.badge--ink    { background: var(--surface-sunk); color: var(--ink); }

.notice {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--surface-sunk);
    color: var(--ink-soft);
    font-size: .875rem;
}

.notice--success { background: var(--pine-wash); border-color: var(--pine); color: var(--pine); }
.notice--info     { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-deep); }
.notice--warning  { background: var(--ochre-wash); border-color: var(--ochre); color: #7A5716; }
.notice--error    { background: var(--clay-wash); border-color: var(--clay); color: var(--clay); }

/* ===========================
   TABLES
=========================== */

.table-wrap { overflow-x: auto; }

.table, table.data {
    width: 100%;
    font-size: .875rem;
}

.table th, table.data th,
.table td, table.data td {
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: middle;
}

.table thead th, table.data thead th {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-bottom: 2px solid var(--rule);
}

.table tbody tr:hover, table.data tbody tr:hover { background: var(--surface-sunk); }

.table tfoot td, table.data tfoot td { font-weight: 700; border-top: 2px solid var(--rule); border-bottom: 0; }

table.data th.right, table.data td.right { text-align: right; }

/* Responsive tables collapse to label / value rows on a phone. */
@media (max-width: 699px) {
    table.data.responsive thead { display: none; }
    table.data.responsive, table.data.responsive tbody, table.data.responsive tr, table.data.responsive td { display: block; width: 100%; }
    table.data.responsive tr { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
    table.data.responsive td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .25rem 0;
        border-bottom: 0;
        text-align: right;
    }
    table.data.responsive td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--ink-muted);
        text-align: left;
    }
    table.data.responsive td:empty,
    table.data.responsive td[data-label=""] { display: none; }
}

/* ===========================
   PAGE HEAD
=========================== */

.breadcrumbs {
    margin-bottom: .6rem;
    font-size: .8125rem;
    color: var(--ink-muted);
}

.breadcrumbs a { color: var(--ink-muted); }

.eyebrow {
    margin-bottom: .2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-head__text h1 { margin: 0; }
.page-head__meta { margin-top: .3rem; font-size: .875rem; color: var(--ink-muted); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ===========================
   TILES
=========================== */

.tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 700px) {
    .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tile {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    border-top: 3px solid var(--primary);
}

.tile__label { font-size: .75rem; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.tile__value { font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.tile__note { font-size: .75rem; color: var(--ink-muted); }

.tile--violet { border-top-color: var(--violet); }
.tile--warn   { border-top-color: var(--ochre); }
.tile--alert  { border-top-color: var(--clay); }
.tile--alert .tile__value { color: var(--clay); }

/* ===========================
   RECORD LIST
=========================== */

.record-list { display: flex; flex-direction: column; }

.record {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--rule);
}

.record:last-child { border-bottom: 0; }

.record__spine { flex: 0 0 4px; align-self: stretch; border-radius: 4px; background: var(--rule-strong); }
.record__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.record__title { font-size: .875rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.record__title a { color: var(--ink); }

.record__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: var(--ink-muted);
}

.record__aside { flex: 0 0 auto; font-size: .8125rem; color: var(--ink-muted); }

/* ===========================
   METER
=========================== */

.meter {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-sunk);
    overflow: hidden;
}

.meter__fill { display: block; height: 100%; background: var(--primary); }
.meter__fill--full { background: var(--pine); }
.meter__fill--over { background: var(--clay); }

/* ===========================
   WEEKRAIL
=========================== */

.weekrail {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 7rem;
    padding-top: .5rem;
}

.weekrail__day {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    height: 100%;
}

.weekrail__bar {
    display: flex;
    align-items: flex-end;
    flex: 1 1 auto;
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--surface-sunk);
}

.weekrail__fill {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--primary);
}

.weekrail__fill--empty { background: transparent; }
.weekrail__fill--over { background: var(--clay); }

.weekrail__day--today .weekrail__fill { background: var(--pine); }

.weekrail__letter { font-size: .7rem; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; }
.weekrail__hours { font-size: .7rem; color: var(--ink-muted); }
.weekrail__day--today .weekrail__letter { color: var(--primary); }

/* ===========================
   SPAN RAIL
   A miniature schedule bar showing a project's progress between two dates.
=========================== */

.span-rail {
    position: relative;
    height: 1.6rem;
}

.span-rail__bar {
    position: absolute;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: var(--surface-sunk);
}

.span-rail__done {
    position: absolute;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: var(--primary);
}

.span-rail__today {
    position: absolute;
    top: 0;
    bottom: .6rem;
    width: 2px;
    background: var(--clay);
}

.span-rail__label {
    position: absolute;
    top: 1.2rem;
    bottom: 1rem;
    left: 0;      
    font-size: .7rem;
    color: var(--ink-muted);
}

/* ===========================
   PROJECT CARD
=========================== */

.project-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--card-colour, var(--primary));
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.project-card__code { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.project-card__title { margin: .15rem 0 .5rem; font-size: 1rem; }
.project-card__title a { color: color-mix(in srgb, var(--card-colour, var(--ink)) 55%, var(--ink)); }

/* ===========================
   PLAIN STATUS BOARD (projects/board.php)
=========================== */

.board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory;
}

@media (min-width: 960px) {
    .board { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
}

.board__column {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .75rem;
    border-radius: var(--radius);
    background: var(--surface-sunk);
    scroll-snap-align: start;
}

.board__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-muted);
}

.board__title span {
    min-width: 1.4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--surface);
    text-align: center;
    font-size: .75rem;
}

.board__card {
    padding: .7rem .8rem;
    border-left: 3px solid var(--card-colour, var(--primary));
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.board__card a { color: color-mix(in srgb, var(--card-colour, var(--ink)) 55%, var(--ink)); font-weight: 600; font-size: .875rem; }

/* ===========================
   NOTES
=========================== */

.note {
    padding: .85rem 0;
    border-bottom: 1px solid var(--rule);
}

.note:last-child { border-bottom: 0; }

.note--pinned { background: var(--ochre-wash); border-radius: var(--radius-sm); padding: .85rem 1rem; margin-bottom: .5rem; border-bottom: 0; }

.note__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.note__author { font-weight: 600; font-size: .8125rem; color: var(--ink); }
.note__stamp { font-size: .75rem; color: var(--ink-muted); }
.note__body { font-size: .875rem; color: var(--ink-soft); white-space: pre-line; }
.note__actions { display: flex; gap: .5rem; margin-top: .5rem; }

/* ===========================
   TO DO LIST
=========================== */

.todo {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.todo:last-child { border-bottom: 0; }

.todo__check button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--rule-strong);
    border-radius: 50%;
    background: var(--surface);
    color: transparent;
    cursor: pointer;
    transition: all var(--transition);
}

.todo--done .todo__check button { background: var(--pine); border-color: var(--pine); color: #FFFFFF; }

.todo__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.todo__title { font-size: .875rem; font-weight: 600; color: var(--ink); }
.todo--done .todo__title { text-decoration: line-through; color: var(--ink-muted); }

.todo__meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .75rem; color: var(--ink-muted); }
.todo__actions { display: flex; gap: .3rem; flex: 0 0 auto; }

/* ===========================
   MESSAGES
=========================== */

.thread-list { padding: 0 1.25rem 1rem; }

.thread {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--rule);
}

.thread:last-child { border-bottom: 0; }
.thread--unread .thread__title a { font-weight: 700; }

.thread__faces { display: flex; flex: 0 0 auto; }
.thread__faces .avatar { margin-left: -.5rem; border: 2px solid var(--surface); }
.thread__faces .avatar:first-child { margin-left: 0; }

.thread__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.thread__title { font-size: .875rem; color: var(--ink); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.thread__title a { color: var(--ink); }
.thread__preview { font-size: .8125rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thread__aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }

.thread-view { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem 1.25rem; max-height: 60vh; overflow-y: auto; }

.thread-view__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5rem 0;
    font-size: .75rem;
    color: var(--ink-muted);
}

.thread-view__divider span {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--surface-sunk);
}

.bubble { display: flex; align-items: flex-start; gap: .6rem; max-width: 80%; }
.bubble--mine { align-self: flex-end; flex-direction: row-reverse; margin-left: auto; }

.bubble__body {
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
}

.bubble--mine .bubble__body { background: var(--primary-tint); }

.bubble__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.bubble__author { font-size: .75rem; font-weight: 700; color: var(--ink); }
.bubble__stamp { font-size: .7rem; color: var(--ink-muted); }
.bubble__text { font-size: .875rem; color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere; }
.bubble__actions { display: flex; gap: .5rem; margin-top: .35rem; }

.thread-reply {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--rule);
}

.thread-reply .field { flex: 1 1 auto; margin-bottom: 0; }

/* ===========================
   TIMER
=========================== */

.timer-panel { padding-top: .25rem; }

/* Compact inline "start a timer" form used in page-head actions and lists. */
.timer-start { display: inline-flex; }

.timerbar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-height) + var(--safe-bottom) + .75rem);
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: min(28rem, calc(100vw - 1.5rem));
    padding: .6rem .9rem;
    border-radius: 999px;
    background: var(--ink);
    color: #FFFFFF;
    box-shadow: var(--shadow);
}

.timerbar__pulse {
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pine);
    animation: timerbar-pulse 1.6s ease-in-out infinite;
}

@keyframes timerbar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.timerbar__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.timerbar__project { font-size: .8125rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timerbar__clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .875rem; }
.timerbar .button { min-height: 30px; padding: 0 .7rem; }

@media (min-width: 960px) {
    .timerbar { bottom: 1.25rem; }
}

/* ===========================
   GANTT (single project schedule)
=========================== */

.gantt {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.gantt__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-sunk);
}

.gantt__toolbar .field { margin-bottom: 0; }

.gantt__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    font-size: .75rem;
    color: var(--ink-muted);
}

.gantt__legend span { display: inline-flex; align-items: center; gap: .3rem; }

.gantt__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.gantt__frame { display: flex; }

.gantt__names {
    flex: 0 0 10rem;
    width: 10rem;
    border-right: 1px solid var(--rule);
    background: var(--surface-sunk);
}

.gantt__names-head {
    padding: .5rem .6rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--rule);
}

.gantt__names-body > * {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--rule);
    font-size: .8125rem;
}

.gantt__scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.gantt__canvas { min-width: 44rem; }

.gantt__timeline-head {
    display: flex;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-sunk);
    font-size: .75rem;
    color: var(--ink-muted);
}

.gantt__rows > * { border-bottom: 1px solid var(--rule); min-height: 2.75rem; }

.gantt__hint { padding: .6rem 1rem; font-size: .8125rem; color: var(--ink-muted); }

.gantt__tooltip {
    position: fixed;
    z-index: 60;
    padding: .35rem .6rem;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: #FFFFFF;
    font-size: .75rem;
    pointer-events: none;
}

/* ===========================
   AVATARS, SWATCHES, PEOPLE LISTS
=========================== */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex: 0 0 auto;
}

.swatch-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .35rem;
    border-radius: 50%;
    vertical-align: middle;
}

.peoplelist {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-height: 12rem;
    overflow-y: auto;
    padding: .5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}

.peoplelist__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    cursor: pointer;
}

.peoplelist__item input { width: auto; min-height: auto; accent-color: var(--primary); }

.peoplelist__self {
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--primary-tint);
    color: var(--primary-deep);
    font-size: .7rem;
    font-weight: 700;
}

/* ===========================
   THE SHELL
=========================== */

.shell { display: flex; flex-direction: column; min-height: 100%; }

.masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--primary);
    color: #FFFFFF;
}

.masthead__bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 3.25rem;
    padding: 0 .75rem;
}

.masthead__spacer { flex: 1 1 auto; }

.brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .01em;
}

.brand:hover { text-decoration: none; }

.brand__mark {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 6px;
    background: #FFFFFF;
    -webkit-mask: url('/public/assets/img/icon.svg') center / contain no-repeat;
    mask: url('/public/assets/img/icon.svg') center / contain no-repeat;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    flex: 0 0 auto;
}

.icon-button:hover { background: rgba(255, 255, 255, .28); text-decoration: none; }

.rail-toggle { display: inline-flex; }

@media (min-width: 960px) {
    .rail-toggle { display: none; }
}

.quicksearch {
    position: relative;
    flex: 1 1 16rem;
    max-width: 24rem;
    min-width: 0;
    display: none;
}

@media (min-width: 560px) {
    .quicksearch { display: block; }
}

.quicksearch input {
    width: 100%;
    height: 34px;
    padding: 0 .75rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
}

.quicksearch input::placeholder { color: rgba(255, 255, 255, .7); }
.quicksearch input:focus { background: #FFFFFF; color: var(--ink); box-shadow: none; }
.quicksearch input:focus::placeholder { color: var(--ink-muted); }

.quicksearch__results {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    z-index: 120;
    max-height: 22rem;
    overflow-y: auto;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    display: none;
}

.quicksearch__results:not(:empty) { display: block; }

/* ===========================
   LAYOUT: SIDE RAIL + MAIN
=========================== */

.layout {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
}

.main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 1rem;
    padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 1.5rem);
}

@media (min-width: 768px) {
    .main { padding: 1.5rem; }
}

@media (min-width: 960px) {
    .main { padding: 2rem; padding-bottom: 2rem; }
}

.layout-split { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 960px) {
    .layout-split { flex-direction: row; align-items: flex-start; }
    .layout-split > div:first-child { flex: 1 1 auto; min-width: 0; }
    .layout-split > aside { flex: 0 0 20rem; width: 20rem; }
}

.rail {
    position: fixed;
    top: 3.25rem;
    left: 0;
    bottom: 0;
    z-index: 90;
    width: 15.5rem;
    padding: 1rem .75rem 2rem;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--rule);
    transform: translateX(-100%);
    transition: transform var(--transition);
}

.rail[data-open], .rail.is-open { transform: translateX(0); }

@media (min-width: 960px) {
    .rail {
        position: sticky;
        transform: none;
        flex: 0 0 15.5rem;
        width: 15.5rem;
        align-self: stretch;
        height: calc(100vh - 3.25rem);
    }
}

.rail__group { margin-bottom: 1.25rem; }

.rail__label {
    margin-bottom: .3rem;
    padding: 0 .6rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-muted);
}

.rail__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: .875rem;
    font-weight: 600;
}

.rail__link:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.rail__link i { width: 1.1rem; text-align: center; color: var(--ink-muted); }

.rail__link[aria-current="page"] {
    background: var(--primary-tint);
    color: var(--primary-deep);
}
.rail__link[aria-current="page"] i { color: var(--primary); }

.rail__count {
    margin-left: auto;
    min-width: 1.3rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--ink-soft);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
}

.rail__count--alert { background: var(--clay-wash); color: var(--clay); }

/* ===========================
   TAB BAR (mobile bottom navigation)
=========================== */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: var(--safe-bottom);
    background: var(--surface);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -2px 10px rgba(2, 20, 30, .06);
}

@media (min-width: 960px) {
    .tabbar { display: none; }
}

.tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    height: var(--tabbar-height);
    padding: .5rem .2rem;
    color: var(--ink-muted);
    font-size: .65rem;
    font-weight: 600;
    text-align: center;
}

.tabbar__item:hover { text-decoration: none; }
.tabbar__item i { font-size: 1.1rem; }

.tabbar__item[aria-current="page"] { color: var(--primary); }

.tabbar__badge {
    position: absolute;
    top: .35rem;
    right: 25%;
    min-width: 1.1rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--clay);
    color: #FFFFFF;
    font-size: .625rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

/* ===========================
   GATE (sign-in page)
=========================== */

.gate {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 960px) {
    .gate { flex-direction: row; }
}

.gate__panel {
    flex: 1 1 50%;
    padding: 2.5rem 1.75rem;
    background: var(--primary);
    background-image: linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: #FFFFFF;
}

.gate__panel h1 { color: #FFFFFF; font-size: 1.75rem; margin-bottom: .75rem; }
.gate__panel p { color: rgba(255, 255, 255, .82); }

@media (min-width: 960px) {
    .gate__panel { display: flex; flex-direction: column; justify-content: center; padding: 3rem 4rem; }
}

.gate__rail {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    height: 5rem;
    margin-top: 1.5rem;
}

.gate__rail span {
    flex: 1 1 0;
    height: var(--fill, 20%);
    border-radius: 4px 4px 0 0;
    background: rgba(255, 255, 255, .28);
}

.gate__form {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--paper);
}

.gate__card { width: 100%; max-width: 24rem; }
.gate__card .card { margin-bottom: 1rem; }

/* ===========================
   PRINT
=========================== */

@media print {
    .masthead, .rail, .tabbar, .timerbar, .talarm, .filter-bar, .page-head__actions { display: none !important; }
    .layout { display: block; }
    .main { padding: 0; }
    .card { box-shadow: none; border: 1px solid #CCC; }
    body { background: #FFFFFF; }
}