/* B#41 shell polish: Defaults & gates hint, Page not found, setup banner, grouped
   notification count. B#47: standard value tags and switches. Works in both looks. */

.cyn-hint {
  --sh-ink: var(--cyn-ink-2, #4a5a6e);
  --sh-bg: var(--cyn-ground, #f5f7fa);
  --sh-line: var(--cyn-line, #bbc5d3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--sh-line);
  border-left: 3px solid var(--cyn-cta, #3d5a80);
  border-radius: 8px;
  background: var(--sh-bg);
  color: var(--sh-ink);
  font-size: 13px;
}
.cyn-hint > span { flex: 1 1 16rem; min-width: 0; }
.cyn-hint-error { border-left-color: #b42318; }
html[data-theme="dark"] .cyn-hint-error { border-left-color: #f3a397; }

.cyn-notfound { max-width: 34rem; margin: 48px auto; display: grid; gap: 10px; }
.cyn-notfound h2 { margin: 0; font-size: 20px; }
.cyn-notfound code { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--cyn-ground, #f5f7fa); }

.cyn-setup-banner-wrap {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  max-width: calc(100vw - 32px);
}
/* B#72: while the bulk action bar is up (rows ticked), sit just above it instead of covering
   its buttons. --m-bulkbar-clear and m-bulkbar-on are set by js/cynilo-look.js. */
html.m-bulkbar-on .cyn-setup-banner-wrap {
  bottom: calc(var(--m-bulkbar-clear, 72px) + env(safe-area-inset-bottom, 0px));
  transition: bottom 0.2s ease;
}
.cyn-setup-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
  background: #fff4e5;
  color: #5a3604;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(16, 30, 52, 0.45);
  text-align: left;
}
.cyn-setup-banner:focus-visible { outline: 2px solid var(--cyn-cta, #3d5a80); outline-offset: 2px; }
.cyn-setup-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: #b45309; flex: none; }
.cyn-setup-banner-go { font-weight: 600; text-decoration: underline; white-space: nowrap; }
html[data-theme="dark"] .cyn-setup-banner { background: #3a2d12; color: #f8e3b8; border-color: rgba(242, 194, 109, 0.4); }
html[data-theme="dark"] .cyn-setup-banner-dot { background: #f2c26d; }

.cyn-note-times {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  background: var(--cyn-ground, #eef1f5);
  color: var(--cyn-ink-2, #4a5a6e);
}

/* B#47 standard values */
.cyn-sv-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cyn-sv-tag.is-std { background: #e2f2ec; color: #2f6b5a; }
.cyn-sv-tag.is-own { background: #f8efdc; color: #7a5b1e; }
html[data-theme="dark"] .cyn-sv-tag.is-std { background: #163327; color: #6fd3a8; }
html[data-theme="dark"] .cyn-sv-tag.is-own { background: #3a2d12; color: #f2c26d; }
.cyn-sv-off td { opacity: 0.55; }
.cyn-sv-switch {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--cyn-line, #bbc5d3);
  cursor: pointer;
  flex: none;
  vertical-align: middle;
}
.cyn-sv-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}
.cyn-sv-switch[aria-checked="true"] { background: #2f6b5a; }
.cyn-sv-switch[aria-checked="true"]::after { left: 16px; }
.cyn-sv-switch:focus-visible { outline: 2px solid var(--cyn-cta, #3d5a80); outline-offset: 2px; }
.cyn-sv-switch[disabled] { opacity: 0.45; cursor: not-allowed; }
.cyn-sv-note {
  border-left: 3px solid #2f6b5a;
  background: #e2f2ec;
  color: #1f4a3e;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
}
html[data-theme="dark"] .cyn-sv-note { background: #163327; color: #bfe9d6; }
@media (prefers-reduced-motion: reduce) { .cyn-sv-switch::after { transition: none; } }

/* B#47: what kind of list this is — shown in the list header and on the list cards. */
.cyn-sv-kind {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--cyn-line, #bbc5d3);
  background: var(--cyn-panel, #fff);
  color: var(--cyn-ink-2, #4a5a6e);
}
.cyn-sv-kind.is-std { background: #e2f2ec; border-color: #9fd2bf; color: #2f6b5a; }
.cyn-sv-kind-chip {
  flex-shrink: 0;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  background: #e2f2ec;
  color: #2f6b5a;
}
html[data-theme="dark"] .cyn-sv-kind.is-std,
html[data-theme="dark"] .cyn-sv-kind-chip { background: #163327; border-color: #2f6b5a; color: #6fd3a8; }

/* B#19a: record link to an unknown id — notice inside the register. */
.cyn-record-notfound {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--cyn-line, #bbc5d3);
  border-left: 3px solid #b54708;
  border-radius: 8px;
  background: var(--cyn-ground, #f5f7fa);
  color: var(--cyn-ink-2, #4a5a6e);
  font-size: 13px;
}
.cyn-record-notfound > span { flex: 1 1 auto; min-width: 0; }
.cyn-record-notfound-x {
  border: 0;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
html[data-theme="dark"] .cyn-record-notfound { border-left-color: #fdb022; }

/* B#19a: Review count in the Assets list (documents waiting for review). */
.cyn-ast-review {
  border: 0;
  background: none;
  padding: 0;
  color: #b54708;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
html[data-theme="dark"] .cyn-ast-review { color: #fdb022; }

/* B#19a-2: register rows carry a real record link (Cmd/Ctrl/middle-click opens a new tab). */
a.cyn-rec-link {
  color: inherit;
  text-decoration: none;
}
a.cyn-rec-link:hover,
a.cyn-rec-link:focus-visible {
  text-decoration: underline;
}