/* ===== Content board =====================================================
 * Design law: one accent (#962f2c), a warm grey ramp, two shadows, one radius
 * scale, 390px first. Success green / danger red / warn amber are semantic
 * only. No blue status styling, no decorative status dots.
 * ------------------------------------------------------------------------ */
.scope-content .pg {
  --cn-accent: #962f2c;
  --cn-accent-soft: #f6eceb;
  --cn-ink: #1d2733;
  --cn-mut: #6b7785;
  --cn-faint: #93a0af;
  --cn-line: #e3e8ef;
  --cn-line-2: #eef1f6;
  --cn-surface: #fff;
  --cn-hover: #f5f6f9;
  --cn-ok: #1a7f37;
  --cn-ok-soft: #e8f4ec;
  --cn-danger: #b00020;
  --cn-danger-soft: #fdecef;
  --cn-warn: #9a6700;
  --cn-warn-soft: #fdf3e3;
}
/* One radius scale and two shadows for every surface below. */
:root {
  --cn-r-sm: 8px;
  --cn-r-md: 12px;
  --cn-r-lg: 16px;
  --cn-sh-1: 0 1px 2px rgba(29, 39, 51, .08);
  --cn-sh-2: 0 14px 34px -14px rgba(29, 39, 51, .34);
}

.scope-content .pg .cnt-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.scope-content .pg .cnt-h1 { font-size: 21px; font-weight: 800; margin: 0; }
.scope-content .pg .cnt-sum { font-size: 12px; color: var(--cn-mut); }
.scope-content .pg #cnt-addtopic { margin-left: auto; }

/* The ONE scheduling switch, in the header row beside Add a topic. */
.scope-content .pg .cnt-sw { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--cn-mut); user-select: none; }
.scope-content .pg .cnt-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.scope-content .pg .cnt-sw-track { width: 36px; height: 20px; border-radius: 980px; background: #d2d7de; position: relative; transition: background .18s; flex: none; }
.scope-content .pg .cnt-sw-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--cn-sh-1); transition: transform .18s; }
.scope-content .pg .cnt-sw input:checked + .cnt-sw-track { background: var(--cn-accent); }
.scope-content .pg .cnt-sw input:checked + .cnt-sw-track .cnt-sw-knob { transform: translateX(16px); }
.scope-content .pg .cnt-sw input:focus-visible + .cnt-sw-track { outline: 2px solid var(--cn-accent); outline-offset: 2px; }
.scope-content .pg .cnt-sw input:disabled + .cnt-sw-track { opacity: .55; }
.scope-content .pg #cnt-addtopic { margin-left: 0; }

/* Live blog traffic rows, ported from the retired Control page. */
.scope-content .pg .cr-prow { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--cn-line-2); font-size: 11.5px; }
.scope-content .pg .cr-prow:first-of-type { border-top: none; }
.scope-content .pg .cr-ptt { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-content .pg .cr-chip { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.scope-content .pg .cr-chip.ok { background: var(--cn-ok-soft); color: var(--cn-ok); }
.scope-content .pg .cr-chip.stale { background: var(--cn-warn-soft); color: var(--cn-warn); }
.scope-content .pg .cr-chip.blocked { background: var(--cn-danger-soft); color: var(--cn-danger); }
.scope-content .pg .cnt-scroller { overflow-x: auto; padding-bottom: 8px; }
.scope-content .pg .cnt-board { display: grid; grid-template-columns: repeat(5, minmax(196px, 1fr)); gap: 12px; align-items: start; min-width: 940px; }
.scope-content .pg .cnt-col {
  background: var(--cn-line-2); border: 1px solid var(--cn-line);
  border-radius: var(--cn-r-md); padding: 10px 10px 12px;
  outline: 2px dashed transparent; outline-offset: -2px;
  transition: background .15s, outline .15s;
}
.scope-content .pg .cnt-col.over { background: var(--cn-accent-soft); outline-color: var(--cn-accent); }
.scope-content .pg .cnt-colh { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.scope-content .pg .cnt-colh .cname { font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--cn-ink); }
.scope-content .pg .cnt-colh .ccount {
  margin-left: auto; font-size: 10px; font-weight: 800; color: var(--cn-mut);
  background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: 20px; padding: 1px 8px;
}

/* --- the card: title, one metadata line, one note, one action row --------- */
.scope-content .pg .cnt-card {
  background: var(--cn-surface); border: 1px solid var(--cn-line);
  border-radius: var(--cn-r-md); padding: 11px 12px; margin-bottom: 9px;
  box-shadow: var(--cn-sh-1); cursor: pointer; position: relative; text-align: left;
}
.scope-content .pg .cnt-card:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 2px; }
.scope-content .pg .cnt-card.dragging { opacity: .4; }
.scope-content .pg .cnt-card.busy { background: #fbfcfe; }
/* The title wraps freely and never runs under the score badge. */
.scope-content .pg .cnt-ct { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--cn-ink); overflow-wrap: anywhere; }
.scope-content .pg .cnt-card.has-score .cnt-ct { padding-right: 38px; }
.scope-content .pg .cnt-cm { font-size: 10.5px; color: var(--cn-mut); margin-top: 5px; }
.scope-content .pg .cnt-score {
  position: absolute; top: 10px; right: 11px;
  font-size: 10px; font-weight: 800; width: 30px; height: 30px;
  border-radius: var(--cn-r-sm); display: flex; align-items: center; justify-content: center;
  background: var(--cn-line-2); color: var(--cn-mut);
}
.scope-content .pg .cnt-empty {
  font-size: 10.5px; color: var(--cn-faint); text-align: center; padding: 14px 6px;
  border: 1px dashed #d8deea; border-radius: var(--cn-r-sm);
}

/* The single state message, shown only when the operator has to act. */
.scope-content .pg .cnt-cnote {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin-top: 9px; font-size: 10.5px; line-height: 1.45; font-weight: 600;
  padding: 7px 9px; border-radius: var(--cn-r-sm);
  background: var(--cn-line-2); color: var(--cn-mut);
}
.scope-content .pg .cnt-cnote .lead { font-weight: 800; }
.scope-content .pg .cnt-cnote .cnt-spin { align-self: center; }
.scope-content .pg .cnt-cnote.busy { background: var(--cn-line-2); color: var(--cn-mut); }
.scope-content .pg .cnt-cnote.err { background: var(--cn-danger-soft); color: var(--cn-danger); }
.scope-content .pg .cnt-cnote.warn { background: var(--cn-warn-soft); color: var(--cn-warn); }
.scope-content .pg .cnt-cnote.ok { background: var(--cn-ok-soft); color: var(--cn-ok); }

/* --- one compact action row that never wraps ----------------------------- */
.scope-content .pg .cnt-card .acts { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .2s ease, opacity .15s; }
.scope-content .pg .cnt-card .acts > .acts-in {
  display: flex; gap: 6px; overflow: hidden; min-height: 0; padding-top: 9px;
  flex-wrap: nowrap; align-items: stretch;
}
.scope-content .pg .cnt-card:hover .acts,
.scope-content .pg .cnt-card:focus-within .acts { opacity: 1; grid-template-rows: 1fr; }
.scope-content .pg .cnt-ab {
  flex: 0 1 auto; min-width: 0; min-height: 30px; padding: 0 10px;
  border-radius: var(--cn-r-sm); border: 1px solid var(--cn-line);
  background: var(--cn-surface); font-size: 11px; font-weight: 700; color: var(--cn-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap; cursor: pointer;
}
.scope-content .pg .cnt-ab:hover { border-color: #d3dae4; background: var(--cn-hover); }
.scope-content .pg .cnt-ab:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 2px; }
.scope-content .pg .cnt-ab.go { color: var(--cn-accent); border-color: #e2c9c8; background: var(--cn-accent-soft); }
.scope-content .pg .cnt-ab.ok { color: var(--cn-ok); border-color: #bfe3cc; background: var(--cn-ok-soft); }
/* The one quick-fix that IS a fix action (e.g. Generate hero image): solid
   success green, white text, same treatment as .cnt-btn.success (Approve). */
.scope-content .pg .cnt-ab.success { color: #fff; border-color: var(--cn-ok); background: var(--cn-ok); }
.scope-content .pg .cnt-ab.success:hover { background: #14682c; border-color: #14682c; }
.scope-content .pg .cnt-ab.plain { color: var(--cn-ink); }
/* The ONLY danger control on a card: the Disregard cross. */
.scope-content .pg .cnt-ab.danger { flex: none; min-width: 30px; padding: 0 8px; color: var(--cn-danger); }
.scope-content .pg .cnt-ab.danger:hover { background: var(--cn-danger-soft); border-color: #f3c2cc; }

/* --- calendar ------------------------------------------------------------ */
.scope-content .pg .cnt-cal-sec { margin-top: 26px; }
.scope-content .pg .cnt-cal-h { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 12px; }
.scope-content .pg .cnt-calhint { margin-left: auto; font-size: 11px; color: var(--cn-mut); }
/* minmax(0, 1fr): a long chip title must not blow its column out of the grid. */
.scope-content .pg .cnt-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.scope-content .pg .cnt-cal-dow { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--cn-faint); text-align: center; padding: 2px 0 6px; }
.scope-content .pg .cnt-cal-cell { min-height: 60px; border: 1px solid var(--cn-line-2); border-radius: var(--cn-r-sm); padding: 5px 6px; background: #fcfdff; position: relative; }
.scope-content .pg .cnt-cal-cell.empty { background: transparent; border: none; }
.scope-content .pg .cnt-cal-cell.today { border-color: var(--cn-accent); box-shadow: 0 0 0 1px var(--cn-accent) inset; }
.scope-content .pg .cnt-cal-num { font-size: 10px; font-weight: 700; color: var(--cn-mut); }
.scope-content .pg .cnt-cal-cell.today .cnt-cal-num { color: var(--cn-accent); }
.scope-content .pg .cnt-cal-ent {
  margin-top: 4px; font-size: 9.5px; font-weight: 700; line-height: 1.25;
  border-radius: 6px; padding: 3px 5px; cursor: pointer; display: flex; overflow: hidden;
  border: none; width: 100%; box-sizing: border-box; text-align: left;
}
.scope-content .pg .cnt-cal-ent:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 1px; }
.scope-content .pg .cnt-cal-ent .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-content .pg .cnt-cal-ent.written { background: var(--cn-line-2); color: var(--cn-ink); }
.scope-content .pg .cnt-cal-ent.review { background: var(--cn-warn-soft); color: var(--cn-warn); }
.scope-content .pg .cnt-cal-ent.approved { background: var(--cn-accent-soft); color: var(--cn-accent); }
.scope-content .pg .cnt-cal-ent.live { background: var(--cn-ok-soft); color: var(--cn-ok); }
/* A booked topic is not written yet: an outline, not a filled state colour. */
.scope-content .pg .cnt-cal-ent.sched { background: var(--cn-surface); border: 1px dashed var(--cn-line); color: var(--cn-mut); cursor: default; }
/* A day that can still be booked says so on hover and takes keyboard focus. */
.scope-content .pg .cnt-cal-cell.can-add { cursor: pointer; }
.scope-content .pg .cnt-cal-cell.can-add:hover { background: var(--cn-hover); border-color: var(--cn-line); }
.scope-content .pg .cnt-cal-cell.can-add:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 2px; }
/* The legend pairs each colour with its word, so colour is never the only carrier. */
.scope-content .pg .cnt-cal-legend { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.scope-content .pg .cnt-cal-legend .lg { font-size: 9.5px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.scope-content .pg .cnt-cal-legend .lg.written { background: var(--cn-line-2); color: var(--cn-ink); }
.scope-content .pg .cnt-cal-legend .lg.review { background: var(--cn-warn-soft); color: var(--cn-warn); }
.scope-content .pg .cnt-cal-legend .lg.approved { background: var(--cn-accent-soft); color: var(--cn-accent); }
.scope-content .pg .cnt-cal-legend .lg.live { background: var(--cn-ok-soft); color: var(--cn-ok); }
.scope-content .pg .cnt-cal-legend .lg.sched { background: var(--cn-surface); border: 1px dashed var(--cn-line); color: var(--cn-mut); }

/* 390px first: the board scrolls, and card actions are always reachable
   (there is no hover on touch) at a 44px target. */
@media (max-width: 768px) {
  .scope-content .pg .cnt-board { min-width: 760px; }
  .scope-content .pg .cnt-card .acts { opacity: 1; grid-template-rows: 1fr; }
  .scope-content .pg .cnt-ab { min-height: 44px; padding: 0 12px; }
  .scope-content .pg .cnt-ab.danger { min-width: 44px; }
  .scope-content .pg #cnt-addtopic { margin-left: 0; width: 100%; justify-content: center; }
}

/* ===== drawer (appended to body, so unscoped) ============================ */
.cnt-drbg { position: fixed; inset: 0; background: rgba(20, 28, 40, .4); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1000; }
.cnt-drbg.on { opacity: 1; pointer-events: auto; }
.cnt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw;
  background: #fff; box-shadow: var(--cn-sh-2);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.22, 1, .36, 1);
  z-index: 1001; display: flex; flex-direction: column;
  font-family: Inter, -apple-system, system-ui, sans-serif;
}
.cnt-drawer.on { transform: translateX(0); }
.cnt-drawer.wide { width: 1000px; }
/* Header: status pill, then a flexing title, then a control that never moves. */
.cnt-dr-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e3e8ef; }
.cnt-dr-stage { flex: none; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: #eef1f6; color: #6b7785; }
.cnt-dr-stage.review { background: #fdf3e3; color: #9a6700; }
.cnt-dr-stage.approved { background: #f6eceb; color: #962f2c; }
.cnt-dr-stage.posted { background: #e8f4ec; color: #1a7f37; }
.cnt-dr-ttl { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; line-height: 1.25; color: #1d2733; overflow-wrap: anywhere; }
.cnt-dr-x {
  flex: none; margin-left: auto; width: 34px; height: 34px; border-radius: var(--cn-r-sm);
  border: 1px solid #e3e8ef; background: #fff; color: #6b7785; font-size: 13px; cursor: pointer;
}
.cnt-dr-x:hover { background: #f5f6f9; color: #1d2733; }
.cnt-dr-b { flex: 1; overflow: auto; background: #f5f6f9; display: flex; flex-direction: column; }
.cnt-dr-pad { padding: 18px 20px; }
.cnt-dr-f { border-top: 1px solid #e3e8ef; padding: 12px 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff; }
.cnt-f-gap { flex: 1; min-width: 8px; }
.cnt-irow { display: flex; gap: 10px; font-size: 12px; padding: 9px 0; border-bottom: 1px solid #eef1f6; }
.cnt-irow:last-child { border-bottom: none; }
.cnt-irow .ik { width: 110px; color: #6b7785; font-weight: 700; flex: none; }
.cnt-irow .iv { flex: 1; color: #1d2733; }

/* --- page preview -------------------------------------------------------- */
.cnt-pvwrap { flex: 1; display: flex; flex-direction: column; padding: 16px 16px 0; }
.cnt-pvbar {
  display: flex; align-items: center; gap: 8px;
  background: #e9edf3; border: 1px solid #e3e8ef; border-bottom: none;
  border-radius: var(--cn-r-sm) var(--cn-r-sm) 0 0; padding: 7px 11px; font-size: 10.5px;
}
.cnt-pvbar .url { flex: 1; min-width: 0; background: #fff; border-radius: 6px; padding: 4px 9px; font-family: ui-monospace, monospace; font-size: 10px; color: #6b7785; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnt-openfull { flex: none; font-size: 10.5px; font-weight: 700; color: #962f2c; text-decoration: none; background: #fff; border: 1px solid #e3e8ef; border-radius: 6px; padding: 5px 9px; }
.cnt-frame { flex: 1; border: 1px solid #e3e8ef; border-radius: 0 0 var(--cn-r-sm) var(--cn-r-sm); overflow: hidden; background: #fff; min-height: 420px; }
/* min-height 0, NOT 520: a hard floor overflows the drawer body inside the
   ~700px-tall supasmart embed (nested scrollbars, clipped page). */
.cnt-frame iframe { width: 100%; height: 100%; min-height: 0; border: 0; display: block; }
.cnt-pvnote { font-size: 10px; color: #6b7785; margin: 8px 2px 0; }
.cnt-livecard { background: #fff; border: 1px solid #e3e8ef; border-radius: 0 0 var(--cn-r-sm) var(--cn-r-sm); padding: 30px 24px; text-align: center; }
.cnt-livecard .lt { font-weight: 700; color: #1d2733; font-size: 15px; margin-bottom: 6px; }
.cnt-livecard .ls { font-size: 11px; color: #6b7785; word-break: break-all; margin-bottom: 18px; }
.cnt-loader { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; color: #6b7785; text-align: center; padding: 40px; }
.cnt-loader .lt { font-size: 13px; font-weight: 700; color: #1d2733; }
.cnt-loader .ls { font-size: 11px; max-width: 300px; }

/* --- buttons: one accent, success green, danger red, everything else neutral */
.cnt-btn {
  font-size: 12px; font-weight: 700; border-radius: var(--cn-r-sm);
  padding: 0 15px; min-height: 38px;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.cnt-btn:focus-visible { outline: 2px solid #962f2c; outline-offset: 2px; }
.cnt-btn.primary { background: #962f2c; color: #fff; border-color: #962f2c; }
.cnt-btn.primary:hover { background: #7d2724; border-color: #7d2724; }
.cnt-btn.success { background: #1a7f37; color: #fff; border-color: #1a7f37; }
.cnt-btn.success:hover { background: #14682c; border-color: #14682c; }
.cnt-btn.outline { background: #fff; border-color: #e3e8ef; color: #1d2733; }
.cnt-btn.outline:hover { background: #f5f6f9; border-color: #d3dae4; }
/* The one destructive control, set apart from the rest by .cnt-f-gap. */
.cnt-btn.danger { background: #fff; border-color: #f3c2cc; color: #b00020; }
.cnt-btn.danger:hover { background: #fdecef; }
.cnt-btn[disabled] { opacity: .5; cursor: default; }
.cnt-btn.is-busy { background: #fff; border-color: #e3e8ef; color: #6b7785; pointer-events: none; }

/* --- the More menu ------------------------------------------------------- */
.cnt-more { position: relative; display: inline-flex; }
.cnt-more-pop {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 170px;
  background: #fff; border: 1px solid #e3e8ef; border-radius: var(--cn-r-sm);
  box-shadow: var(--cn-sh-2); padding: 5px; z-index: 1002;
}
.cnt-more.on .cnt-more-pop { display: block; }
.cnt-more-item {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: none; border: none; border-radius: 6px; cursor: pointer;
  font: 700 12px/1 Inter, system-ui, sans-serif; color: #1d2733;
  padding: 11px 10px; min-height: 40px; text-decoration: none;
}
.cnt-more-item:hover { background: #f5f6f9; }
.cnt-more-item:focus-visible { outline: 2px solid #962f2c; outline-offset: -2px; }

/* --- spinner ------------------------------------------------------------- */
.scope-content .pg .cnt-spin, .cnt-spin {
  width: 13px; height: 13px; border: 2px solid #e3e8ef; border-top-color: #962f2c;
  border-radius: 50%; animation: cntspin .7s linear infinite; display: inline-block; flex: none;
}
.cnt-spin.big { width: 30px; height: 30px; border-width: 3px; }
@keyframes cntspin { to { transform: rotate(360deg); } }

/* --- modal --------------------------------------------------------------- */
.cnt-mbg { position: fixed; inset: 0; background: rgba(20, 28, 40, .5); display: none; align-items: center; justify-content: center; z-index: 1100; padding: 20px; font-family: Inter, system-ui, sans-serif; }
.cnt-mbg.on { display: flex; }
.cnt-modal { background: #fff; border-radius: var(--cn-r-lg); max-width: 460px; width: 100%; box-shadow: var(--cn-sh-2); }
.cnt-mh { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #e3e8ef; font-size: 15px; font-weight: 800; }
.cnt-mx { margin-left: auto; width: 32px; height: 32px; border-radius: var(--cn-r-sm); border: 1px solid #e3e8ef; background: #fff; color: #6b7785; font-size: 12px; cursor: pointer; }
.cnt-mx:hover { background: #f5f6f9; color: #1d2733; }
.cnt-mb { padding: 18px 20px; font-size: 12.5px; color: #4b5563; }
.cnt-opt { display: flex; align-items: center; gap: 10px; border: 1.5px solid #e3e8ef; border-radius: var(--cn-r-sm); padding: 11px 13px; margin-bottom: 9px; cursor: pointer; }
.cnt-opt.on { border-color: #962f2c; background: #f6eceb; }
.cnt-opt:focus-visible { outline: 2px solid #962f2c; outline-offset: 2px; }
.cnt-opt .r { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #c4cdda; flex: none; position: relative; }
.cnt-opt.on .r { border-color: #962f2c; }
.cnt-opt.on .r:after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #962f2c; }
.cnt-opt .ot { font-size: 12px; font-weight: 700; color: #1d2733; }
.cnt-opt .od { font-size: 10.5px; color: #6b7785; }
.cnt-mb > .od { font-size: 12px; color: #4b5563; line-height: 1.5; margin-bottom: 12px; }
.cnt-lbl { display: block; font-size: 10.5px; font-weight: 700; color: #6b7785; margin: 12px 0 4px; }
.cnt-ta { width: 100%; border: 1px solid #e3e8ef; border-radius: var(--cn-r-sm); padding: 11px; font-family: inherit; font-size: 12px; resize: vertical; min-height: 44px; box-sizing: border-box; }
.cnt-ta:focus { outline: none; border-color: #962f2c; box-shadow: 0 0 0 3px rgba(150, 47, 44, .15); }
.cnt-mfoot { display: flex; gap: 9px; margin-top: 16px; }

@media (max-width: 768px) {
  .cnt-drawer, .cnt-drawer.wide { width: 100vw; max-width: 100vw; }
  .cnt-dr-f { padding: 10px 14px; }
  .cnt-btn { min-height: 44px; }
  .cnt-dr-x, .cnt-mx { width: 44px; height: 44px; }
  .cnt-irow { flex-direction: column; gap: 2px; }
  .cnt-irow .ik { width: auto; }
  .cnt-more-pop { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cnt-drawer, .cnt-drbg, .cnt-card .acts, .cnt-col { transition: none; }
  .cnt-spin { animation: none; }
}