/*
 * Tool chrome — the vocabulary shared by every working screen:
 * the two annotators, the layout editor, and the review pages.
 *
 * The rails used to be grids of white chips, each outlined, each icon a
 * different hue: green tree, orange ruler, purple works, blue legend, cyan
 * root zones. Twelve outlined boxes in a column read as a keypad, and the
 * colour said nothing consistent — none of it was semantic, it was just
 * whatever the icon happened to be drawn in.
 *
 * Here the rail is one surface, buttons carry no border until you touch them,
 * every glyph is one weight in one ink, and the accent is spent on a single
 * thing: which tool is active. Everything else the eye should skip.
 *
 * Tokens match base.html's forest/sand config.
 */

:root {
    /* Palette — the forest/sand config in base.html, as CSS variables. */
    --tc-accent:      #2D6A4F;   /* forest-500 */
    --tc-accent-dark: #1B4332;   /* forest-600 */
    --tc-accent-soft: #F0F7F4;   /* forest-50  */
    --tc-line:        #D8D3CA;   /* sand-300 */
    --tc-line-soft:   #E8E4DE;   /* sand-200 */
    --tc-ink:         #332E28;   /* sand-800 */
    --tc-ink-soft:    #655D52;   /* sand-600 */
    --tc-ink-faint:   #ABA396;   /* sand-400 */
    --tc-surface:     #FAF9F7;   /* sand-50  */
    --tc-hover:       #EFECE6;
    --tc-workspace:   #EDEAE4;   /* behind a sheet or a plan */

    /* Metrics */
    --tc-radius:  2px;
    --tc-h:       26px;   /* header control */
    --tc-h-field: 28px;   /* panel field */

    /* Rail metrics */
    --tb-radius:  3px;
    --tb-size:    30px;
    --tb-size-lg: 38px;
    --tb-icon:    17px;
    --tb-icon-lg: 20px;

    /* Rail aliases, so the rail and the chrome cannot drift apart. */
    --tb-rail-bg:     var(--tc-surface);
    --tb-line:        var(--tc-line-soft);
    --tb-ink:         var(--tc-ink-soft);
    --tb-ink-strong:  var(--tc-ink);
    --tb-hover:       var(--tc-hover);
    --tb-accent:      var(--tc-accent);
    --tb-accent-soft: #E7F0EA;
}

/* ── the rail ─────────────────────────────────────────────────────────── */
.tb-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    width: 42px;
    padding: 8px 0;
    background: var(--tb-rail-bg);
    border-right: 1px solid var(--tb-line);
}
.tb-rail--lg { width: 54px; padding: 10px 0; gap: 3px; }

/* Hairline between groups, in place of an outline around every button. */
.tb-sep {
    width: 18px;
    height: 1px;
    margin: 6px 0;
    background: var(--tb-line);
    flex-shrink: 0;
}

/* ── the buttons ──────────────────────────────────────────────────────── */
.tb-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tb-size);
    height: var(--tb-size);
    flex-shrink: 0;
    border: 0;
    border-radius: var(--tb-radius);
    background: transparent;
    color: var(--tb-ink);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.tb-rail--lg .tb-btn { width: var(--tb-size-lg); height: var(--tb-size-lg); }

.tb-btn:hover:not(:disabled) { background: var(--tb-hover); color: var(--tb-ink-strong); }
.tb-btn:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: -2px; }
.tb-btn:disabled { opacity: .35; cursor: default; }

/* One glyph weight, one glyph size, whatever the icon was drawn at. */
.tb-btn svg {
    width: var(--tb-icon);
    height: var(--tb-icon);
    pointer-events: none;
}
.tb-rail--lg .tb-btn svg { width: var(--tb-icon-lg); height: var(--tb-icon-lg); }
.tb-btn svg, .tb-btn svg * { stroke-width: 1.6px; vector-effect: non-scaling-stroke; }

/* Active tool: soft accent field plus a rule on the rail edge — the pro-tool
   convention, and legible without relying on the fill alone. */
.tb-btn.is-on { background: var(--tb-accent-soft); color: var(--tb-accent); }
.tb-btn.is-on::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    border-radius: 0 2px 2px 0;
    background: var(--tb-accent);
}
.tb-rail--lg .tb-btn.is-on::before { left: -10px; height: 20px; }

/* A tool that is off rather than merely unselected (layers hidden, labels
   off) — dimmed, so "showing" and "hidden" are not the same weight. */
.tb-btn.is-off { color: #B3ABA0; }

/* Counts sit on the button, in the accent, at label size. */
.tb-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--tb-accent);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--tb-rail-bg);
}

/* A button whose label is text rather than a glyph (ID / 18px). */
.tb-btn--text { flex-direction: column; gap: 1px; line-height: 1; }
.tb-btn--text .tb-btn-label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.tb-btn--text .tb-btn-sub { font-size: 9px; color: #A79F94; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .tb-btn { transition: none; }
}


/* ══ screen chrome ══════════════════════════════════════════════════════ */

/*
 * Screen chrome, on one vocabulary. Three type sizes, one radius, two
 * control heights, and the brand palette from base.html rather than
 * Tailwind's defaults - the sheet is the only thing on this screen that
 * should be asking for attention.
 */

/* Type: 11px labels, 11.5px secondary, 12.5px body. Nothing else. */
.tc-label { font-size: 11px; font-weight: 500; text-transform: uppercase;
            letter-spacing: .07em; color: var(--tc-ink-faint); display: block; }
.tc-t-sm  { font-size: 11.5px; }
.tc-t     { font-size: 12.5px; }
.tc-num   { font-variant-numeric: tabular-nums; }

/* Quiet control: the default for anything in the chrome. */
.tc-ctl {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--tc-h); padding: 0 8px;
    font-size: 12px; line-height: 1; color: var(--tc-ink-soft);
    background: #fff; border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.tc-ctl:hover:not(:disabled) { border-color: #C3BCB1; color: var(--tc-ink); }
.tc-ctl:disabled { opacity: .45; cursor: default; }
.tc-ctl:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 1px; }
select.tc-ctl { padding-right: 4px; }
.tc-ctl--on { border-color: var(--tc-line); background: var(--tc-accent-soft);
              color: var(--tc-accent-dark); font-weight: 500; }

/* A control that is on AND worth noticing - an override left running, a lock
   released. Amber is the only "attention" colour in this system. */
.tc-ctl--warn { border-color: #E4C689; background: #FDF6E8; color: #92400E; font-weight: 500; }

/* Exactly one of these per region - the action that moves the work forward. */
/* The one action that moves the work forward. A keyline rather than a solid
   pill: nothing on these screens is filled at rest, so the accent outline is
   unique to it, and the fill arrives on hover as the answer to the gesture.
   Soft accent FILL means "this state is on"; accent OUTLINE means "this is the
   action" - two different shapes for two different jobs. */
.tc-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--tc-h); padding: 0 13px;
    font-size: 12px; font-weight: 600; line-height: 1;
    color: var(--tc-accent-dark); background: #fff;
    border: 1px solid var(--tc-accent);
    border-radius: var(--tc-radius);
    transition: background-color .12s ease, color .12s ease;
}
.tc-btn-primary:hover:not(:disabled) { background: var(--tc-accent); color: #fff; }
.tc-btn-primary:disabled { opacity: .45; cursor: default; }

/* Segmented: for choices where one option is always in force. */
.tc-seg { display: inline-flex; border: 1px solid var(--tc-line);
          border-radius: var(--tc-radius); overflow: hidden; background: #fff; }
.tc-seg > button { height: var(--tc-h); padding: 0 10px; font-size: 12px; line-height: 1;
                   color: var(--tc-ink-soft); background: #fff; transition: background-color .12s ease; }
.tc-seg > button + button { border-left: 1px solid var(--tc-line); }
.tc-seg > button:hover:not(:disabled) { background: #FAF9F7; }
.tc-seg > button[aria-pressed="true"] { background: var(--tc-accent-soft);
                                        color: var(--tc-accent-dark); font-weight: 500; }
.tc-seg > button:disabled { opacity: .5; cursor: default; }

/* Stepper: minus / value / plus welded into one control. */
.tc-step { display: inline-flex; align-items: stretch; }
.tc-step__btn { width: 24px; height: var(--tc-h); font-size: 12px; color: var(--tc-ink-soft);
                background: #fff; border: 1px solid var(--tc-line); }
.tc-step__btn:hover:not(:disabled) { background: #FAF9F7; color: var(--tc-ink); }
.tc-step__btn--l { border-radius: var(--tc-radius) 0 0 var(--tc-radius); border-right: 0; }
.tc-step__btn--r { border-radius: 0 var(--tc-radius) var(--tc-radius) 0; border-left: 0; }
.tc-step__field { min-width: 0; height: var(--tc-h); padding: 0 4px; text-align: center;
                  font-size: 12px; color: var(--tc-ink); background: #fff;
                  border: 1px solid var(--tc-line); }

/* Inspector fields and buttons. */
.tc-field { width: 100%; height: var(--tc-h-field); padding: 0 7px;
            font-size: 12px; color: var(--tc-ink); background: #fff;
            border: 1px solid var(--tc-line); border-radius: var(--tc-radius); }
.tc-field:focus { outline: none; border-color: var(--tc-accent);
                  box-shadow: 0 0 0 2px rgba(45,106,79,.14); }
textarea.tc-field { height: auto; padding: 5px 7px; line-height: 1.4; }
.tc-btn-quiet { display: inline-flex; align-items: center; justify-content: center;
                height: var(--tc-h-field); padding: 0 8px; font-size: 12px; line-height: 1;
                color: var(--tc-ink-soft); background: #fff;
                border: 1px solid var(--tc-line); border-radius: var(--tc-radius);
                transition: border-color .12s ease, color .12s ease; }
.tc-btn-quiet:hover:not(:disabled) { border-color: #C3BCB1; color: var(--tc-ink); }
.tc-btn-quiet:disabled { color: #CFC9C0; border-color: var(--tc-line-soft); cursor: default; }
.tc-btn-quiet--xs { height: 24px; padding: 0 4px; font-size: 11px; }
.tc-btn-quiet--on { border-color: var(--tc-accent); background: var(--tc-accent-soft);
                    color: var(--tc-accent-dark); }
.tc-btn-danger { display: inline-flex; align-items: center; justify-content: center;
                 height: var(--tc-h-field); padding: 0 8px; font-size: 12px; line-height: 1;
                 color: #A3282E; background: #fff;
                 border: 1px solid #E8CFCF; border-radius: var(--tc-radius); }
.tc-btn-danger:hover { background: #FDF4F4; border-color: #DDB9B9; }
.tc-btn-warn { display: inline-flex; align-items: center; gap: 6px;
               height: var(--tc-h); padding: 0 10px; font-size: 12px; font-weight: 500;
               line-height: 1; color: #92400E; background: #fff;
               border: 1px solid #E4C689; border-radius: var(--tc-radius); }
.tc-btn-warn:hover { background: #FEF6E7; }

/* Native controls otherwise render in the OS blue, which was the loudest
   colour left on the screen. */
aside input[type="range"] { height: 14px; }

/* Ambient state reads as a dot, not as a fifth coloured pill. */
.tc-dot { width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0; }


/* ── flyout panels ─────────────────────────────────────────────────────── */
.tc-panel {
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 7px;
    box-shadow: 0 6px 20px rgba(31,27,23,.10), 0 1px 3px rgba(31,27,23,.06);
    color: var(--tc-ink);
}
.tc-panel-title { font-size: 11px; font-weight: 600; text-transform: uppercase;
                  letter-spacing: .07em; color: var(--tc-ink-soft); }
.tc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-swatch { width: 26px; height: 18px; padding: 0; cursor: pointer;
             border: 1px solid var(--tc-line); border-radius: 3px; background: none; }

/* Native controls take the accent wherever this sheet is loaded — otherwise
   the checkbox and the slider are the loudest colour on a tool screen. */
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--tc-accent); }

/* Destructive glyphs stay quiet until they are the thing you are pointing at. */
.tc-danger-icon { color: var(--tc-ink-faint); }
.tc-danger-icon:hover { color: #A3282E; }

/* ── page scale ────────────────────────────────────────────────────────────
   The review pages are documents, not chrome: same vocabulary, one size up.
   The dashboard, the project page and the pipeline homes are documents too,
   so they take this scale as well — one keyline vocabulary from the project
   list through to the annotator, instead of solid pills out here and
   keylines once you are inside a tool. */
.tc-btn-primary--page, .tc-btn-quiet--page,
.tc-btn-danger--page, .tc-btn-warn--page { height: 34px; padding: 0 15px; font-size: 13px; }
.tc-btn-quiet--page { border-radius: var(--tc-radius); }

/* Actions stacked in a sidebar or a card foot: full width, label centred, so
   the column reads as a list of one-per-row actions. */
.tc-btn--block { display: flex; width: 100%; justify-content: center; }

/* Two steps down for the places the page scale will not fit: a row of
   downloads inside a card (sm), and a table row or a photo tile (xs). */
.tc-btn-primary--sm, .tc-btn-quiet--sm,
.tc-btn-danger--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.tc-btn-primary--xs, .tc-btn-danger--xs,
.tc-btn-warn--xs { height: 24px; padding: 0 7px; font-size: 11px; gap: 4px; }

/* A link that is a link, not a button — a keyline round three words of
   navigation would be four more boxes on a page that already has enough. */
.tc-link { color: var(--tc-accent); font-weight: 500; }
.tc-link:hover { color: var(--tc-accent-dark); text-decoration: underline; }

/* ── semantic chips ────────────────────────────────────────────────────────
   Retention value, encroachment, status. These ARE meaningfully coloured — an
   arborist reads green/amber/red directly — so they keep their hue. What they
   get here is one shape, one size and a defined three-step scale instead of a
   different tint each place they appear. */
.tc-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 9px;
    font-size: 11.5px; font-weight: 500; line-height: 18px;
    border: 1px solid transparent; white-space: nowrap;
}
.tc-chip--good    { background: #E7F0EA; color: #1B4332; border-color: #C7DFD1; }
.tc-chip--watch   { background: #FBF1DF; color: #92400E; border-color: #EFDCB8; }
.tc-chip--bad     { background: #FBECEC; color: #A3282E; border-color: #EFD2D2; }
.tc-chip--neutral { background: var(--tc-line-soft); color: var(--tc-ink-soft); border-color: var(--tc-line); }