/* ============================================================================
   THE FEATURE LAYER: SHARED STYLES  (F00)
   What the extension registry (js/tk-ext.js) wraps around each feature's
   contribution, plus the red line that says part of the database could not be
   read. Each feature's own look lives in css/ext/fNN-*.css; this file only
   gives the wrappers a sensible default, so a feature with no stylesheet yet
   still sits neatly in the screen it joins. Tokens only, from app.css, so both
   themes work without a second set of colours.
   ============================================================================ */

/* A feature's line on a board card. Smaller and quieter than the card's own
   title, the same weight as the waiting strip. */
.x-card{margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.x-card:empty{display:none}

/* A feature's section in a drawer. The drawer's own h4 and note styles apply
   inside it, so it reads as one more part of the job rather than a bolt-on. */
.x-sec{margin:0 0 4px}
.x-sec:empty{display:none}

/* A small label a feature can hang on a card or a row. */
.x-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:1px 6px;border-radius:4px;background:var(--panel-3);color:var(--ink-2);
  border:1px solid var(--line);vertical-align:middle}
.x-badge.warn{color:var(--warn);border-color:var(--warn)}
.x-badge.crit{color:var(--crit);border-color:var(--crit);background:var(--crit-bg)}
.x-badge.good{color:var(--good);border-color:var(--good)}

/* A one-line note a feature can drop under something without a whole .note. */
.x-note{font-size:12px;line-height:1.45;color:var(--ink-3);margin:4px 0 10px}
.x-note b{color:var(--ink)}

/* SECTIONS A FEATURE CAN FIND. The Orders screen wraps its invoice schedule and
   subcontractor orders in <div data-sec="...">, so a feature can put something
   next to them or replace them. The wrapper must not change the layout:
   display:contents removes its box, and the heading inside keeps the spacing it
   had before, which its own :first-child rule would otherwise zero. */
[data-sec]{display:contents}
[data-sec] > .sec-h:first-child{margin-top:26px}

/* PART OF THE DATABASE COULD NOT BE READ.
   Before this, a failed read came back as an empty list and the screen drew
   it as though there was simply nothing there. Red, at the top of the work
   area, naming what is missing, because a believable empty screen is worse
   than an obvious error. */
.read-err{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:10px 14px;
  background:var(--crit-bg);border:1px solid var(--crit);border-left-width:3px;border-radius:6px;
  color:var(--ink);font-size:12.5px;line-height:1.5}
.read-err b{color:var(--crit)}
.read-err[hidden]{display:none}

/* A feature's error, listed for Zayn (F01's Automations screen reads TK.errors). */
.x-err{font-family:var(--mono, ui-monospace, monospace);font-size:11.5px;color:var(--crit)}

@media(max-width:700px){
  .x-card{font-size:12px}
  .read-err{font-size:12px;padding:9px 12px;margin-bottom:12px}
}