/* TCP Tender Radar: additions to the Command Center UI. tokens.css and components.css stay as they ship;
   everything the portal needs on top (forms, links styled as rail rows and facets, the login screen) lives
   here and uses tokens only. */

.dot.idle { background: var(--ink-faint); }
a.env, a.facet { text-decoration: none; color: inherit; }
a.facet { color: var(--ink-soft); }
a.env:focus-visible, a.facet:focus-visible, a.row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logout { margin-top: auto; }
.logout .btn { width: 100%; }

.crumb { margin: 0; font-size: 13px; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

a.row-link { color: var(--ink); font-weight: 500; text-decoration: none; }
a.row-link:hover { text-decoration: underline; }
td.why { max-width: 420px; }
.clip { color: var(--ink-soft); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* search and filters row */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters .search { flex: 1 1 280px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }

/* form controls, same recipe as the dialog inputs in components.css */
.form { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-faint); }
input[type="text"], input[type="search"], input[type="password"], input:not([type]), select, textarea {
  font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-sunk); color: var(--ink); min-width: 0;
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .tag input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.form .actions { justify-content: flex-end; }

.tags { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags legend { font-size: 12px; color: var(--ink-faint); padding: 0 0 6px; }
.tag { position: relative; }
.tag input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tag span { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 12px; }
.tag input:checked + span { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); font-weight: 500; }

.notice.ok-notice { border-color: color-mix(in srgb, var(--ok) 45%, var(--line-soft)); background: var(--ok-wash); }
.notice.ok-notice::before { background: var(--ok); }

/* sign-in screen: one panel on the ground, no rail */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--ground); }
.panel.login { width: min(100%, 380px); }
a.btn { text-decoration: none; }
.chips .chip { white-space: normal; text-align: left; line-height: 1.35; }

/* morning screen (step 1): the "new since your visit" marker and the cell that says what the buyer changed.
   The badge keeps the neutral badge recipe, only the ink is stronger so the eye finds it in a long list. */
.badge.new { color: var(--ink); border-color: var(--line); background: var(--surface); }
td.change { max-width: 320px; }
td.change .second { white-space: normal; margin-top: 4px; line-height: 1.4; }
td.change .chip { margin-right: 4px; }

/* step 2, marking in one click: the "My status" cell holds the chip, an "add reason" link when the decision has
   no tags or note yet, and the row form (two small buttons and a select). The pressed button uses the accent
   wash, the same "current selection" role as the checked tags on the card. */
td.mark { min-width: 228px; }
.mark-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
a.why-link { font-size: 12px; color: var(--ink-soft); }
a.why-link:hover { color: var(--ink); }
a.why-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
form.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.btn.sm { padding: 3px 9px; font-size: 12px; border-radius: 6px; }
.btn.sm[aria-pressed="true"] { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); }
select.sm { padding: 3px 6px; font-size: 12px; border-radius: 6px; max-width: 132px; }
form.quick[aria-busy="true"] { opacity: .7; }

/* the one live region: says "Saved" or what failed, bottom right, no motion */
.live { position: fixed; right: 16px; bottom: 16px; z-index: 10; max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line-soft));
  background: var(--surface); color: var(--ink); font-size: 13px; box-shadow: var(--shadow); }
.live.bad { border-color: color-mix(in srgb, var(--crit) 55%, var(--line)); }
.live:empty { padding: 0; border: 0; box-shadow: none; }

.tags + .tags { margin-top: 2px; }

/* step 3, the "More" block at the foot of the rail: the two source links, Sign out and the theme switch sit in one
   <details>. On the phone it is a menu that opens under the top bar; on wider screens it stays open and its summary is
   hidden, so the rail reads as before. Browsers without ::details-content (older ones) show a "More" toggle instead.
   This is the one rule outside the phone section, on purpose. */
.more { margin-top: auto; }
.more > summary { list-style: none; cursor: pointer; padding: 7px 8px; border-radius: 7px; color: var(--ink-soft); font-size: 13px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: " ▾"; color: var(--ink-faint); }
.more[open] > summary::after { content: " ▴"; }
.more > summary:hover { color: var(--ink); }
.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.more-body { display: flex; flex-direction: column; gap: 26px; }
.more-body .nav { margin-top: 0; }
@supports selector(::details-content) {
  @media (min-width: 721px) {
    .more > summary { display: none; }
    .more::details-content { content-visibility: visible; }
  }
}
@media (min-width: 721px) and (max-width: 1080px) {      /* the skill's tablet bar: these items sit in its wrapped row */
  .more { margin-top: 0; }
  .more-body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
}

/* ---------- step 3, phone (up to 720 px): one breakpoint, tokens only ----------
   One line: on the phone Kirill sees the morning screen on the first scroll and can mark a tender with his thumb.
   - the rail is a top bar: brand and user chip, then the group links as one scrollable row of pills and "More"
   - tiles stay 2 x 2 but short, so all four numbers are on the first screen without a sideways swipe
   - every table row becomes a card in five lines; the markup, ids and DOM order of _rows.html stay as they are,
     only `order` moves the group chip and the badges up next to the deadline (none of them takes focus)
   - every tap target at least 44 px, form fields 16 px (iOS zooms into smaller ones), running text 14 px or more */
@media (max-width: 720px) {
  /* top bar */
  .rail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 16px; }
  .brand { padding: 0; }
  .rail .who { padding: 0; justify-self: end; }
  .who-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rail > div:not([class]) { min-width: 0; }
  .envs { flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
  .envs::-webkit-scrollbar { display: none; }
  .env { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
  .env .dot, .env-meta { display: none; }
  .env-name { font-size: 14px; }
  .more { margin: 0; }
  .more > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
  .more[open] > summary { background: var(--surface-sunk); }
  .more-body { position: absolute; z-index: 20; top: 100%; right: 16px; width: min(300px, calc(100vw - 32px)); margin-top: -4px;
    padding: 8px; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .more-body .nav { flex-direction: column; }
  .more-body .nav a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
  .more-body .logout .btn { min-height: 44px; }
  .more-body .theme { padding: 0; }
  .more-body .theme .rail-label { display: block; }
  .more-body .theme button { min-height: 44px; padding: 0 12px; font-size: 13px; }

  /* the screen */
  .main { padding: 16px 16px calc(88px + env(safe-area-inset-bottom)); gap: 16px; }
  h1 { font-size: 20px; }
  .head { gap: 12px; }
  .head .actions { flex-wrap: wrap; width: 100%; }
  .head .actions .btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .crumb a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .notice { flex-wrap: wrap; }
  .notice .src { white-space: normal; margin-left: 0; }

  /* tiles: 2 x 2, short */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 10px 12px; gap: 2px; }
  .tile .k { letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile .v { font-size: 22px; line-height: 1.2; }
  .tile .n { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* rows become cards */
  .panel > header { flex-wrap: wrap; gap: 4px 12px; }
  .scroll { overflow: visible; }
  .panel table, .panel tbody { display: block; min-width: 0; }
  .panel thead { display: none; }
  .panel tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 8px; }
  .panel tbody tr:last-child { border-bottom: 0; }
  .panel tbody tr:hover { background: none; }
  .panel tbody td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; }
  .panel tbody td:nth-child(1) { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
  .panel tbody td:nth-child(1) .second { display: inline; font-size: 13px; }
  .panel tbody td:nth-child(3) { order: 2; }                                           /* group chip */
  .panel tbody td:nth-child(2) { display: contents; }                                  /* title cell: its parts join the card */
  .panel tbody td:nth-child(2) .badge { order: 3; margin-left: 0; }
  .panel tbody td:nth-child(2) a.row-link { order: 4; flex: 1 1 100%; display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.4; }
  .panel tbody td:nth-child(2) .second { order: 5; flex: 1 1 100%; font-size: 14px; color: var(--ink-soft); margin-top: -6px; }
  .panel tbody td.why { order: 6; flex: 1 1 100%; }
  .panel tbody td.why .clip { font-size: 14px; line-height: 1.45; -webkit-line-clamp: 2; line-clamp: 2; }
  .panel tbody td:nth-child(5) { order: 7; flex: 1 1 100%; white-space: normal; }
  .panel tbody td:nth-child(5) > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .panel tbody td:nth-child(5) .second { font-size: 14px; color: var(--ink-soft); line-height: 1.4; margin-top: 0; }
  .panel tbody td.mark { order: 8; flex: 1 1 100%; }
  a.why-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 14px; }
  form.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
  form.quick .btn.sm, form.quick select.sm { width: 100%; max-width: none; min-height: 44px; padding: 0 10px; border-radius: 8px; font-size: 14px; }
  form.quick select.sm { grid-column: 1 / -1; font-size: 16px; }
  form.quick noscript { grid-column: 1 / -1; }
  form.quick noscript .btn { width: 100%; min-height: 44px; }

  /* list page: search and status facets */
  .filters .search { flex: 1 1 100%; }
  .filters .btn { min-height: 44px; }
  .check { min-height: 44px; font-size: 14px; }
  .check input { width: 20px; height: 20px; }
  .facets { flex-wrap: nowrap; overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
  .facets::-webkit-scrollbar { display: none; }
  .facet { flex: none; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: 14px; }

  /* forms: card page and login */
  input[type="text"], input[type="search"], input[type="password"], input:not([type]), select, textarea { font-size: 16px; min-height: 44px; }
  .form label { font-size: 13px; }
  .form .actions .btn { width: 100%; min-height: 44px; }
  .tag span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .tags legend { font-size: 13px; }

  /* card page: key facts one column, key above its value */
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dt { font-size: 13px; }
  .kv dd { font-size: 14px; padding-bottom: 8px; }
  details.log > summary { display: flex; align-items: center; min-height: 44px; }
  .commit { grid-template-columns: 52px minmax(0, 1fr); }
  .commit .who { font-size: 13px; }

  /* the one live region: full width at the bottom, above the home bar */
  .live { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: none; font-size: 14px; }

  .login-wrap { min-height: 100vh; min-height: 100dvh; }
}