/* company-tools: styles for this area only. Tokens only (castomo-dashkit rule 4: no colour literal outside 00-tokens.css), logical properties only.
   Phone rules switch at the kit's steps (640 and 420); nothing here is wider than its container, so nothing scrolls sideways at 375px. */

/* ---------- Every tab ---------- */
.ct-tab { min-inline-size: 0; }
/* A card's children sit one step apart (the kit's card is a plain column; a form card is the grid with this gap). */
.ct-tab .card { gap: var(--s2); }
.ct-tab .card > .card-head { margin-block-end: 0; }
.ct-tab details.card { gap: 0; }
.ct-loading { display: grid; gap: var(--s1); }
.ct-failure { display: grid; gap: var(--s1); }
.ct-subhead { margin: var(--s2) 0 0; font-size: var(--t1); }
.ct-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); }
.ct-toolbar .hint { margin: 0; }
.ct-inline-action { display: inline-flex; margin-inline-start: var(--s1); vertical-align: middle; }
.ct-provision { min-inline-size: 0; }

/* Text a model or a stranger wrote is shown as text, wrapped, never allowed to widen the page. */
.ct-code {
  margin: 0;
  padding: var(--s1) var(--s2);
  max-block-size: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--field);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-1);
  line-height: 1.5;
}
.ct-code:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ct-raw summary { cursor: pointer; font-weight: 650; color: var(--accent-ink); }
.ct-raw[open] summary { margin-block-end: var(--s1); }
.ct-raw .ct-code, .ct-raw .btn-row { margin-block-start: var(--s1); }

/* ---------- Analyses ---------- */
.ct-analyses > li { align-items: flex-start; flex-wrap: wrap; }
.ct-analyses .list-main { flex: 1 1 18rem; }
.ct-analyses .list-main small { overflow-wrap: anywhere; }
.ct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct-row-actions { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.ct-version { display: grid; gap: 4px; min-inline-size: 10rem; }
.ct-version > span { color: var(--ink-3); font-size: var(--t-1); font-weight: 600; }
.ct-section { display: grid; gap: var(--s1); padding-block-start: var(--s2); border-block-start: var(--rule-w) solid var(--rule); }
.ct-section h3 { margin: 0; font-size: var(--t1); }
.ct-section p { margin: 0; overflow-wrap: anywhere; }
.ct-values { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--s1); }
.ct-values li { overflow-wrap: anywhere; }
.ct-line { margin: 0; }
.ct-facts dd { overflow-wrap: anywhere; font-weight: 500; }
.ct-facts dd .ct-values { font-weight: 500; }

/* ---------- Their website ---------- */
.ct-site-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.ct-site-head > .stack-sm { flex: 1 1 16rem; min-inline-size: 0; }
.ct-score {
  --tone: var(--ink-3);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  min-inline-size: 7rem;
  padding: var(--s1) var(--s2);
  border: 4px solid var(--tone);
  border-radius: var(--radius-sm);
  background: var(--field);
}
.ct-score strong { font-size: var(--t5); line-height: 1; color: var(--ink); }
.ct-score span { color: var(--ink-3); font-size: var(--t0); }
.ct-score[data-band="good"] { --tone: var(--ok); }
.ct-score[data-band="fair"] { --tone: var(--info); }
.ct-score[data-band="poor"] { --tone: var(--warn); }
.ct-score[data-band="bad"] { --tone: var(--bad); }
.ct-verdict { margin: 0; font-size: var(--t1); font-weight: 650; }

/* The phone capture stays narrow on purpose: shown as wide as the laptop one it stops being evidence about phones. */
.ct-shots { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--s3); }
.ct-shot { margin: 0; display: grid; gap: 6px; min-inline-size: 0; }
.ct-shot.desktop { flex: 3 1 24rem; }
.ct-shot.mobile { flex: 0 1 16rem; }
.ct-shot-frame { border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--field); }
.ct-shot.mobile .ct-shot-frame { border-width: 6px; border-radius: 18px; }
.ct-shot-frame img { display: block; inline-size: 100%; block-size: auto; }
.ct-shot figcaption { text-align: center; margin: 0; }
.ct-findings > li { align-items: flex-start; }
.ct-findings[data-severity="bad"] > li { border-inline-start: 4px solid var(--bad); padding-inline-start: var(--s1); }
.ct-findings[data-severity="weak"] > li { border-inline-start: 4px solid var(--warn); padding-inline-start: var(--s1); }
.ct-findings[data-severity="good"] > li { border-inline-start: 4px solid var(--ok); padding-inline-start: var(--s1); }
.ct-findings[data-severity="serious"] > li { border-inline-start: 4px solid var(--bad); padding-inline-start: var(--s1); }
.ct-findings .list-main small { color: var(--ink-2); }

/* ---------- Sources ---------- */
.ct-proposal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); padding-block: var(--s1); border-block-start: var(--rule-w) solid var(--rule); }
.ct-proposal:first-child { border-block-start: 0; }
.ct-proposal .list-main { flex: 1 1 16rem; min-inline-size: 0; }
.ct-proposal .list-main b { overflow-wrap: anywhere; }
.ct-notes { margin: 0; padding-inline-start: 1.2em; }
.list .list-main a, .list .list-main b { overflow-wrap: anywhere; }

/* ---------- Messages ---------- */
.ct-message { inline-size: 100%; min-block-size: 12rem; }
.ct-sent .ct-message { background: transparent; }

/* ---------- Full run, batch ---------- */
.ct-run-lines > li { align-items: flex-start; }
.ct-run-lines .list-main small { overflow-wrap: anywhere; }

/* ---------- Build order ---------- */
.ct-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.ct-link-row .input { flex: 1 1 16rem; min-inline-size: 0; }

/* ---------- Dialogs opened from the list ---------- */
.ct-dialog { inline-size: min(40rem, calc(100vw - 2 * var(--s2))); max-inline-size: 100%; }
.ct-dialog .dialog-body { max-block-size: 70vh; overflow: auto; }
.ct-steps { display: grid; }
.ct-step-off { opacity: .7; }
.ct-step-off small { white-space: normal; }
.ct-dialog .setting small { display: block; color: var(--ink-3); font-size: var(--t-1); font-weight: 400; }

@media (max-width: 640px) {
  .ct-analyses > li { flex-direction: column; align-items: stretch; }
  .ct-analyses .list-main { flex: 0 0 auto; }
  .ct-row-actions { justify-content: flex-start; }
  .ct-shot.desktop, .ct-shot.mobile { flex-basis: 100%; }
  .ct-shot.mobile { max-inline-size: 16rem; margin-inline: auto; }
}