/* Consistency layer (2026-11-05 feedback). Loaded after app.css and admin.css, so these rules win.
   One shape language: pill buttons and chips (like the profile chip), round icon buttons,
   8px fields. One field size and font. Blue for the main action, outline for secondary. */

:root {
  --field-h: 36px;
  --field-font: 14px;
  --btn-h: 36px;
  --btn-h-sm: 32px;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6367' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Fields: one height, one font size, text never clipped ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  font-family: inherit;
  font-size: var(--field-font);
  border-radius: var(--radius-md);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select {
  height: var(--field-h);
  min-height: var(--field-h);
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
}
/* Native selects: our own chevron, no OS chrome, text vertically centred. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-left: 12px;
  padding-right: 34px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
select:disabled { cursor: not-allowed; opacity: 0.6; }
/* Search fields read the same as every other field. */
.search-box input,
.search-field input,
input[type="search"] {
  font-size: var(--field-font);
}

/* ---------- Checkboxes and radios: one size everywhere ---------- */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--cp-blue);
  vertical-align: middle;
  cursor: pointer;
}
.checkbox-label,
.inline-check,
label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Buttons: pills, like the profile chip ---------- */
.btn {
  border-radius: var(--radius-full);
  min-height: var(--btn-h);
  height: auto;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 13px;
  font-weight: 600;
}
.btn.btn-sm { min-height: 28px; padding-left: 12px; padding-right: 12px; font-size: 12px; }
.btn.icon-only,
summary.btn.icon-only { padding: 0; width: var(--btn-h); }
.icon-btn {
  border-radius: 50%;
}
/* Main action: Core Blue. */
.btn.primary,
.shell .btn.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--text-on-accent);
}
.btn.primary:hover,
.shell .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Secondary: white with an outline (markup.io); beige stays a hover accent only. */
.btn.secondary,
.shell .btn.secondary,
.modal .btn.secondary,
.shell .page-actions > .btn.secondary,
.shell .project-bar #project-more > summary.btn,
.review-shell .approval-button {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  box-shadow: none;
}
.btn.secondary:hover,
.shell .btn.secondary:hover,
.modal .btn.secondary:hover,
.shell .project-bar #project-more > summary.btn:hover,
.shell .project-bar #project-more[open] > summary.btn,
.review-shell .approval-button:hover {
  background: var(--surface-hover);
  border-color: var(--cp-beige-dark);
}
.btn.danger:not(.quiet) { border-radius: var(--radius-full); }
/* Admin used 40px buttons; one size now. Phones keep the 44px touch target. */
.admin-main .btn { min-height: var(--btn-h); }
@media (max-width: 760px), (pointer: coarse) {
  .btn { min-height: var(--touch-target); }
  .btn.btn-sm { min-height: 36px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select { height: 44px; min-height: 44px; font-size: 16px; }
}

/* Other pill shapes follow the same language. */
.status-button,
.review-shell .version-picker,
.chip { border-radius: var(--radius-full); }
.status-button { padding-left: 12px; }
.card-status-slot .status-button { padding-left: 8px; }

/* ---------- Headings get room before the controls under them ---------- */
.page-heading { margin-bottom: var(--space-6); }
.page-heading p { margin-top: 4px; }
.admin-main .page-heading { margin-bottom: var(--space-6); }
.admin-main .activity-toolbar,
.admin-main .user-toolbar,
.admin-main .workspace-toolbar { margin-bottom: var(--space-4); }
@media (min-width: 761px) {
  .shell .dashboard .page-heading { margin-bottom: var(--space-6); }
  .shell .dashboard .workspace-project-toolbar:not(.project-bar) { margin-top: 0; }
}

/* ---------- Cards: neutral meta, like markup.io (comments are not a link colour) ---------- */
.meta-stat,
.meta-stat.has-open { color: var(--text-muted); font-weight: 400; }
.meta-stat .icon { color: var(--text-faint); }
.meta-stat.has-open { color: var(--text); font-weight: 500; }
.meta-stat.has-open .icon { color: var(--text-muted); }
.asset-card .open-count { background: transparent; color: var(--text); font-weight: 500; padding: 0; border: 0; }
.asset-card .open-count .icon { color: var(--text-muted); }

/* ---------- Counts on status tabs carry their status colour ---------- */
.count-pill.tone-sent { background: var(--success-soft); color: var(--success); }
.count-pill.tone-waiting { background: var(--warning-soft); color: var(--warning); }
.count-pill.tone-failed { background: var(--danger-soft); color: var(--danger); }
.count-pill.tone-all { background: var(--surface-selected); color: var(--cp-blue); }
.activity-dot.settings { background: var(--text-muted); }

/* ---------- Menu selects (app/menu-select.js) ---------- */
.menu-select { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.menu-select[hidden] { display: none; }
.menu-select > select {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  opacity: 0; pointer-events: none;
}
.menu-select-button {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  height: var(--field-h); padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface);
  font: inherit; font-size: var(--field-font); font-weight: 500; color: var(--text); text-align: left; cursor: pointer;
}
.menu-select-button:hover,
.menu-select-button[aria-expanded="true"] { border-color: var(--cp-beige-dark); background: var(--surface-hover); }
.menu-select-button:disabled { opacity: 0.6; cursor: not-allowed; }
.menu-select-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-select-button .menu-select-chevron { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.menu-select-list {
  position: fixed; z-index: 1000; max-width: min(320px, calc(100vw - 16px)); max-height: min(360px, calc(100dvh - 16px));
  overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-float);
}
.menu-select-list button {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 12px 0 6px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  font: inherit; font-size: 13px; color: var(--text); text-align: left; white-space: nowrap; cursor: pointer;
}
.menu-select-list button:hover,
.menu-select-list button:focus-visible { background: var(--surface-hover); outline: none; }
.menu-select-list button[aria-selected="true"] { font-weight: 600; }
.menu-select-list button:disabled { opacity: 0.5; cursor: default; }
/* One checkmark everywhere: 14px Core Blue, the same as the status menu. */
.menu-select-check,
.status-list .status-check { width: 16px; flex: none; display: inline-grid; place-items: center; color: var(--cp-blue); }
.menu-select-check .icon,
.status-list .status-check .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.menu-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--dot); border: 1.5px solid var(--dot); box-sizing: border-box;
}
.menu-dot.ring { background: transparent; border: 1.5px solid var(--text-faint); }
@media (max-width: 760px), (pointer: coarse) {
  .menu-select-button { height: 44px; font-size: 16px; }
  .menu-select-list button { min-height: 44px; font-size: 15px; }
}
/* Compact toolbars keep their 32px rhythm. */
.canvas-toolbar .menu-select-button,
.comment-tools .menu-select-button { height: var(--control-h); font-size: 13px; }
.comment-tools .menu-select { width: 100%; }
.canvas-toolbar .menu-select-button { border-color: transparent; background: transparent; border-radius: var(--radius-full); }
.canvas-toolbar .menu-select-button:hover,
.canvas-toolbar .menu-select-button[aria-expanded="true"] { background: var(--surface-hover); border-color: transparent; }
.review-shell .canvas-toolbar .menu-select { min-width: 148px; }

/* ---------- Upload limits: fields in a row, the save button under them ---------- */
.upload-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); align-items: start; }
.upload-limits > .btn { grid-column: 1 / -1; justify-self: start; }
.upload-limits > .error { grid-column: 1 / -1; margin: 0; }
.upload-limits > .error:empty { display: none; }
.inline-form { align-items: end; }
.inline-form > .btn { align-self: end; }

/* ---------- Rename in place (app/inline-rename.js) ---------- */
[data-rename-project],
[data-rename-file] { cursor: text; border-radius: var(--radius-sm); }
[data-rename-project]:hover,
[data-rename-file]:hover { box-shadow: 0 0 0 4px var(--surface-hover); background: var(--surface-hover); }
[data-rename-project]:focus-visible,
[data-rename-file]:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.is-renaming { box-shadow: none !important; background: transparent !important; }
input.inline-rename,
input.inline-rename:not([type="checkbox"]) {
  width: 100%; min-width: 120px; height: auto; min-height: 0; margin: -3px -6px; padding: 2px 6px;
  font: inherit; letter-spacing: inherit; color: inherit;
  border: 1px solid var(--cp-blue); border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: var(--ring-focus); outline: none;
}
.review-title h1.is-renaming,
.project-bar-title h1 .is-renaming { display: block; min-width: min(360px, 60vw); }

/* ---------- Share dialog ---------- */
.share-status { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.share-status.is-copied { color: var(--success); }
.share-status:empty { display: none; }
.share-row .btn { flex: none; }
.share-row .btn .icon { width: 16px; height: 16px; }
.modal-actions:has(#revoke-link:not([hidden])) { justify-content: space-between; }

/* Comment panel: each tool (sort, filter, search) takes the full row. */
.review-shell .comment-panel .comment-tools { grid-template-columns: minmax(0, 1fr); }

/* Shape and field rules that older, more specific rules in app.css/admin.css must not undo.
   (Kept to the minimum: radius for buttons, vertical padding for selects.) */
.btn,
summary.btn,
.review-shell .review-mode,
.review-shell .mobile-tabs { border-radius: var(--radius-full) !important; }
.icon-btn { border-radius: 50% !important; }
select:not([multiple]) { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Storage page: the three limit fields and the allowance field share one width. */
.upload-limits { grid-template-columns: repeat(3, minmax(0, 220px)); }
#storage-limit .field { flex: 0 1 220px; max-width: 220px; }
@media (max-width: 560px) {
  .upload-limits { grid-template-columns: minmax(0, 1fr); }
  #storage-limit .field { flex: 1 1 auto; max-width: none; }
}

/* ---------- Admin overview ---------- */
.overview-attention h2 { display: flex; align-items: center; gap: 8px; }
.attention-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; }
.attention-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.attention-item:first-child { border-top: 0; padding-top: 4px; }
.attention-item strong { font-size: 14px; font-weight: 600; }
.attention-item p { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.attention-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-selected); color: var(--cp-blue); }
.attention-icon .icon { width: 16px; height: 16px; }
.attention-item.bad .attention-icon { background: var(--danger-soft); color: var(--danger); }
.attention-item.warn .attention-icon { background: var(--warning-soft); color: var(--warning); }
.attention-clear { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--success); font-weight: 500; }
.attention-clear .icon { width: 16px; height: 16px; }
.overview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-6) 0; }
@media (max-width: 1000px) { .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .overview-stats { grid-template-columns: minmax(0, 1fr); } }
.overview-stats a.stat { color: inherit; text-decoration: none; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
.overview-stats a.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.stat-note { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.admin-box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.overview-recent .activity-list { margin-top: 8px; border: 0; border-radius: 0; box-shadow: none; }
.overview-recent .activity-row { padding-left: 0; padding-right: 0; }
@media (max-width: 560px) {
  .attention-item { grid-template-columns: auto minmax(0, 1fr); }
  .attention-item > .btn { grid-column: 2; justify-self: start; }
}

/* The login screen's button keeps the colour chosen in Administration → Login screen. */
.auth-page .auth-card .btn.primary,
.auth-page .auth-card .btn.primary:hover {
  background: var(--login-accent, var(--accent));
  border-color: var(--login-accent, var(--accent));
  color: var(--login-accent-text, var(--text-on-accent));
}

/* ---------- Comment popups (markup.io): hover card, thread popup on the pin, new-comment bar ----------
   One card: 360px, 16px padding, hairline border, a soft shadow. Placed beside the pin by
   placeBesidePin() in app/comments.js; phones keep the bottom sheet from app.css. */
.review-shell .pin-preview,
#modal.pin-dialog.thread-popup,
#modal.pin-dialog.composer {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 5px 10px rgba(23, 23, 19, 0.05), 0 1px 2px rgba(23, 23, 19, 0.04);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
@media (min-width: 761px) {
  .review-shell .pin-preview,
  #modal.pin-dialog.thread-popup { width: min(360px, calc(100vw - 24px)); padding: 16px; }
  #modal.pin-dialog.thread-popup { padding-top: 6px; max-height: min(560px, calc(100dvh - 120px)); }
  #modal.pin-dialog.composer { width: min(360px, calc(100vw - 24px)); padding: 6px; }
}

/* Hover card: name and a round resolve check, then the time, then up to four lines of text. */
.review-shell .pin-preview { cursor: pointer; max-height: none; overflow: hidden; }
.review-shell .pin-preview:hover { border-color: var(--line-strong); }
.pin-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pin-preview-head strong { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-shell .pin-preview time { display: block; margin-top: 2px; font-size: 13px; color: var(--text-faint); }
.review-shell .pin-preview .pin-preview-text {
  margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 22px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.review-shell .pin-preview .pin-preview-replies { display: block; margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* One resolve check everywhere in the popups: a 22px circle that fills green when resolved. */
.resolve-circle,
#modal.thread-popup #toggle-resolved {
  flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; display: inline-grid; place-items: center;
  border: 1.5px solid var(--text-muted); border-radius: 50% !important; background: transparent; color: var(--text-muted); cursor: pointer;
}
.resolve-circle .icon,
#modal.thread-popup #toggle-resolved .icon { width: 13px; height: 13px; stroke-width: 2.5; }
.resolve-circle:hover,
#modal.thread-popup #toggle-resolved:hover { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.resolve-circle.done,
#modal.thread-popup #toggle-resolved.done { border-color: var(--success); background: var(--success); color: #fff; }

/* Thread popup: a 40px head (‹ › left; resolve, ⋯, ✕ right), "Name · time", text, replies, reply box. */
#modal.thread-popup .modal-head { display: flex; align-items: center; gap: 2px; min-height: 40px; margin: 0 -8px 4px; padding: 0; border: 0; }
#modal.thread-popup .modal-head > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#modal.thread-popup .conversation-navigation { display: flex; align-items: center; gap: 2px; margin-right: auto; }
#modal.thread-popup .conversation-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#modal.thread-popup .modal-head .icon-btn,
#modal.thread-popup .thread-more > summary { width: 28px; height: 28px; min-height: 0; padding: 0; display: inline-grid; place-items: center; color: var(--text-muted); background: transparent; border: 0; }
#modal.thread-popup .modal-head .icon-btn:hover:not(:disabled),
#modal.thread-popup .thread-more > summary:hover,
#modal.thread-popup .thread-more[open] > summary { background: var(--surface-hover); color: var(--text); }
#modal.thread-popup .modal-head .icon-btn:disabled { opacity: 0.35; }
#modal.thread-popup .modal-head .icon-btn .icon,
#modal.thread-popup .thread-more > summary .icon { width: 16px; height: 16px; }
#modal.thread-popup .conversation-actions { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; }
#modal.thread-popup .conversation-actions #toggle-resolved { margin-right: 4px; }
.thread-more { position: relative; }
.thread-more > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.thread-more > summary::-webkit-details-marker { display: none; }
.thread-more .actions-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 160px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.thread-more .actions-menu-list button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.thread-more .actions-menu-list button:hover { background: var(--surface-hover); }
.thread-more .actions-menu-list .icon { width: 15px; height: 15px; color: var(--text-muted); }
#modal.thread-popup .modal-description { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; color: var(--text); }
#modal.thread-popup .modal-description strong { font-weight: 600; }
#modal.thread-popup .modal-description time,
.thread-msg-head time { font-size: 13px; color: var(--text-faint); font-weight: 400; }
#modal.thread-popup .conversation-body { margin: 2px 0 0; padding: 0; border: 0; }
#modal.thread-popup .conversation-text { margin: 0; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
#modal.thread-popup .reply { margin: 14px 0 0; padding: 0; border: 0; background: transparent; }
.thread-msg-head { display: flex; align-items: baseline; gap: 8px; }
.thread-msg-head strong { font-size: 14px; font-weight: 600; }
.thread-msg-text p { margin: 2px 0 0; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Reply box and new-comment bar: one rounded grey line that grows to six lines. */
#modal.thread-popup #conversation-reply { margin-top: 14px; }
#modal.thread-popup #conversation-reply .field,
#modal.composer .composer-bar {
  position: relative; display: flex; align-items: flex-end; gap: 6px; margin: 0;
  padding: 6px 6px 6px 12px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-hover);
}
#modal.composer .composer-bar { background: var(--surface); }
#modal.thread-popup #conversation-reply .field:focus-within,
#modal.composer .composer-bar:focus-within { border-color: var(--cp-blue-20); background: var(--surface); }
#modal.thread-popup #conversation-reply textarea,
#modal.composer #comment-text {
  flex: 1 1 auto; min-width: 0; min-height: 30px; height: 30px; max-height: none; margin: 0; padding: 5px 0; resize: none;
  border: 0; outline: 0; box-shadow: none; background: transparent; font: inherit; font-size: 14px; line-height: 20px; color: var(--text);
}
#modal.thread-popup #conversation-reply button[type="submit"],
#modal.composer .composer-send {
  flex: none; width: 30px; height: 30px; min-height: 0; padding: 0; display: inline-grid; place-items: center;
  border: 0; border-radius: 50% !important; background: var(--cp-blue); color: #fff; cursor: pointer;
}
#modal.thread-popup #conversation-reply button[type="submit"] .icon,
#modal.composer .composer-send .icon { width: 15px; height: 15px; }
#modal.composer .composer-send:disabled,
#modal.thread-popup #conversation-reply .field:has(textarea:placeholder-shown) button[type="submit"] { background: var(--line); color: var(--text-faint); cursor: default; }
#modal.composer .composer-hint { display: block; padding: 4px 8px 2px; font-size: 12px; color: var(--text-muted); }
#modal.composer .error:empty,
#modal.thread-popup #conversation-reply .error:empty { display: none; }
/* The new-comment bar has no visible head: Esc or a click elsewhere closes it. */
#modal.composer .modal-head,
#modal.composer .modal-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
/* Task controls fold behind one quiet line in threads. */
.task-toggle { margin-top: 10px; }
.task-toggle > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-muted); padding: 2px 6px; margin-left: -6px; border-radius: var(--radius-sm); }
.task-toggle > summary::-webkit-details-marker { display: none; }
.task-toggle > summary:hover { color: var(--text); background: var(--surface-hover); }
.task-toggle > summary .icon { width: 14px; height: 14px; }
.task-toggle[open] > summary { color: var(--text); }
.task-toggle .task-controls { margin-top: 8px; }
/* The new-comment card is the bar itself: no second frame inside it; focus shows on the card. */
#modal.composer .composer-bar,
#modal.composer .composer-bar:focus-within { border-color: transparent; background: transparent; padding: 2px 2px 2px 10px; }
#modal.pin-dialog.composer:focus-within { border-color: var(--cp-blue-20); box-shadow: 0 5px 10px rgba(23, 23, 19, 0.05), 0 0 0 3px rgba(37, 38, 179, 0.12); }
#modal.thread-docked .task-toggle { margin: 8px 12px 0; }

/* Notifications on phones open full width under the header. The review screen has no .topbar,
   so the panel was sized against the 32px bell and became a thin strip. */
@media (max-width: 760px) {
  .review-shell .review-header { position: relative; }
  .review-shell .review-header .inbox { position: static; }
  .review-shell .review-header .inbox-panel { top: calc(100% + 6px); left: 8px; right: 8px; width: auto; }
}