/* modules/tickets/assets/tracker.css — the tracker's public pages (1.18.0, Tracker step 5b).
 *
 * Everything is scoped under `.tracker`, so a theme's own rules keep the page around it, and every colour, radius
 * and font reads the theme contract's --cms-* tokens (site/themes/README.md section 6), as forums.css does. A theme
 * that defines them restyles the tracker without touching this file; one that defines none gets neutral values
 * derived from currentColor, which follow a light or a dark theme on their own where a literal cannot.
 *
 * The status colours are the one place with hues of their own: each is mixed into the ground at a low strength for
 * the badge's fill and into currentColor for its text, so it reads on a light and on a dark page alike. The word is
 * always printed beside the colour.
 *
 * One breakpoint, 768px; nothing here is wider than the phone's viewport (long titles and addresses wrap). */

.tracker {
    --tk-accent:var(--cms-accent, #0F766E);
    --tk-on-accent:var(--cms-accent-contrast, #FFFFFF);
    --tk-wash:var(--cms-accent-wash, color-mix(in oklab, var(--tk-accent) 12%, transparent));
    --tk-ink:var(--cms-ink, currentColor);
    --tk-text:var(--cms-text, currentColor);
    --tk-muted:var(--cms-muted, color-mix(in oklab, currentColor 66%, transparent));
    --tk-line:var(--cms-line, color-mix(in oklab, currentColor 14%, transparent));
    --tk-field:var(--cms-line-strong, color-mix(in oklab, currentColor 32%, transparent));
    --tk-surface:var(--cms-surface, color-mix(in oklab, currentColor 4%, transparent));
    --tk-sunk:var(--cms-sunk, color-mix(in oklab, currentColor 8%, transparent));
    --tk-shadow:var(--cms-shadow, none);
    --tk-radius:var(--cms-radius, 12px);
    --tk-radius-sm:var(--cms-radius-sm, 8px);
    --tk-font:var(--cms-font, inherit);
    --tk-font-display:var(--cms-font-display, var(--tk-font));
    --tk-font-mono:var(--cms-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    --tk-open:#64748B;
    --tk-planned:#6366F1;
    --tk-in_progress:#D97706;
    --tk-done:#16A34A;
    --tk-closed:#94A3B8;
    --tk-staff:#DB2777;
    display:flex;
    flex-direction:column;
    gap:24px;
    color:var(--tk-text);
    font-family:var(--tk-font);
    min-width:0;
}

:where(.tracker) a{color:var(--tk-accent);text-decoration:none}
:where(.tracker) a:hover{text-decoration:underline}
.tracker h1, .tracker h2, .tracker h3, .tracker h4{color:var(--tk-ink);font-family:var(--tk-font-display);margin:0;letter-spacing:-0.2px}
.tracker p{margin:0}
.tracker :focus-visible{outline:2px solid var(--tk-accent);outline-offset:2px}

.tracker-sr {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

/* --- Head, way back, empty lines, notices ----------------------------------------------------------------------- */
.tracker-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.tracker-head__text{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 320px}
.tracker-head__title{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);line-height:1.15;overflow-wrap:anywhere}
.tracker-head__desc{color:var(--tk-muted);max-width:62ch}
.tracker-head__cta{flex:0 0 auto}
.tracker-back{font-size:0.9375rem}
.tracker-back a{display:inline-flex;align-items:center;gap:8px}
.tracker-empty{padding:28px;border:1px dashed var(--tk-field);border-radius:var(--tk-radius);text-align:center;color:var(--tk-muted)}
.tracker-notice-line{padding:10px 14px;border-radius:var(--tk-radius-sm);background:var(--tk-sunk);color:var(--tk-text);font-size:0.9375rem}
.tracker-error{padding:10px 14px;border-radius:var(--tk-radius-sm);border:1px solid color-mix(in oklab, #DC2626 55%, transparent);background:color-mix(in oklab, #DC2626 10%, transparent);color:var(--tk-ink)}
.tracker-count{color:var(--tk-muted);font-size:0.875rem}

/* --- Buttons: the theme actions (.cms-action) and the floors' own ---------------------------------------------- */
.tracker .cms-action-form{display:inline;margin:0}
.tracker-btn, .tracker .cms-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:8px 16px;
    border:1px solid var(--tk-field);
    border-radius:var(--tk-radius-sm);
    background:transparent;
    color:var(--tk-ink);
    font:inherit;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    text-decoration:none;
}
.tracker-btn:hover, .tracker .cms-action:hover{background:var(--tk-sunk);text-decoration:none}
.tracker-btn--primary, .tracker-head__cta .cms-action{background:var(--tk-accent);border-color:var(--tk-accent);color:var(--tk-on-accent)}
.tracker-btn--primary:hover, .tracker-head__cta .cms-action:hover{background:color-mix(in oklab, var(--tk-accent) 86%, #000);color:var(--tk-on-accent)}
.tracker .cms-action[disabled], .tracker-btn[disabled]{opacity:0.6;cursor:progress}

/* --- Badges ------------------------------------------------------------------------------------------------------ */
.tracker-badge {
    --tk-hue:var(--tk-open);
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:2px 10px;
    border-radius:999px;
    background:color-mix(in oklab, var(--tk-hue) 16%, transparent);
    color:color-mix(in oklab, var(--tk-hue) 62%, currentColor);
    font-size:0.8125rem;
    font-weight:600;
    white-space:nowrap;
}
.tracker-badge--planned{--tk-hue:var(--tk-planned)}
.tracker-badge--in_progress{--tk-hue:var(--tk-in_progress)}
.tracker-badge--done{--tk-hue:var(--tk-done)}
.tracker-badge--closed{--tk-hue:var(--tk-closed)}
.tracker-badge--staff{--tk-hue:var(--tk-staff)}

/* --- Index cards ------------------------------------------------------------------------------------------------- */
.tracker-cards {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.tracker-card {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:20px;
    border:1px solid var(--tk-line);
    border-radius:var(--tk-radius);
    background:var(--tk-surface);
    box-shadow:var(--tk-shadow);
    min-width:0;
}
.tracker-card__title {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:1.25rem;
    overflow-wrap:anywhere;
}
.tracker-card__desc{color:var(--tk-muted)}
.tracker-card__counts{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px;margin:0}
.tracker-card__count {
    display:flex;
    flex-direction:column-reverse;
    gap:2px;
    padding:8px;
    border-radius:var(--tk-radius-sm);
    background:var(--tk-sunk);
    min-width:0;
}
.tracker-card__count dt{font-size:0.75rem;color:var(--tk-muted);overflow-wrap:anywhere}
.tracker-card__count dd{margin:0;font-size:1.125rem;font-weight:700;color:var(--tk-ink);font-variant-numeric:tabular-nums}
.tracker-card .cms-action{align-self:flex-start}

/* --- Community tabs (TrackerTabs::bar(), Forums' forums-tabs component) ------------------------------------------ */
/* Forums' own rules for this bar live in forums.css, which a tracker page does not load, and read variables scoped to
   .forums; so the same look is drawn here from the tracker's variables. */
.tracker .forums-tabs{display:flex;flex-wrap:wrap;gap:4px;width:max-content;max-width:100%;margin:0 0 18px;padding:4px;border:1px solid var(--tk-line);border-radius:999px;background:var(--tk-surface)}
.tracker .forums-tabs__tab{display:inline-flex;align-items:center;min-height:36px;padding:6px 16px;border-radius:999px;color:var(--tk-muted);font-weight:600;font-size:0.9375rem;text-decoration:none}
.tracker .forums-tabs__tab:hover{color:var(--tk-ink);background:var(--tk-sunk)}
.tracker .forums-tabs__tab.is-current, .tracker .forums-tabs__tab.is-current:hover{color:var(--tk-on-accent);background:var(--tk-accent)}

/* --- Tabs and filters -------------------------------------------------------------------------------------------- */
.tracker-tabs{border-bottom:1px solid var(--tk-line);overflow-x:auto;scrollbar-width:thin}
.tracker-tabs__list{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.tracker-tabs__tab {
    display:inline-block;
    padding:10px 14px;
    border-bottom:2px solid transparent;
    color:var(--tk-muted);
    font-weight:600;
    white-space:nowrap;
}
:where(.tracker) .tracker-tabs__tab{color:var(--tk-muted)}
.tracker-tabs__tab:hover{color:var(--tk-ink);text-decoration:none}
.tracker-tabs__tab.is-current{color:var(--tk-ink);border-bottom-color:var(--tk-accent)}

.tracker-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.tracker-filters__field{display:flex;flex-direction:column;gap:4px;flex:1 1 160px;min-width:0}
.tracker-filters__field--q{flex:2 1 240px}
.tracker-filters__field label{font-size:0.8125rem;color:var(--tk-muted);font-weight:600}
.tracker-filters__go{display:flex;align-items:center;gap:12px}
.tracker-filters__clear{font-size:0.9375rem}

.tracker input[type="text"], .tracker input[type="search"], .tracker input[type="url"], .tracker input[type="number"], .tracker select, .tracker textarea {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    min-height:40px;
    padding:8px 12px;
    border:1px solid var(--tk-field);
    border-radius:var(--tk-radius-sm);
    background:var(--cms-bg, transparent);
    color:var(--tk-ink);
    font:inherit;
}
.tracker textarea{min-height:140px;resize:vertical;line-height:1.5}
.tracker input:focus, .tracker select:focus, .tracker textarea:focus{border-color:var(--tk-accent);outline:2px solid var(--tk-wash);outline-offset:0}

/* --- Rows -------------------------------------------------------------------------------------------------------- */
.tracker-rows {
    display:flex;
    flex-direction:column;
    border:1px solid var(--tk-line);
    border-radius:var(--tk-radius);
    background:var(--tk-surface);
    box-shadow:var(--tk-shadow);
    overflow:hidden;
}
.tracker-row {
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    border-top:1px solid var(--tk-line);
    min-width:0;
}
.tracker-row:first-child{border-top:0}
.tracker-row__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.tracker-row__title{font-size:1.0625rem;line-height:1.35;overflow-wrap:anywhere}
:where(.tracker) .tracker-row__title a{color:var(--tk-ink)}
.tracker-row__meta {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 12px;
    color:var(--tk-muted);
    font-size:0.875rem;
}
.tracker-row__ref{font-family:var(--tk-font-mono);font-size:0.8125rem}
.tracker-row__replies {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--tk-muted);
    font-size:0.875rem;
    white-space:nowrap;
}
:where(.tracker) .tracker-row__replies{color:var(--tk-muted)}
.tracker-rows--compact .tracker-row{padding:10px 14px}
.tracker-rows--compact .tracker-row__title{font-size:1rem}

/* --- The vote box ------------------------------------------------------------------------------------------------ */
.tracker-vote {
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    min-width:64px;
    text-align:center;
}
.tracker-vote__count{font-size:1.25rem;font-weight:700;color:var(--tk-ink);line-height:1.1;font-variant-numeric:tabular-nums}
.tracker-vote__label{font-size:0.75rem;color:var(--tk-muted)}
.tracker-vote .cms-action{min-height:32px;margin-top:6px;padding:4px 10px;font-size:0.8125rem}
.tracker-vote.is-voted .tracker-vote__count{color:var(--tk-accent)}
.tracker-vote.is-voted .cms-action{background:var(--tk-wash);border-color:transparent;color:var(--tk-accent)}
.tracker-vote--page{padding:14px 12px;min-width:96px;border:1px solid var(--tk-line);border-radius:var(--tk-radius);background:var(--tk-surface)}
.tracker-vote--page .tracker-vote__count{font-size:1.75rem}
.tracker-vote__notice{margin-top:6px;max-width:14ch;font-size:0.75rem;color:var(--tk-muted)}
.tracker-vote.is-busy{opacity:0.6}

/* --- Roadmap ----------------------------------------------------------------------------------------------------- */
.tracker-roadmap{display:grid;gap:20px;grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));align-items:start}
.tracker-roadmap__col{display:flex;flex-direction:column;gap:12px;min-width:0}
.tracker-roadmap__heading{display:flex;align-items:center;gap:10px;font-size:1rem}
.tracker-roadmap__n{color:var(--tk-muted);font-weight:600;font-variant-numeric:tabular-nums}

/* --- Pages ------------------------------------------------------------------------------------------------------- */
.tracker-pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.tracker-pages__at{color:var(--tk-muted);font-size:0.875rem}

/* --- An item's page ---------------------------------------------------------------------------------------------- */
.tracker-item__main{display:flex;flex-direction:column;gap:24px;min-width:0}
.tracker-item__head{display:flex;align-items:flex-start;gap:20px}
.tracker-item__heading{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1 1 auto}
.tracker-item__title{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);line-height:1.2;overflow-wrap:anywhere}
.tracker-item__layout{display:grid;gap:24px;grid-template-columns:minmax(0, 1fr)}
.tracker-item__content{display:flex;flex-direction:column;gap:16px;min-width:0}
.tracker-item__side{display:flex;flex-direction:column;gap:20px;min-width:0}
.tracker-side__heading{font-size:0.875rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--tk-muted);margin-bottom:8px}

.tracker-prose{line-height:1.65;overflow-wrap:anywhere}
.tracker-prose > * + *{margin-top:0.85em}
.tracker-prose p{margin:0}
.tracker-prose img{max-width:100%;height:auto}
.tracker-prose pre {
    overflow-x:auto;
    padding:12px;
    border-radius:var(--tk-radius-sm);
    background:var(--tk-sunk);
    font-family:var(--tk-font-mono);
    font-size:0.875rem;
}
.tracker-prose code{font-family:var(--tk-font-mono);font-size:0.9em}
.tracker-prose blockquote{margin:0;padding-left:14px;border-left:3px solid var(--tk-line);color:var(--tk-muted)}

.tracker-facts {
    margin:0;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    border:1px solid var(--tk-line);
    border-radius:var(--tk-radius);
    background:var(--tk-surface);
}
.tracker-facts > div{display:flex;justify-content:space-between;gap:12px;min-width:0}
.tracker-facts dt{color:var(--tk-muted);font-size:0.875rem;flex:0 0 auto}
.tracker-facts dd {
    margin:0;
    text-align:right;
    color:var(--tk-ink);
    font-weight:600;
    min-width:0;
    overflow-wrap:anywhere;
}
.tracker-facts__due{color:var(--tk-muted);font-weight:400}

.tracker-history__list {
    list-style:none;
    margin:0;
    padding:0 0 0 14px;
    border-left:2px solid var(--tk-line);
    display:flex;
    flex-direction:column;
    gap:12px;
}
.tracker-history__entry {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 8px;
    font-size:0.875rem;
}
.tracker-history__entry::before {
    content:"";
    position:absolute;
    left:-20px;
    top:0.45em;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--tk-accent);
    box-shadow:0 0 0 3px var(--cms-bg, transparent);
}
.tracker-history__entry--staff::before{background:var(--tk-staff)}
.tracker-history__what{color:var(--tk-ink);font-weight:600}
.tracker-history__change{color:var(--tk-text);overflow-wrap:anywhere}
.tracker-history__entry time{color:var(--tk-muted)}

/* --- Replies and forms ------------------------------------------------------------------------------------------- */
.tracker-replies{display:flex;flex-direction:column;gap:16px;padding-top:8px;border-top:1px solid var(--tk-line)}
.tracker-replies__heading{font-size:1.25rem}
.tracker-comment {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px;
    border:1px solid var(--tk-line);
    border-radius:var(--tk-radius);
    background:var(--tk-surface);
    min-width:0;
}
.tracker-comment--staff{border-color:color-mix(in oklab, var(--tk-staff) 40%, transparent);background:color-mix(in oklab, var(--tk-staff) 6%, transparent)}
.tracker-comment__head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:0.875rem}
.tracker-comment__author{color:var(--tk-ink)}
:where(.tracker) .tracker-comment__time{color:var(--tk-muted)}

.tracker-form{display:flex;flex-direction:column;gap:16px;max-width:760px}
.tracker-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tracker-field label{font-weight:600;color:var(--tk-ink)}
.tracker-field__opt{font-weight:400;color:var(--tk-muted);font-size:0.875rem}
.tracker-field--checkbox{flex-direction:row;align-items:center;gap:10px}
.tracker-field--checkbox input{width:18px;height:18px;accent-color:var(--tk-accent)}
.tracker-field--error input, .tracker-field--error select, .tracker-field--error textarea{border-color:#DC2626}
.tracker-form__go{display:flex;flex-wrap:wrap;gap:12px}

.tracker-similar {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:16px;
    border:1px solid var(--tk-line);
    border-radius:var(--tk-radius);
    background:var(--tk-sunk);
}
.tracker-similar[hidden]{display:none}
.tracker-similar__heading{font-size:1rem}
.tracker-similar__hint, .tracker-similar__none{color:var(--tk-muted);font-size:0.9375rem}

/* --- The refusal page -------------------------------------------------------------------------------------------- */
.tracker-notice__card {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    max-width:560px;
    margin:24px auto;
    padding:32px 24px;
    border:1px solid var(--tk-line);
    border-radius:var(--tk-radius);
    background:var(--tk-surface);
    box-shadow:var(--tk-shadow);
    text-align:center;
}
.tracker-notice__icon{font-size:2rem;color:var(--tk-accent)}
.tracker-notice__title{font-size:1.5rem}
.tracker-notice__ways{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}

@media (min-width:768px) {
    .tracker-item__layout{grid-template-columns:minmax(0, 1fr) 280px}
}

@media (max-width:767px) {
    .tracker-row{flex-wrap:wrap;align-items:flex-start;gap:12px;padding:12px}
    .tracker-row__main{flex:1 1 0}
    .tracker-row__replies{margin-left:76px}
    .tracker-row--plain .tracker-row__replies{margin-left:0}
    .tracker-vote--row{min-width:52px}
    .tracker-item__head{gap:14px}
    .tracker-vote--page{min-width:76px;padding:10px 8px}
    .tracker-card__counts{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .tracker-head__cta, .tracker-head__cta .cms-action{width:100%}
}

@media (prefers-reduced-motion:no-preference) {
    .tracker-btn, .tracker .cms-action, .tracker-tabs__tab{transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease}
}