/* ext-adcoord (28 Oct, the owner's items 11, 13 and 16): who waits for whom on the open
   appointment, one line each (who, what, since, the next action), under its status; a
   reschedule or a length change opens under its line. Theme tokens only, so light and dark
   follow the page; on a phone a line wraps to two rows and its button goes full width. */
.adk-strip { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); font-size: 12.5px; }
.adk-strip > .side-note { margin: 0; }
.adk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.adk-title { font: 600 12.5px/1.3 var(--text); color: var(--ink); }
.adk-mark, .adk-note { height: 28px; padding: 0 8px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink2); font: 500 12px var(--text); }
.adk-markform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adk-markform .adk-note { flex: 1 1 14rem; min-width: 0; }
.adk-lines { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.adk-line { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-sm); color: var(--ink2); }
.adk-line.is-mine { box-shadow: inset 3px 0 0 var(--warn); background: color-mix(in srgb, var(--warn) 5%, transparent); }
.adk-who { font-weight: 600; color: var(--ink); white-space: nowrap; }
.adk-what { min-width: 0; overflow-wrap: anywhere; }
.adk-what q, .adk-panel-h q, .adk-answer q { display: block; color: var(--soft); font-style: italic; }
.adk-since { color: var(--soft); white-space: nowrap; font-size: 11.5px; }
.adk-line .adb-btn { height: 26px; padding: 0 9px; }
.adk-panel { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--gold-line); border-radius: var(--r); background: var(--paper); }
.adk-panel p { margin: 0; }
.adk-panel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.adk-panel-h .icon { width: 14px; height: 14px; align-self: center; }
.adk-panel-h q { flex-basis: 100%; }
.adk-dates strong, .adk-answer strong { color: var(--ink); }
.adk-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 8px; }
.adk-box { display: grid; gap: 6px; align-content: start; }
.adk-box-h { font: 600 12px/1.3 var(--text); color: var(--ink); }
.adk-text { width: 100%; min-height: 4.2em; padding: 6px 8px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: var(--paper2); color: var(--ink); font: 400 12.5px/1.4 var(--text); resize: vertical; }
.adk-values { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0; }
.adk-values dt { color: var(--soft); }
.adk-values dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.adk-copy { height: 22px; padding: 0 7px; font-size: 11px; }
.adk-steps { justify-content: flex-start; }
/* 30 Oct: in the brief's column (about 340px wide) the four columns left what is asked a
   word or two a line; there, who, when and the button share a line and what is asked takes the
   whole line under them */
.adk-strip { container-type: inline-size; }
@container (max-width: 34rem) {
  .adk-line { grid-template-columns: minmax(0, 1fr) auto auto; }
  .adk-who { grid-column: 1; grid-row: 1; white-space: normal; }
  .adk-since { grid-column: 2; grid-row: 1; }
  .adk-line .adb-btn { grid-column: 3; grid-row: 1; }
  .adk-what { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .adk-line { grid-template-columns: minmax(0, 1fr) auto; }
  .adk-what { grid-column: 1 / -1; grid-row: 2; }
  .adk-line .adb-btn { grid-column: 1 / -1; grid-row: 3; width: 100%; min-height: 40px; }
  .adk-values { grid-template-columns: minmax(0, 1fr); }
  .adk-boxes { grid-template-columns: minmax(0, 1fr); }
}