/* companies: 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: 860 (tiles go two across) and 640 (one across, one-column forms). */

/* ---------- The company page ---------- */
.co-head h1 { overflow-wrap: anywhere; }
.co-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); margin-block-start: var(--s1); }
.co-head .field { max-inline-size: 22rem; margin-block-start: var(--s1); }
.co-more { display: inline-flex; }
.co-tabs { margin-block-end: var(--s3); }
.co-panel { min-inline-size: 0; }
.co-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 12px; }
.select-compact { inline-size: auto; max-inline-size: 100%; }

/* ---------- The list ---------- */
.co-results[aria-busy="true"] { opacity: .75; }
.co-list .bulkbar { border-block-end: var(--rule-w) solid var(--rule); }
.co-bulk-note { flex-basis: 100%; font-weight: 500; }
.co-note-line { padding: var(--s1) var(--s2); margin: 0; border-block-end: var(--rule-w) solid var(--rule); }
.co-row-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.toolbar .select { inline-size: auto; flex: 0 1 14rem; }
.co-holder { display: grid; }
.co-research { display: grid; gap: 4px; min-inline-size: 0; }
.co-research small { overflow-wrap: anywhere; }
.co-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.co-places > li, .co-removed > li { flex-wrap: wrap; }
.co-places .list-main, .co-removed .list-main { flex: 1 1 14rem; }
.co-removed small { display: block; overflow-wrap: anywhere; }
tr[data-flash] td, .co-tile[data-flash] { background: var(--accent-soft); }
.table td.cell-lead small, .co-tile-title small { display: block; color: var(--ink-3); overflow-wrap: anywhere; }
.table td .tag, .co-tile-title .tag { margin-block-start: 4px; }

/* The kit turns a table into cards at 720px (its own table breakpoint); a card's values sit at the end, so these do too. */
@media (max-width: 720px) {
  .co-research, .co-holder { justify-items: end; text-align: end; }
}

/* ---------- Tiles: the count decides the columns; a short last row widens to fill (GUIDELINES §5e) ---------- */
.co-tiles { display: flex; flex-wrap: wrap; gap: var(--gap); padding: var(--s2); }
.co-tiles > * { flex: 1 1 calc((100% - 2 * var(--gap)) / 3); min-inline-size: 0; }
.co-tiles[data-cols="1"] > * { flex-basis: 100%; }
.co-tiles[data-cols="2"] > * { flex-basis: calc((100% - var(--gap)) / 2); }
@media (max-width: 860px) {
  .co-tiles[data-cols="3"] > * { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 640px) {
  .co-tiles > *, .co-tiles[data-cols] > * { flex-basis: 100%; }
}
.co-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s2);
  border: var(--rule-w) solid var(--rule);
  border-radius: 18px;
  background: var(--paper-2);
}
.co-tile[data-selected] { border-color: var(--accent); }
.co-thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--field); }
.co-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.co-tile-title { display: flex; align-items: flex-start; gap: var(--s1); min-inline-size: 0; }
.co-tile-title > div { min-inline-size: 0; }
.co-tile-title input[type="checkbox"], .table .check-cell input { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 3px; }
.co-fact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s1); }
.co-fact-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--t-1); font-weight: 600; }
.co-fact-value { min-inline-size: 0; overflow-wrap: anywhere; text-align: end; }
.co-tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-start: auto; }

/* ---------- The map: read-only, so nothing here is drawn mirrored (a map is not a chart, and RTL does not flip the world) ---------- */
.co-map-card > summary { display: flex; align-items: center; gap: 8px; font-weight: 650; cursor: pointer; list-style: none; }
.co-map-card > summary::-webkit-details-marker { display: none; }
.co-map-card[open] > summary { margin-block-end: var(--s1); }
.cmap { position: relative; block-size: var(--cmap-h, 320px); overflow: hidden; border-radius: 14px; background: var(--field); }
.cmap-stage { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.cmap-stage:active { cursor: grabbing; }
.cmap-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.cmap-layer { position: absolute; inset: 0; }
.cmap-tile { position: absolute; inline-size: 256px; block-size: 256px; max-inline-size: none; user-select: none; pointer-events: none; }
.cmap-pin {
  position: absolute;
  inline-size: 26px;
  block-size: 26px;
  translate: -50% -50%;
  border: 3px solid var(--paper-2);
  border-radius: 50%;
  background: var(--ink-3);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.cmap-pin[data-tone="researched"] { background: var(--ok); }
.cmap-pin[data-tone="researching"] { background: var(--info); }
.cmap-pin[data-tone="failed"] { background: var(--bad); }
.cmap-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cmap-tools { position: absolute; inset-block-start: var(--s0); inset-inline-end: var(--s0); display: grid; gap: 4px; }
.cmap-tools .icon-btn { background: var(--paper-2); box-shadow: var(--shadow); }
.cmap-credit { position: absolute; inset-block-end: 0; inset-inline-end: 0; padding: 2px 8px; border-start-start-radius: 8px; background: color-mix(in oklab, var(--paper-2) 82%, transparent); color: var(--ink-3); font-size: var(--t-1); }

/* ---------- Overview ---------- */
.co-site-holder { display: block; }
.co-site-picture { display: block; inline-size: 100%; border: var(--rule-w) solid var(--rule); border-radius: 12px; }

/* ---------- Dossier drawer ---------- */
.co-dossier-section { display: grid; gap: 4px; }
.co-dossier-section h3 { font-size: var(--t0); }
.co-dossier-list { padding-inline-start: 1.2em; list-style: disc; display: grid; gap: 2px; overflow-wrap: anywhere; }
.co-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.co-swatch { inline-size: 28px; block-size: 28px; border-radius: 8px; border: var(--rule-w) solid var(--rule); }
.co-dossier-json pre { max-block-size: 18rem; overflow: auto; margin-block-start: var(--s0); padding: var(--s1); border-radius: 12px; background: var(--field); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--t-1); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- People ---------- */
.co-person { display: grid; gap: var(--s1); }
.co-person[data-stopped] { border-inline-start: 4px solid var(--bad); }
.co-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); min-inline-size: 0; }
.co-person-name { display: grid; flex: 1 1 12rem; min-inline-size: 0; overflow-wrap: anywhere; }
.co-person-name > a { justify-self: start; }
.co-holder { min-inline-size: 8.5rem; }
.co-person-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.co-reach { display: flex; flex-wrap: wrap; gap: 4px 6px; overflow-wrap: anywhere; }

/* ---------- Forms (contacts, notes) ---------- */
.co-form { display: grid; gap: var(--s2); }
.co-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.co-check-end { align-self: end; }
.co-share { margin: 0; padding: var(--s1) var(--s2); border: var(--rule-w) solid var(--rule); border-radius: 14px; }
.co-share legend { padding-inline: 6px; color: var(--ink-3); font-size: var(--t-1); font-weight: 600; }
.co-share-list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
@media (max-width: 640px) {
  .co-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Notes and the timeline ---------- */
.co-note { display: grid; gap: var(--s0); border-inline-start: 4px solid var(--rule-strong); }
.co-note[data-bucket="now"] { border-inline-start-color: var(--bad); }
.co-note[data-bucket="soon"] { border-inline-start-color: var(--ok); }
.co-note-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); }
.co-note-head time { margin-inline-start: auto; }
.co-note-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.co-day-title { margin-block: var(--s2) var(--s1); color: var(--ink-3); font-size: var(--t0); }
.co-day:first-child .co-day-title { margin-block-start: 0; }
.co-detail { white-space: pre-wrap; overflow-wrap: anywhere; }