/* Styles owned by the templ component layer.

   Kept separate from the ported files so those stay a faithful copy of the
   prototype and can still be diffed against it. Everything here replaces a rule
   the prototype wrote inline on an element; nothing here invents new visual
   language (build prompt §3.5).

   If a rule in this file starts to look like design rather than plumbing, it
   belongs in a conversation, not in this file. */

/* Make the hidden attribute win.

   The browser's own [hidden]{display:none} is a user-agent rule, and any author
   rule setting display beats it regardless of specificity. .drawer declares
   display:flex, so an event drawer marked hidden rendered anyway — open on
   every page load, covering a third of the screen.

   Rather than swapping the attribute for a class in every component, one
   !important restores the meaning `hidden` is supposed to have. This is the
   case the keyword exists for. */
[hidden]{display:none !important}

/* Completing the state vocabulary.

   The prototype styles rail nodes for done/wait/mine/rej and task squares for
   done/wait/mine/late — each context is missing one state, so a rejected task
   square and an overdue rail node both render as neutral grey. It never showed
   in the demo because its stage renderer cannot produce a rejected task and its
   rail signals lateness with a caption instead of colour.

   Since base.State promises one vocabulary across both, the two gaps are filled
   here using the rules the prototype already wrote for the other context. No
   new colours, no new tokens. */
.sq.rej{background:var(--del);border-color:var(--del)}
.rl.late .nd{border-color:var(--del);background:var(--cli-bg)}

/* Rail rows stack their lines.

   §13.3 says the role and action sit *under* the name («под именем — роль и
   действие»), but the prototype's .who/.what/.sig/.kom are inline spans with no
   display rule, so everything runs together on one line. The giveaway that this
   was an oversight rather than a choice is in the prototype's own stylesheet:
   .what, .sig and .kom each carry a margin-top, and margin-top does nothing to
   an inline element. Those three declarations are inert as written.

   Making them block costs one rule and lets the prototype's own margins take
   effect. This is a visible change from the prototype's rendering — recorded
   deliberately, not slipped in. */
.rl .who,.rl .what,.rl .sig,.rl .kom{display:block}

/* Comment form under a discussion. The prototype styled this inline on the
   textarea and the row; moved here so the markup carries no style attribute. */
.cmt-post{display:flex;gap:7px;margin-top:10px;align-items:flex-start}
.cmt-post textarea{flex:1;background:var(--card);border:1px solid var(--rule2);
  padding:8px 10px;font-size:13px;font-family:inherit;color:inherit}
.cmt-post textarea:focus{border-color:var(--srv);outline:none}

/* Component gallery — an internal page, not part of the product surface. */
.gal-nav{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 18px}
.gal-case{border:1px solid var(--rule);background:var(--card);margin-bottom:14px}
.gal-case > .gal-label{display:flex;align-items:center;gap:10px;padding:7px 12px;
  background:var(--sunk);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2)}
.gal-body{padding:16px}
.gal-body.on-paper{background:var(--paper)}
.gal-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}