/* Patches board and new patch (owner: WP4).
   The board is one list grouped by urgency: a card per group, each patch a row with an
   urgency edge (the same 4px bar as the active navigation marker), its expiry in words and a
   lifetime meter. The new patch form is three numbered sections. Tokens only. */

/* Board ---------------------------------------------------------------------- */
.ts-patches { display: flex; flex-direction: column; gap: 24px; }

.ts-patch-stats .ts-stat--danger .ts-stat__value { color: var(--ts-red-700); }
.ts-patch-stats .ts-stat--warning .ts-stat__value { color: var(--ts-amber-700); }

.ts-patch-group .ts-card-head h2 > .bi { font-size: 18px; }
.ts-patch-group--overdue .ts-card-head h2 > .bi { color: var(--ts-red-600); }
.ts-patch-group--urgent .ts-card-head h2 > .bi { color: var(--ts-amber-600); }
.ts-patch-group--soon .ts-card-head h2 > .bi { color: var(--ts-amber-600); }
.ts-patch-group--ok .ts-card-head h2 > .bi { color: var(--ts-blue-700); }
.ts-patch-group--not-live .ts-card-head h2 > .bi { color: var(--ts-slate-500); }

.ts-patch-list { list-style: none; margin: 0; padding: 0; }

.ts-patch {
  --_edge: var(--ts-slate-300);
  --_icon-bg: var(--ts-slate-50);
  --_icon-fg: var(--ts-slate-500);
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(200px, 248px) 200px;
  grid-template-areas: "icon main due actions";
  align-items: center;
  gap: 12px 24px;
  padding: 18px 24px 18px 28px;
  border-top: 1px solid var(--ts-border-subtle);
  transition: background-color var(--ts-dur-1) var(--ts-ease);
}
.ts-patch:first-child { border-top: 0; }
.ts-patch:hover { background: var(--ts-hover-row); }
.ts-patch::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--_edge);
}
.ts-patch:last-child { border-bottom-left-radius: var(--ts-radius-lg); border-bottom-right-radius: var(--ts-radius-lg); }
.ts-patch--overdue { --_edge: var(--ts-red-600); --_icon-bg: var(--ts-red-50); --_icon-fg: var(--ts-red-600); }
.ts-patch--urgent { --_edge: var(--ts-amber-600); --_icon-bg: var(--ts-amber-100); --_icon-fg: var(--ts-amber-700); }
.ts-patch--soon { --_edge: var(--ts-amber-500); --_icon-bg: var(--ts-amber-50); --_icon-fg: var(--ts-amber-600); }
.ts-patch--ok { --_edge: var(--ts-blue-500); --_icon-bg: var(--ts-blue-100); --_icon-fg: var(--ts-blue-700); }

.ts-patch__icon { grid-area: icon; align-self: start; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--ts-radius-md); background: var(--_icon-bg); color: var(--_icon-fg); font-size: 18px; }
.ts-patch__main { grid-area: main; min-width: 0; }
.ts-patch__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.ts-patch__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.1px; min-width: 0; }
.ts-patch__title a { color: var(--ts-text); text-decoration: none; }
.ts-patch__title a:hover { color: var(--ts-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.ts-patch:hover .ts-patch__title a { text-decoration: underline; text-underline-offset: 3px; }
.ts-patch__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.ts-patch__owner { color: var(--ts-text-secondary); }
.ts-patch__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; padding: 0; font-size: var(--ts-fs-micro); line-height: var(--ts-lh-micro); color: var(--ts-text-muted); }
.ts-patch__facts li { display: inline-flex; align-items: center; gap: 6px; }
.ts-patch__facts .bi { font-size: 13px; color: var(--ts-slate-400); }
.ts-patch__facts .ts-patch__fact--alert { color: var(--ts-red-700); font-weight: 600; }
.ts-patch__facts .ts-patch__fact--alert .bi { color: var(--ts-red-600); }

.ts-patch__due { grid-area: due; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ts-patch__expiry { margin: 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); font-weight: 600; color: var(--ts-text); }
.ts-patch__expiry time { white-space: nowrap; }
.ts-patch__expiry--overdue { color: var(--ts-red-700); }
.ts-patch__expiry--urgent, .ts-patch__expiry--soon { color: var(--ts-amber-700); }
.ts-patch__life { display: grid; grid-template-columns: minmax(64px, 1fr) auto; align-items: center; gap: 10px; }
.ts-patch__life-text { font-size: var(--ts-fs-micro); line-height: var(--ts-lh-micro); color: var(--ts-text-secondary); white-space: nowrap; }

.ts-patch__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.ts-patch-quiet { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0 4px; color: var(--ts-text-muted); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-patch-quiet .bi { font-size: 16px; line-height: 18px; color: var(--ts-green-600); }

@media (max-width: 1199.98px) {
  .ts-patch { grid-template-columns: 40px minmax(0, 1fr) minmax(180px, 220px); grid-template-areas: "icon main due" "icon actions actions"; }
  .ts-patch__actions { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .ts-patch-group .ts-card-head__note { flex-basis: 100%; margin-left: 0; }
  .ts-patch { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon main" "due due" "actions actions"; gap: 14px 14px; padding: 16px 16px 16px 20px; }
  .ts-patch::before { top: 14px; bottom: 14px; }
  .ts-patch__due { padding-top: 12px; border-top: 1px dashed var(--ts-border); }
  .ts-patch__actions > .btn { flex: 1 1 0; }
  .ts-patch:hover { background: transparent; }
}

/* New patch form -------------------------------------------------------------- */
.ts-patch-form { display: flex; flex-direction: column; gap: 20px; }
.ts-patch-form__section { padding: 24px 28px 8px; }
.ts-patch-form__section-head { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 14px; margin-bottom: 20px; }
.ts-patch-form__section-num { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-blue-900); color: var(--ts-white); font-size: var(--ts-fs-small); font-weight: 600; }
.ts-patch-form__section-title { margin: 0; font-size: var(--ts-fs-card); line-height: 32px; font-weight: 600; letter-spacing: var(--ts-ls-card); }
.ts-patch-form__section-text { grid-column: 2; margin: 0; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-patch-form__section-body { padding-left: 46px; }
.ts-patch-form__section .ts-code-field .form-text code { white-space: normal; }

.ts-patch-form__picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ts-patch-form__picks .btn[aria-pressed="true"] { --bs-btn-bg: var(--ts-blue-900); --bs-btn-color: var(--ts-white); --bs-btn-border-color: var(--ts-blue-900); --bs-btn-hover-bg: var(--ts-blue-900); --bs-btn-hover-color: var(--ts-white); --bs-btn-hover-border-color: var(--ts-blue-900); }
.ts-patch-form__expiry { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.ts-patch-form__expiry .form-control { width: 200px; max-width: 100%; }

.ts-patch-form__switch-off { margin-top: 20px; padding: 14px 16px 14px 44px; border-radius: var(--ts-radius-md); background: var(--ts-surface-sunken); border: 1px solid var(--ts-border-subtle); }
.ts-patch-form__switch-off .form-check-input { margin-left: -28px; }
.ts-patch-form__switch-off .form-check-label { font-weight: 600; }
.ts-patch-form__switch-off .form-text { margin-top: 2px; }

/* The footer is the shared .ts-form-actions (components.css); the form's own gap already spaces it */
.ts-patch-form > .ts-form-actions { margin-top: 4px; }

@media (max-width: 767.98px) {
  .ts-patch-form__section { padding: 20px 16px 4px; }
  .ts-patch-form__section-body { padding-left: 0; }
}