/* ==========================================================================
   Manage — templates (tpl / tpld), shared library (lib) and contacts (ct)
   ========================================================================== */

/* ==========================================================================
   Templates list
   ========================================================================== */

.tpl { display: flex; flex-direction: column; }
.tpl-tabs { margin: 0 0 var(--s-7); }
.tpl-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.tpl-toolbar .searchbox { max-width: 100%; }
/* .iconbtn's display beats the UA [hidden] rule, so hide the empty clear button */
.tpl-toolbar .searchbox__clear[hidden] { display: none; }
.tpl-emptywrap { padding: var(--s-8) 0; }

/* thumbnails ------------------------------------------------------------- */
.tpl-thumb__none {
  display: grid; place-content: center;
  width: 100%; min-height: 96px;
  background: var(--bg-sunken); color: var(--tx-4);
  border: 1px dashed var(--br-2); border-radius: var(--r-4);
}

/* cards ------------------------------------------------------------------ */
.tpl-grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
}
.tpl-card { display: flex; flex-direction: column; overflow: hidden; }
.tpl-card__thumb {
  position: relative;
  display: flex; justify-content: center;
  padding: var(--s-7) var(--s-7) 0;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--br-1);
  max-height: 132px; overflow: hidden;
}
.tpl-card__thumb .dp-page { box-shadow: 0 -1px 0 var(--br-2), 0 1px 3px rgba(16, 24, 40, .16); }
.tpl-card__thumb:hover { text-decoration: none; }
.tpl-card__more {
  position: absolute; right: var(--s-6); top: var(--s-6);
  padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--bg-inverse); color: var(--tx-inverse);
  font-size: var(--fs-11); font-weight: 620;
}
.tpl-card__body {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-7); flex: 1 1 auto; min-width: 0;
}
.tpl-card__title {
  font-size: var(--fs-14); font-weight: 600; color: var(--tx-1);
  line-height: 1.35; letter-spacing: -.008em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tpl-card__title:hover { color: var(--tx-accent); text-decoration: none; }
.tpl-card__desc { font-size: var(--fs-12); color: var(--tx-3); line-height: 1.5; min-height: 2.6em; }
.tpl-card__meta > div { flex-wrap: wrap; row-gap: 1px; }
.tpl-card__meta span { white-space: nowrap; }
.tpl-card__usage { margin-top: auto; }
.tpl-card__foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--br-1);
}

/* role chips ------------------------------------------------------------- */
.tpl-roles { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.tpl-rolechip {
  display: inline-flex; align-items: center; gap: var(--s-3);
  max-width: 156px; height: 22px; padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--rc-soft, var(--bg-sunken));
  color: var(--rc-ink, var(--tx-2));
  border: 1px solid color-mix(in srgb, var(--rc-bd, var(--br-2)) 30%, transparent);
  font-size: var(--fs-11); font-weight: 560;
}
:root[data-theme="dark"] .tpl-rolechip {
  background: color-mix(in srgb, var(--rc-bd) 22%, transparent); color: #fff;
}

/* list rows -------------------------------------------------------------- */
.tpl-list { overflow: hidden; }
.tpl-row {
  display: flex; align-items: center; gap: var(--s-7);
  padding: var(--s-7) var(--s-8);
  border-bottom: 1px solid var(--br-1);
  transition: background var(--dur-1) var(--ease);
}
.tpl-row:last-child { border-bottom: 0; }
.tpl-row:hover { background: var(--bg-hover); }
.tpl-row__thumb { flex: none; display: flex; border-radius: 2px; overflow: hidden; }
.tpl-row__thumb:hover { text-decoration: none; }
.tpl-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tpl-row__title { font-size: var(--fs-13); font-weight: 590; color: var(--tx-1); }
.tpl-row__title:hover { color: var(--tx-accent); }
.tpl-row__desc { font-size: var(--fs-12); color: var(--tx-3); }
.tpl-row__stats { flex: none; width: 236px; display: flex; flex-direction: column; gap: var(--s-3); }
.tpl-row__stats div.row { flex-wrap: wrap; row-gap: 1px; }
.tpl-row__stats span { white-space: nowrap; }
.tpl-row__main span { white-space: nowrap; }
.tpl-row__main div.row { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.tpl-row__acts { flex: none; display: flex; align-items: center; gap: var(--s-4); }

/* ==========================================================================
   Use-a-template dialog
   ========================================================================== */

.tpl-use { display: flex; flex-direction: column; gap: var(--s-8); }
.tpl-use__rows { display: flex; flex-direction: column; gap: var(--s-6); }
.tpl-userow {
  border: 1px solid var(--br-1); border-left: 3px solid var(--rc-bd, var(--br-2));
  border-radius: var(--r-8); background: var(--bg-surface);
  padding: var(--s-6) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.tpl-userow__head { display: flex; align-items: center; gap: var(--s-5); }
.tpl-userow__ord {
  width: 18px; flex: none; text-align: center;
  font-size: var(--fs-12); font-weight: 650; color: var(--tx-3);
}
.tpl-userow__name { font-size: var(--fs-13); font-weight: 590; }
.tpl-userow__inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-5); }

/* contact autocomplete --------------------------------------------------- */
.tpl-ac { position: relative; min-width: 0; }
.tpl-ac__list {
  position: absolute; z-index: 5; top: calc(100% + 3px); left: 0; right: 0;
  max-height: 214px; overflow-y: auto;
  padding: var(--s-2);
  background: var(--bg-raised);
  border: 1px solid var(--br-2); border-radius: var(--r-8);
  box-shadow: var(--sh-lg);
}
.tpl-ac__opt {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-6); cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.tpl-ac__opt.is-active { background: var(--bg-selected); }
.tpl-ac__nm { font-size: var(--fs-12); font-weight: 570; color: var(--tx-1); }
.tpl-ac__em { font-size: var(--fs-11); color: var(--tx-3); }
.tpl-ac__co { font-size: var(--fs-11); color: var(--tx-4); }

/* new-template dialog ---------------------------------------------------- */
.tpl-doclist {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 208px; overflow-y: auto;
  padding: var(--s-3);
  border: 1px solid var(--br-2); border-radius: var(--r-8);
  background: var(--bg-sunken);
}
.tpl-docopt {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-6); text-align: left;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tpl-docopt:hover { background: var(--bg-hover); }
.tpl-docopt.is-on { background: var(--bg-selected); border-color: var(--a-200); }
.tpl-docopt__ic {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-6);
  display: grid; place-content: center;
  background: var(--bg-surface); color: var(--tx-3); border: 1px solid var(--br-1);
}
.tpl-docopt.is-on .tpl-docopt__ic { color: var(--a-600); border-color: var(--a-200); }
.tpl-docopt__on { margin-left: auto; color: var(--a-500); }

.tpl-newroles { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.tpl-newrole { display: flex; align-items: center; gap: var(--s-4); width: 100%; }
.tpl-newrole__ord {
  width: 16px; flex: none; text-align: center;
  font-size: var(--fs-11); font-weight: 650; color: var(--tx-4);
}
.tpl-newrole .input { flex: 1 1 auto; min-width: 0; }
.tpl-newrole .select { flex: none; width: 172px; }

/* ==========================================================================
   Read-only document preview (templates + library)
   ========================================================================== */

.tpl-prev, .lib-prev { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tpl-prev__bar, .lib-prev__bar {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-8);
  border-bottom: 1px solid var(--br-1); background: var(--bg-surface); flex: none;
}
.tpl-prev__main, .lib-prev__main { flex: 1 1 auto; display: flex; min-height: 0; }
.tpl-prev__rail, .lib-prev__rail { flex: none; width: 116px; display: flex; min-height: 0; }
.tpl-prev__rail .thumbs, .lib-prev__rail .thumbs { flex: 1 1 auto; }
.tpl-prev__stage, .lib-prev__stage { flex: 1 1 auto; min-width: 0; display: flex; min-height: 0; }
/* .dv is min-content sized (a page is 816px wide); let it shrink so "fit width"
   is measured against the real container instead of overflowing it. */
.tpl-prev__stage > .dv, .lib-prev__stage > .dv { min-width: 0; }

/* ==========================================================================
   Template detail
   ========================================================================== */

.tpld-head { margin-bottom: var(--s-6); }
.tpld-head__title { flex-wrap: wrap; row-gap: var(--s-3); }
.tpld-head__meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-4); row-gap: var(--s-2);
  margin-top: var(--s-5);
  font-size: var(--fs-12); color: var(--tx-3);
}
.tpld-rename {
  border-radius: var(--r-4); padding: 1px 4px; margin: -1px -4px;
  border: 1px dashed transparent;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.tpld-rename:hover { border-color: var(--br-2); }
.tpld-rename:focus { border-color: var(--a-500); border-style: solid; background: var(--bg-surface); outline: none; }

.tpld-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-4); margin-bottom: var(--s-7);
}
.tpld-tabs { margin-bottom: var(--s-8); }
.tpld-panel { min-width: 0; }
.tpld-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }

.tpld-doc {
  display: flex; align-items: center; gap: var(--s-7);
  padding: var(--s-6) var(--s-9);
  border-bottom: 1px solid var(--br-1);
}
.tpld-doc:last-child { border-bottom: 0; }
.tpld-doc__thumb { flex: none; display: flex; border-radius: 2px; overflow: hidden; }
.tpld-doc div.row { flex-wrap: wrap; row-gap: 1px; }
.tpld-doc span { white-space: nowrap; }

.tpld-rolemini { display: flex; align-items: center; gap: var(--s-5); }
.tpld-rolemini .rc-swatch { flex: none; }

.tpld-role {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-7) var(--s-9);
  border-bottom: 1px solid var(--br-1);
  border-left: 3px solid var(--rc-bd, var(--br-2));
}
.tpld-role:last-child { border-bottom: 0; }
.tpld-role__ord {
  width: 20px; flex: none; text-align: center;
  font-size: var(--fs-13); font-weight: 650; color: var(--tx-3);
}
.tpld-role__count { align-items: flex-end; flex: none; text-align: right; }

.tpld-types { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.tpld-type {
  display: inline-flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--br-1); border-radius: var(--r-pill);
  background: var(--bg-sunken); font-size: var(--fs-12); color: var(--tx-2);
}
.tpld-type svg { color: var(--tx-3); }

/* fields tab ------------------------------------------------------------- */
.tpld-fieldbar {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5) var(--s-7);
  border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-surface);
}
.tpld-stage {
  display: flex; min-height: 0;
  height: clamp(420px, 68vh, 860px);
  border: 1px solid var(--br-1); border-radius: var(--r-10);
  overflow: hidden; background: var(--bg-canvas);
}
.tpld-stage__rail { flex: none; width: 112px; display: flex; min-height: 0; }
.tpld-stage__rail .thumbs { flex: 1 1 auto; }
.tpld-stage__view { flex: 1 1 auto; min-width: 0; display: flex; min-height: 0; }
.tpld-stage__view > .dv { min-width: 0; }

.tpld-legend {
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
  padding: var(--s-5) var(--s-7);
  border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-sunken);
}
.tpld-legend__item {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-11); color: var(--tx-2); max-width: 200px;
}

/* the saved field layout, painted onto the page ------------------------- */
.tpl-fbox {
  position: absolute;
  box-sizing: border-box;
  display: flex; align-items: center;
  border: 1.5px solid var(--rc-bd);
  background: color-mix(in srgb, var(--rc-fill) 72%, transparent);
  border-radius: 2px;
  cursor: default; user-select: none;
}
.tpl-fbox__in {
  display: flex; align-items: center; gap: 3px;
  padding: 0 3px; min-width: 0; width: 100%;
  color: var(--rc-ink);
  font-size: 10px; font-weight: 600; line-height: 1;
  pointer-events: none;
}
.tpl-fbox__req {
  position: absolute; top: -6px; right: -3px;
  color: var(--err-500); font-size: 13px; font-weight: 800; line-height: 1;
  pointer-events: none;
}

/* ==========================================================================
   Shared library
   ========================================================================== */

.lib { display: flex; flex-direction: column; }
.lib-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--s-9); align-items: start; }
.lib-main { min-width: 0; }

.lib-rail {
  position: sticky; top: calc(var(--topbar-h) + var(--s-8));
  display: flex; flex-direction: column; gap: var(--s-8);
}
.lib-rail__group, .ct-rail__group { display: flex; flex-direction: column; gap: 2px; }
.lib-rail__label, .ct-rail__label {
  font-size: var(--fs-11); font-weight: 620; color: var(--tx-4);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0 var(--s-5) var(--s-3);
}
.lib-railitem, .ct-railitem {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-5);
  border-radius: var(--r-8);
  font-size: var(--fs-13); color: var(--tx-2); text-align: left;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.lib-railitem svg, .ct-railitem svg { color: var(--tx-4); flex: none; }
.lib-railitem:hover, .ct-railitem:hover { background: var(--bg-hover); color: var(--tx-1); }
.lib-railitem.is-active, .ct-railitem.is-active {
  background: var(--bg-selected); color: var(--tx-accent); font-weight: 570;
}
.lib-railitem.is-active svg, .ct-railitem.is-active svg { color: var(--a-500); }
.lib-railitem__n, .ct-railitem__n { font-size: var(--fs-11); color: var(--tx-4); flex: none; }
.lib-railitem.is-active .lib-railitem__n, .ct-railitem.is-active .ct-railitem__n { color: var(--tx-accent); }

.lib-tagcloud { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: 0 var(--s-3); }
.lib-rail__note, .ct-rail__note {
  display: flex; gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-sunken);
  font-size: var(--fs-11); color: var(--tx-3); line-height: 1.5;
}
.lib-rail__note svg, .ct-rail__note svg { margin-top: 1px; }

.lib-toolbar, .ct-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-5); margin-bottom: var(--s-6);
}
.lib-toolbar .searchbox, .ct-toolbar .searchbox { max-width: 100%; }
.lib-toolbar .searchbox__clear[hidden], .ct-toolbar .searchbox__clear[hidden] { display: none; }
.lib-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-6); }
.lib-emptywrap, .ct-emptywrap { padding: var(--s-8) 0; }

/* cards ------------------------------------------------------------------ */
.lib-grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr));
}
.lib-card { display: flex; flex-direction: column; overflow: hidden; }
.lib-card__thumb {
  position: relative; display: flex; justify-content: center;
  padding: var(--s-7) var(--s-7) 0;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--br-1);
  max-height: 148px; overflow: hidden;
  width: 100%;
}
.lib-card__thumb .dp-page { box-shadow: 0 -1px 0 var(--br-2), 0 1px 3px rgba(16, 24, 40, .16); }
.lib-card__zoom {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  background: color-mix(in srgb, var(--bg-inverse) 34%, transparent);
  color: #fff; opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.lib-card__thumb:hover .lib-card__zoom,
.lib-card__thumb:focus-visible .lib-card__zoom { opacity: 1; }
.lib-card__body {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-7); flex: 1 1 auto; min-width: 0;
}
.lib-card__title { font-size: var(--fs-13); font-weight: 590; line-height: 1.4; }
.lib-card__body div.row { flex-wrap: wrap; row-gap: 1px; }
.lib-card__body span { white-space: nowrap; }
.lib-card__usage { margin-top: auto; }
.lib-card__usage > div { flex-wrap: wrap; row-gap: 1px; }
.lib-card__foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding-top: var(--s-6); border-top: 1px solid var(--br-1);
}
.lib-card__foot .btn:first-child { flex: 1 1 auto; }

.lib-tags { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.lib-tag { cursor: pointer; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.lib-tag:hover { border-color: var(--a-300); color: var(--tx-accent); }

/* rows ------------------------------------------------------------------- */
.lib-list { overflow: hidden; }
.lib-row {
  display: flex; align-items: center; gap: var(--s-7);
  padding: var(--s-6) var(--s-8);
  border-bottom: 1px solid var(--br-1);
  transition: background var(--dur-1) var(--ease);
}
.lib-row:last-child { border-bottom: 0; }
.lib-row:hover { background: var(--bg-hover); }
.lib-row__thumb { flex: none; display: flex; border-radius: 2px; overflow: hidden; }
.lib-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.lib-row__main div.row { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.lib-row__main span { white-space: nowrap; }
.lib-row__title { font-size: var(--fs-13); font-weight: 570; max-width: 100%; }
.lib-row__usage { flex: none; width: 128px; display: flex; flex-direction: column; gap: 2px; }
.lib-row__usage span { white-space: nowrap; }
.lib-row__acts { flex: none; display: flex; align-items: center; gap: var(--s-4); }

/* add dialog ------------------------------------------------------------- */
.lib-add {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 300px; overflow-y: auto;
  padding: var(--s-3);
  border: 1px solid var(--br-2); border-radius: var(--r-8);
  background: var(--bg-sunken);
}
.lib-addrow {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5); border-radius: var(--r-6);
  border: 1px solid transparent; cursor: pointer;
  position: relative;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.lib-addrow input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; }
.lib-addrow:hover { background: var(--bg-hover); }
.lib-addrow.is-on { background: var(--bg-selected); border-color: var(--a-200); }
.lib-addrow input:checked + .check__box { background: var(--a-500); border-color: var(--a-500); }
.lib-addrow input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.lib-addrow input:focus-visible + .check__box { box-shadow: var(--sh-focus); }
.lib-addrow__ic {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-6);
  display: grid; place-content: center;
  background: var(--bg-surface); color: var(--tx-3); border: 1px solid var(--br-1);
}

/* ==========================================================================
   Contacts
   ========================================================================== */

.ct { display: flex; flex-direction: column; }
.ct-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--s-9); align-items: start; }
.ct-main { min-width: 0; }
.ct-rail {
  position: sticky; top: calc(var(--topbar-h) + var(--s-8));
  display: flex; flex-direction: column; gap: var(--s-8);
}
.ct-tablewrap { overflow: hidden; }
.ct-skelhead { padding: var(--s-6) var(--s-7); border-bottom: 1px solid var(--br-1); background: var(--bg-sunken); }

.ct-table { table-layout: fixed; }
.ct-table td, .ct-table th { overflow: hidden; }
.ct-table tbody tr:last-child td { border-bottom: 0; }
.ct-table tbody tr:focus-visible { outline: 2px solid var(--a-500); outline-offset: -2px; }
.ct-table th.cell-tight, .ct-table td.cell-tight { width: 42px; }
/* With table-layout: fixed only the first row sizes the columns, so every width
   has to live on the header cells too or the columns end up equal. */
.ct-table thead th:nth-child(2) { width: auto; }
.ct-table .ct-td-email, .ct-table thead th:nth-child(3) { width: 26%; }
.ct-table .ct-td-groups, .ct-table thead th:nth-child(4) { width: 14%; }
.ct-table .ct-td-when, .ct-table thead th:nth-child(5) { width: 92px; }
.ct-table .ct-td-when { white-space: nowrap; color: var(--tx-2); }
.ct-table .ct-row__menu { opacity: .55; transition: opacity var(--dur-2) var(--ease); }
.ct-table tbody tr:hover .ct-row__menu,
.ct-table tbody tr:focus-within .ct-row__menu { opacity: 1; }

.ct-body[data-density="compact"] .ct-table td { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.ct-body[data-density="compact"] .ct-name__sub { display: none; }

.ct-name { display: flex; align-items: center; gap: var(--s-5); min-width: 0; }
.ct-name__t { font-size: var(--fs-13); font-weight: 570; }

.ct-star {
  flex: none; display: inline-grid; place-content: center;
  width: 22px; height: 22px; border-radius: var(--r-4);
  color: var(--tx-4);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.ct-star:hover { background: var(--bg-hover); color: var(--warn-500); }
.ct-star.is-on { color: #e0a020; }
.ct-star.is-on svg { fill: #f0c04a; }

.ct-email { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ct-email a { font-size: var(--fs-12); color: var(--tx-2); }
.ct-email a:hover { color: var(--tx-link); }
.ct-email__copy { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.ct-table tbody tr:hover .ct-email__copy,
.ct-table tbody tr:focus-within .ct-email__copy,
.ct-card:hover .ct-email__copy { opacity: 1; }

.ct-chiprow { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ct-groupchip { cursor: pointer; }
.ct-groupchip:hover { border-color: var(--a-300); color: var(--tx-accent); }

/* stacked cards --------------------------------------------------------- */
.ct-cards { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.ct-card { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6) var(--s-7); cursor: pointer; }
.ct-card:focus-visible { outline: 2px solid var(--a-500); outline-offset: 1px; }
.ct-card.is-selected { border-color: var(--a-300); background: var(--bg-selected); }
.ct-card__top { display: flex; align-items: center; gap: var(--s-5); }
.ct-card__foot { display: flex; align-items: center; gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--br-1); }
.ct-card .ct-email__copy { opacity: 1; }

/* add / edit dialog ----------------------------------------------------- */
.ct-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); }
.ct-groups { display: flex; flex-direction: column; gap: var(--s-5); }
.ct-groups__wrap {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  max-height: 132px; overflow-y: auto;
}
.ct-groups .input { max-width: 220px; }

/* drawer ---------------------------------------------------------------- */
.ct-drawer__top { display: flex; align-items: center; gap: var(--s-8); }
.ct-drawer__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.ct-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-6);
  border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-sunken);
}
.ct-stat__v { font-size: var(--fs-20); font-weight: 650; letter-spacing: -.02em; }
.ct-stat__l { font-size: var(--fs-11); color: var(--tx-3); }
.ct-stat--ok { background: var(--ok-50); border-color: var(--ok-100); }
.ct-stat--ok .ct-stat__v { color: var(--ok-500); }
.ct-stat--warn { background: var(--warn-50); border-color: var(--warn-100); }
.ct-stat--warn .ct-stat__v { color: var(--warn-500); }
.ct-stat--err { background: var(--err-50); border-color: var(--err-100); }
.ct-stat--err .ct-stat__v { color: var(--err-500); }

.ct-hist {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-6) var(--s-9);
  border-bottom: 1px solid var(--br-1);
  color: inherit;
  transition: background var(--dur-1) var(--ease);
}
.ct-hist:last-child { border-bottom: 0; }
.ct-hist:hover { background: var(--bg-hover); text-decoration: none; }
.ct-hist__right { align-items: flex-end; flex: none; text-align: right; }

/* bulk bar -------------------------------------------------------------- */
.ct-bulk {
  position: fixed; left: 50%; bottom: var(--s-9);
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-7);
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-8);
  background: var(--bg-inverse); color: var(--tx-inverse);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-xl);
  transform: translate(-50%, 130%);
  opacity: 0;
  transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  max-width: calc(100vw - var(--s-10));
}
.ct-bulk.is-in { transform: translate(-50%, 0); opacity: 1; }
.ct-bulk__count { font-size: var(--fs-13); white-space: nowrap; }
.ct-bulk__count strong { font-size: var(--fs-15); margin-right: 3px; }
.ct-bulk__actions { display: flex; align-items: center; gap: var(--s-4); overflow-x: auto; scrollbar-width: none; }
.ct-bulk__actions::-webkit-scrollbar { display: none; }
.ct-bulk .btn--secondary, .ct-bulk .btn--danger-outline {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .2);
  color: var(--tx-inverse);
  box-shadow: none;
}
.ct-bulk .btn--secondary:hover:not(:disabled),
.ct-bulk .btn--danger-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .34);
}
.ct-bulk .btn--danger-outline { color: #ffbdbd; }
.ct-bulk .btn--ghost { color: var(--tx-inverse); opacity: .75; }
.ct-bulk .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: var(--tx-inverse); opacity: 1; }
:root[data-theme="dark"] .ct-bulk .btn--secondary,
:root[data-theme="dark"] .ct-bulk .btn--danger-outline,
:root[data-theme="dark"] .ct-bulk .btn--ghost { color: var(--tx-inverse); }

/* ==========================================================================
   Utilities and responsive
   ========================================================================== */

.tpl-hide-sm, .lib-hide-sm, .ct-hide-sm { display: inline; }

@media (max-width: 1180px) {
  .tpld-grid { grid-template-columns: minmax(0, 1fr); }
  .tpl-row__stats { width: 200px; }
}
@media (max-width: 1040px) {
  .lib-layout, .ct-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .lib-rail, .ct-rail {
    position: static;
    flex-direction: row; align-items: flex-start; gap: var(--s-5);
    overflow-x: auto; padding-bottom: var(--s-4); scrollbar-width: none;
  }
  .lib-rail::-webkit-scrollbar, .ct-rail::-webkit-scrollbar { display: none; }
  .lib-rail__group, .ct-rail__group { flex-direction: row; gap: var(--s-3); flex: none; }
  .lib-rail__label, .ct-rail__label { display: none; }
  .lib-railitem, .ct-railitem {
    flex: none; white-space: nowrap;
    border: 1px solid var(--br-1); padding: var(--s-4) var(--s-6);
  }
  .lib-rail__note, .ct-rail__note { display: none; }
  .lib-tagcloud { flex-wrap: nowrap; }
}
@media (max-width: 900px) {
  .tpl-row { flex-wrap: wrap; row-gap: var(--s-5); }
  .tpl-row__stats { width: auto; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: var(--s-6); }
  .tpl-row__acts { margin-left: auto; }
  .lib-row__usage { display: none; }
  .ct-table .ct-td-groups, .ct-table thead th:nth-child(4) { display: none; }
  .tpld-stage__rail, .tpl-prev__rail, .lib-prev__rail { display: none; }
}
@media (max-width: 760px) {
  .tpl-hide-sm, .lib-hide-sm, .ct-hide-sm { display: none; }
  .tpl-toolbar .searchbox, .lib-toolbar .searchbox, .ct-toolbar .searchbox { width: 100% !important; }
  .tpl-toolbar .spacer, .lib-toolbar .spacer, .ct-toolbar .spacer { display: none; }
  .tpl-userow__inputs { grid-template-columns: minmax(0, 1fr); }
  .ct-form2 { grid-template-columns: minmax(0, 1fr); }
  .ct-drawer__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpld-stage { height: clamp(320px, 60vh, 620px); }

  .ct-bulk {
    left: 0; right: 0; bottom: 0; max-width: none;
    border-radius: var(--r-16) var(--r-16) 0 0;
    flex-direction: column; align-items: stretch; gap: var(--s-5);
    padding: var(--s-6) var(--s-7);
    padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
    transform: translate(0, 130%);
  }
  .ct-bulk.is-in { transform: translate(0, 0); }
  .ct-bulk__count { text-align: center; }
  .ct-bulk__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); overflow: visible; }
  .ct-bulk__actions .btn { width: 100%; }
}
@media (max-width: 560px) {
  .tpl-grid, .lib-grid { grid-template-columns: minmax(0, 1fr); }
  .tpl-card__foot, .lib-card__foot { flex-wrap: wrap; }
  .tpl-row { padding: var(--s-6); }
  .tpl-row__thumb { display: none; }
  .lib-row { flex-wrap: wrap; row-gap: var(--s-5); padding: var(--s-6); }
  .lib-row__acts { width: 100%; }
  .lib-row__acts .btn { flex: 1 1 auto; }
  .tpld-actions .btn { flex: 1 1 auto; }
  .tpld-doc { padding: var(--s-6); gap: var(--s-5); }
  .ct-drawer__top { gap: var(--s-6); }
  .ct-bulk__actions { grid-template-columns: repeat(2, 1fr); }
  .tpl-newrole { flex-wrap: wrap; }
  .tpl-newrole .select { width: 100%; }
}