/*
 * Tesseract Talks brand theme for the Wagtail admin.
 * Colours and fonts come from the website (tesseract-talk-fe):
 *   brand #14396f, brand-bright #266dd5, navy-950 #08152b, gradient 135deg brand -> bright,
 *   body font Inter, headings Manrope.
 */

/* ---------------------------------------------------------------- palette */
:root {
  /* Wagtail "primary": sidebar and dark furniture -> website navy */
  --w-color-primary-hue: 215.6;
  --w-color-primary-saturation: 69.5%;
  --w-color-primary-lightness: 25.7%;

  /* Wagtail "secondary": buttons and links -> website bright blue */
  --w-color-secondary-hue: 215.7;
  --w-color-secondary-saturation: 69.7%;
  --w-color-secondary-lightness: 49.2%;

  --w-color-focus: #266dd5;
  --w-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --w-login-fullscreen-background: linear-gradient(135deg, #08152b 0%, #14396f 55%, #266dd5 100%);

  --tt-brand: #14396f;
  --tt-brand-bright: #266dd5;
  --tt-navy: #08152b;
  --tt-gradient: linear-gradient(135deg, #14396f 0%, #266dd5 100%);
  --tt-card: #ffffff;
  --tt-card-border: #e2e8f0;
  --tt-card-shadow: 0 1px 2px rgb(8 21 43 / 6%), 0 8px 24px rgb(8 21 43 / 6%);
  --tt-soft: #eef4fd;
  --tt-heading-font: "Manrope", "Inter", sans-serif;
}

/* Dark theme: Wagtail's neutral greys become the website's navy shades. */
.w-theme-dark {
  --w-color-grey-800-hue: 217.7; --w-color-grey-800-saturation: 68.6%; --w-color-grey-800-lightness: 10%;
  --w-color-grey-700-hue: 216.6; --w-color-grey-700-saturation: 65.1%; --w-color-grey-700-lightness: 12.4%;
  --w-color-grey-600-hue: 216;   --w-color-grey-600-saturation: 64.1%; --w-color-grey-600-lightness: 15.3%;
  --w-color-grey-500-hue: 216;   --w-color-grey-500-saturation: 50.8%; --w-color-grey-500-lightness: 23.1%;
  --w-color-grey-400-hue: 215.8; --w-color-grey-400-saturation: 34.8%; --w-color-grey-400-lightness: 34.9%;
  /* Text greys are derived from grey-800; keep them near-white with only a slight navy tint. */
  --w-color-grey-50-hue: 216;  --w-color-grey-50-saturation: 30%;
  --w-color-grey-100-saturation: 16%; --w-color-grey-150-saturation: 14%;
  --w-color-grey-200-saturation: 12%;
  --w-color-surface-menu-item-active: #14396f;
  --tt-card: #112848;
  --tt-card-border: #1d3559;
  --tt-card-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  --tt-soft: #16305a;
}

@media (prefers-color-scheme: dark) {
  .w-theme-system {
    --w-color-grey-800-hue: 217.7; --w-color-grey-800-saturation: 68.6%; --w-color-grey-800-lightness: 10%;
    --w-color-grey-700-hue: 216.6; --w-color-grey-700-saturation: 65.1%; --w-color-grey-700-lightness: 12.4%;
    --w-color-grey-600-hue: 216;   --w-color-grey-600-saturation: 64.1%; --w-color-grey-600-lightness: 15.3%;
    --w-color-grey-500-hue: 216;   --w-color-grey-500-saturation: 50.8%; --w-color-grey-500-lightness: 23.1%;
    --w-color-grey-400-hue: 215.8; --w-color-grey-400-saturation: 34.8%; --w-color-grey-400-lightness: 34.9%;
  /* Text greys are derived from grey-800; keep them near-white with only a slight navy tint. */
  --w-color-grey-50-hue: 216;  --w-color-grey-50-saturation: 30%;
  --w-color-grey-100-saturation: 16%; --w-color-grey-150-saturation: 14%;
  --w-color-grey-200-saturation: 12%;
    --w-color-surface-menu-item-active: #14396f;
    --tt-card: #112848;
    --tt-card-border: #1d3559;
    --tt-card-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
    --tt-soft: #16305a;
  }
}

/* ---------------------------------------------------------------- furniture */
h1, h2, h3, .w-h1, .w-h2, .w-h3, .w-header__title {
  font-family: var(--tt-heading-font);
  letter-spacing: -0.01em;
}

/* Sidebar: the website footer's navy gradient */
.sidebar__inner,
.sidebar-loading {
  background: linear-gradient(180deg, #14396f 0%, #0b2147 55%, #08152b 100%);
}

.sidebar-custom-branding img {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 16px rgb(38 109 213 / 45%));
}
.sidebar--slim .sidebar-custom-branding img { width: 36px; }

/* Buttons: same gradient as the website's call-to-action buttons */
.button:not(.button-secondary):not(.no):not(.serious):not(.button--icon):not(.text-replace) {
  background-image: var(--tt-gradient);
  border-color: transparent;
}
.button:not(.button-secondary):not(.no):not(.serious):not(.button--icon):not(.text-replace):hover {
  background-image: linear-gradient(135deg, #0f2d58 0%, #1f5fc0 100%);
}

/* ---------------------------------------------------------------- login */
.login { min-height: 100vh; }
.login .content-wrapper { border-radius: 16px; }
.tt-login-logo { display: block; width: 72px; height: auto; margin: 0 auto 1rem; }

/* ---------------------------------------------------------------- dashboard */
.tt-dashboard { padding-block: 2rem 3rem; }
.tt-dashboard a { text-decoration: none; }

.tt-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2.25rem;
  border-radius: 18px;
  background: var(--tt-gradient);
  color: #fff;
  box-shadow: 0 18px 40px rgb(20 57 111 / 25%);
}
.tt-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgb(255 255 255 / 18%) 0%, transparent 65%);
  pointer-events: none;
}
.tt-hero__mark { width: 56px; height: auto; flex: none; }
.tt-hero__text { flex: 1 1 320px; }
.tt-hero__eyebrow {
  margin: 0 0 .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
}
.tt-hero__title { margin: 0; font-size: 1.85rem; line-height: 1.2; color: #fff; }
.tt-hero__subtitle { margin: .5rem 0 0; opacity: .85; }
.tt-hero__actions { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
.tt-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 25%);
  transition: background .15s ease, transform .15s ease;
}
.tt-chip:hover { background: rgb(255 255 255 / 24%); color: #fff; transform: translateY(-1px); }
.tt-chip--solid { background: #fff; color: var(--tt-brand); border-color: #fff; }
.tt-chip--solid:hover { background: #eef4fd; color: var(--tt-brand); }
.tt-chip .icon { width: 1rem; height: 1rem; }

.tt-section-title {
  margin: 2.25rem 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--w-color-text-context);
}

.tt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.tt-stat {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 1.35rem;
  border-radius: 16px;
  background: var(--tt-card);
  border: 1px solid var(--tt-card-border);
  box-shadow: var(--tt-card-shadow);
  color: var(--w-color-text-context);
  transition: transform .15s ease, border-color .15s ease;
}
a.tt-stat:hover { transform: translateY(-2px); border-color: var(--tt-brand-bright); color: var(--w-color-text-context); }
.tt-stat__top { display: flex; align-items: center; justify-content: space-between; }
.tt-stat__label { font-size: .875rem; font-weight: 600; color: var(--w-color-text-meta); }
.tt-stat__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--tt-gradient);
  color: #fff;
}
.tt-stat__icon .icon { width: 1.15rem; height: 1.15rem; }
.tt-stat__value {
  font-family: var(--tt-heading-font);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--w-color-text-context);
}
.tt-stat__detail { font-size: .8125rem; color: var(--w-color-text-meta); }

.tt-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.tt-card {
  border-radius: 16px;
  background: var(--tt-card);
  border: 1px solid var(--tt-card-border);
  box-shadow: var(--tt-card-shadow);
  overflow: hidden;
}
.tt-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--tt-card-border);
}
.tt-card__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--w-color-text-context); }
.tt-card__link { font-size: .8125rem; font-weight: 600; color: var(--w-color-text-link-default); }
.tt-card__empty { margin: 0; padding: 1.5rem 1.35rem; color: var(--w-color-text-meta); }

.tt-list { list-style: none; margin: 0; padding: 0; }
.tt-list li + li { border-top: 1px solid var(--tt-card-border); }
.tt-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.35rem;
  color: var(--w-color-text-context);
}
a.tt-row:hover { background: var(--tt-soft); color: var(--w-color-text-context); }
.tt-row__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--tt-soft);
  color: var(--tt-brand-bright);
  font-weight: 700;
  font-size: .875rem;
}
.tt-row__main { flex: 1; min-width: 0; }
.tt-row__title {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-row__meta {
  display: block;
  font-size: .8125rem;
  color: var(--w-color-text-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-row__side { flex: none; font-size: .75rem; color: var(--w-color-text-meta); text-align: end; }

.tt-status {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tt-status--live { background: #dcfce7; color: #166534; }
.tt-status--draft { background: #fef3c7; color: #92400e; }
.tt-status--changes { background: #dbeafe; color: #1e40af; }

/* Wagtail's own panels (recent edits, locked pages...) under ours */
.tt-dashboard .w-panel,
.tt-dashboard section.w-mb-12 { margin-top: 2rem; }

@media (max-width: 50em) {
  .tt-hero { padding: 1.5rem; }
  .tt-hero__title { font-size: 1.5rem; }
  .tt-columns { grid-template-columns: 1fr; }
}

/* ---- Pages > Add new page: template cards */
.tt-templates__intro { margin: 8px 0 20px; color: var(--w-color-text-meta); }
.tt-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; max-width: 1100px; }
.tt-template {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 14px;
  border: 1px solid var(--w-color-border-furniture); background: var(--w-color-surface-page);
  color: var(--w-color-text-context); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tt-template:hover, .tt-template:focus-visible {
  border-color: var(--w-color-secondary); box-shadow: 0 8px 24px rgba(13, 35, 82, .12); transform: translateY(-2px);
  color: var(--w-color-text-context);
}
.tt-template__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--w-color-secondary); color: #fff;
}
.tt-template__icon .icon { width: 22px; height: 22px; }
.tt-template__label { font-size: 1.25rem; font-weight: 700; }
.tt-template__description { color: var(--w-color-text-meta); line-height: 1.5; flex: 1; }
.tt-template__action { font-weight: 600; color: var(--w-color-text-link-default); }

/* ---- Site settings > Social links: platform icon picker */
.tt-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tt-icon-option {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border: 1px solid var(--w-color-border-field-default); border-radius: 10px;
  cursor: pointer; text-align: center; font-size: 0.8rem; line-height: 1.2;
}
.tt-icon-option i { font-size: 22px; }
.tt-icon-option input { position: absolute; opacity: 0; pointer-events: none; }
.tt-icon-option:hover { border-color: var(--w-color-secondary); }
.tt-icon-option:has(input:checked) {
  border-color: var(--w-color-secondary); background: var(--w-color-secondary); color: #fff;
}
.tt-icon-option:has(input:focus-visible) { outline: 2px solid var(--w-color-focus); outline-offset: 2px; }

/* ---- Editor side panels: no Status ("i") panel and no Checks (content metrics) panel.
   Wagtail has no setting to turn them off, so their buttons and panels are hidden.
   Publishing, scheduling and unpublishing stay in the Save/Publish menu at the bottom. */
[data-side-panel-toggle="status"],
[data-side-panel-toggle="checks"],
.form-side__panel[data-side-panel="status"],
.form-side__panel[data-side-panel="checks"] {
  display: none !important;
}

/* ---- Sidebar: no Search box (each dashboard has its own search) */
#wagtail-sidebar form[role="search"] { display: none !important; }

/* ---- Header breadcrumbs always shown in full (core/breadcrumbs.js keeps them open) */
[data-w-breadcrumbs-target="toggle"] { display: none !important; }
.w-breadcrumbs[data-controller="w-breadcrumbs"] { padding-inline-start: .75rem; }

/* ---- Link fields: searchable dropdown of site links (core/site-links.js, Tom Select) */
.ts-wrapper.tt-site-link { width: 100%; }
.ts-wrapper.tt-site-link .ts-control {
  min-height: 2.75rem; padding: 0.5rem 2.5rem 0.5rem 1rem; border-radius: 6px;
  border: 1px solid var(--w-color-border-field-default); background: var(--w-color-surface-field);
  color: var(--w-color-text-context); font-size: 1rem; box-shadow: none;
}
.ts-wrapper.tt-site-link.focus .ts-control { border-color: var(--w-color-focus); box-shadow: 0 0 0 1px var(--w-color-focus); }
.ts-wrapper.tt-site-link .ts-control input { color: var(--w-color-text-context); font-size: 1rem; }
.ts-wrapper.tt-site-link .ts-control input::placeholder { color: var(--w-color-text-placeholder); }
.ts-wrapper.tt-site-link .ts-dropdown {
  border: 1px solid var(--w-color-border-field-default); border-radius: 6px; margin-top: 4px;
  background: var(--w-color-surface-page); color: var(--w-color-text-context); z-index: 50;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.ts-wrapper.tt-site-link .ts-dropdown-content { max-height: 320px; }
.ts-wrapper.tt-site-link .optgroup-header {
  padding: 8px 12px 4px; background: transparent; color: var(--w-color-text-meta);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.ts-wrapper.tt-site-link .option { padding: 8px 12px; }
.ts-wrapper.tt-site-link .option.active { background: var(--w-color-secondary); color: #fff; }
.ts-wrapper.tt-site-link .option.active .tt-site-link__path { color: rgba(255, 255, 255, .8); }
.tt-site-link__option { display: flex; justify-content: space-between; gap: 12px; }
.tt-site-link__path { color: var(--w-color-text-meta); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-wrapper.tt-site-link.single.input-active .ts-control,
.ts-wrapper.tt-site-link.single .ts-control { background: var(--w-color-surface-field); cursor: text; }
.ts-wrapper.tt-site-link .ts-dropdown .create,
.ts-wrapper.tt-site-link .ts-dropdown .no-results { padding: 8px 12px; color: var(--w-color-text-context); }
.ts-wrapper.tt-site-link .ts-dropdown .create.active { background: var(--w-color-secondary); color: #fff; }

/* ---- Rich text "Link" dialog (core/tinymce-wagtail.js), WordPress style */
.tt-link-dialog {
  width: min(560px, calc(100vw - 2rem)); padding: 0; overflow: visible;
  border: 1px solid var(--w-color-border-furniture); border-radius: 12px;
  background: var(--w-color-surface-page); color: var(--w-color-text-context);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.tt-link-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.tt-link-dialog__form { display: grid; gap: .4rem; padding: 1.5rem; }
.tt-link-dialog__title { margin: 0 0 .75rem; font-size: 1.25rem; }
.tt-link-dialog__label { font-weight: 600; margin-top: .5rem; }
.tt-link-dialog__help { margin: 0; color: var(--w-color-text-meta); font-size: .85rem; }
.tt-link-dialog__error { margin: 0; color: var(--w-color-critical-200); font-weight: 600; }
.tt-link-dialog__text {
  width: 100%; min-height: 2.75rem; padding: .5rem 1rem; border-radius: 6px; font-size: 1rem;
  border: 1px solid var(--w-color-border-field-default); background: var(--w-color-surface-field);
  color: var(--w-color-text-context);
}
.tt-link-dialog__text:focus { outline: none; border-color: var(--w-color-focus); box-shadow: 0 0 0 1px var(--w-color-focus); }
.tt-link-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.tt-link-dialog__spacer { flex: 1; }
.tt-link-dialog .ts-dropdown-content { max-height: 260px; }

/* ---- Widgets: usage report and the defaults note in a page's Widgets tab */
.tt-usage__title { font-size: 1.25rem; margin: 8px 0 6px; }
.tt-usage__help { color: var(--w-color-text-meta); margin: 0 0 16px; }
.tt-usage__areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 32px; }
.tt-usage--compact .tt-usage__areas { margin-bottom: 8px; }
.tt-usage__area { padding: 14px 16px; border: 1px solid var(--w-color-border-furniture); border-radius: 10px; }
.tt-usage__area ul { margin: 8px 0; padding-left: 18px; }
.tt-usage__count { font-size: 0.85rem; color: var(--w-color-text-meta); }
.tt-usage__none { color: var(--w-color-text-meta); }
.tt-usage__table td, .tt-usage__table th { vertical-align: top; }
.tt-usage__group th { padding-top: 20px; font-size: 0.8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--w-color-text-meta); }
.tt-usage__tag {
  display: inline-block; margin: 0 4px 0 0; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--w-color-border-furniture); color: var(--w-color-text-meta);
}
.tt-usage__tag--own { background: var(--w-color-secondary); border-color: transparent; color: #fff; }
.tt-usage__tag--default { border-color: var(--w-color-secondary); color: var(--w-color-text-link-default); }

/* ---- Dashboards: Pages / Articles / Episodes / Widgets (core/dashboards.py) */
.tt-board { padding-top: 1.5rem; }
.tt-board .tt-stats { margin-bottom: 1.5rem; }
.tt-board__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tt-board .tt-chip { border-color: var(--w-color-border-field-default); color: var(--w-color-text-context); }
.tt-board .tt-chip--solid { background: var(--w-color-secondary); border-color: var(--w-color-secondary); color: #fff; }
.tt-board .tt-section-title { margin: 1.5rem 0 .75rem; }
.tt-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tt-pill {
  display: inline-flex; gap: .5rem; align-items: center; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--w-color-border-furniture); color: var(--w-color-text-context); text-decoration: none;
}
.tt-pill strong { color: var(--w-color-text-link-default); }
a.tt-pill:hover { border-color: var(--w-color-secondary); }
.tt-pill--empty { color: var(--w-color-text-meta); }
.tt-tabs { display: flex; gap: .25rem; margin: 1rem 0; border-bottom: 1px solid var(--w-color-border-furniture); }
.tt-tab { padding: .6rem 1rem; color: var(--w-color-text-meta); text-decoration: none; border-bottom: 3px solid transparent; }
.tt-tab--active { color: var(--w-color-text-context); border-bottom-color: var(--w-color-secondary); font-weight: 600; }
.tt-pager { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 2rem; color: var(--w-color-text-meta); }

/* ---- Page editor, WordPress style: canvas on the left, sticky sidebar on the right with
   two tabs, "SEO & settings" and "Widgets" (core/editor_panels.py EditorLayout, editor-tabs.js) */
.tt-editor {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 460px); gap: 2rem;
  align-items: start;
  /* room on the left for the panels' collapse buttons, which sit outside the panel */
  padding-inline: 3rem 1.25rem;
}
.tt-editor .w-form-width,
.tt-editor__canvas .w-field__wrapper { max-width: none; }
.tt-editor__sidebar {
  position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; overflow-x: hidden;
  padding: 0 1.25rem 2rem; border-radius: 14px;
  border: 1px solid var(--w-color-border-furniture); background: var(--w-color-surface-page);
}
/* The tabs stay at the top of the sidebar while it scrolls */
.tt-sidetabs {
  position: sticky; top: 0; z-index: 5; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin: 0 -1.25rem 1rem; padding: .75rem .75rem 0; background: var(--w-color-surface-page);
  border-bottom: 1px solid var(--w-color-border-furniture);
}
.tt-sidetabs__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem .5rem; border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--w-color-text-meta); font-weight: 600; font-size: .95rem; cursor: pointer;
}
.tt-sidetabs__tab:hover { color: var(--w-color-text-context); }
.tt-sidetabs__tab[aria-selected="true"] { color: var(--w-color-text-context); border-bottom-color: var(--w-color-secondary); }
.tt-sidetabs__tab:focus-visible { outline: 2px solid var(--w-color-focus); outline-offset: -2px; }
.tt-sidetabs__icon { width: 1rem; height: 1rem; }
.tt-sidetabs__errors {
  min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; line-height: 1.25rem;
  background: var(--w-color-critical-200); color: #fff; font-size: .75rem;
}
.tt-sidetabs__pane[hidden] { display: none; }
/* Without tabs (no Widgets) the sidebar starts with its first section */
.tt-editor__sidebar > .tt-sidetabs__pane:first-child { padding-top: 1rem; }
.tt-editor__sidebar .w-panel { margin-bottom: 1.25rem; }
/* Wagtail pulls panel headers left so their collapse button sits outside the panel; in the
   sidebar that is outside the box (cut off), so the button goes inside, before the heading. */
.tt-editor__sidebar .w-panel__header { margin-bottom: .5rem; margin-inline-start: 0; gap: .5rem; }
.tt-editor__sidebar .w-panel__anchor { display: none; }
/* The "+" widget picker opens inside the sidebar: one column, as wide as the sidebar */
.tt-editor__sidebar .w-combobox-container {
  grid-template-columns: 1fr; width: min(360px, calc(100vw - 2rem)); max-width: min(360px, calc(100vw - 2rem));
}
.tt-editor__sidebar .w-combobox__optgroup { grid-template-columns: 1fr; grid-auto-flow: row; }
.tt-editor__sidebar .w-combobox__option-row--col1,
.tt-editor__sidebar .w-combobox__option-row--col2 { grid-column: 1; }
.tt-editor__sidebar .w-combobox__menu { max-height: min(420px, 60vh); }
/* Sidebar sections (SEO, Details, Contact form...) as WordPress-style boxes you open and close */
.tt-sidetabs__pane > .w-form-width > .w-panel,
.tt-sidetabs__pane > * > .w-panel { padding-bottom: .25rem; border-bottom: 1px solid var(--w-color-border-furniture); }
.tt-editor__sidebar .w-field__input input,
.tt-editor__sidebar .w-field__input textarea,
.tt-editor__sidebar .w-field__input select { font-size: .95rem; }
.tt-editor__sidebar .w-field--checkbox_select_multiple ul { max-height: 14rem; overflow-y: auto; }
.tt-editor__sidebar img { max-width: 100%; height: auto; }
/* Tablets and phones: the sidebar goes under the canvas, full width */
@media (max-width: 1100px) {
  .tt-editor { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .tt-editor__sidebar { position: static; max-height: none; overflow: visible; }
  .tt-sidetabs { position: static; }
}
@media (max-width: 800px) {
  .tt-editor { padding-inline: 1.75rem .75rem; }
  .tt-editor__sidebar { padding-inline: .9rem; border-radius: 10px; }
  .tt-sidetabs { margin-inline: -.9rem; padding-inline: .25rem; }
  .tt-sidetabs__tab { font-size: .9rem; }
}

/* ---- SEO box (core/seo.py, core/seo-panel.js) */
.tt-seo { display: grid; gap: 1rem; margin-bottom: 1rem; }
.tt-seo__head { display: flex; gap: 1rem; align-items: center; }
.tt-seo__score {
  flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  border: 6px solid currentColor; font-family: Manrope, Inter, sans-serif; line-height: 1;
}
.tt-seo__score span { font-size: 1.5rem; font-weight: 800; color: var(--w-color-text-context); }
.tt-seo__score small { font-size: .65rem; color: var(--w-color-text-meta); margin-top: -1.2rem; }
.tt-seo__score--good { color: #22c55e; }
.tt-seo__score--ok { color: #f59e0b; }
.tt-seo__score--bad { color: #ef4444; }
.tt-seo__summary { display: grid; gap: .15rem; font-size: .85rem; color: var(--w-color-text-meta); }
.tt-seo__summary strong { font-size: 1rem; color: var(--w-color-text-context); }
.tt-seo__serp {
  display: grid; gap: .2rem; padding: .85rem 1rem; border-radius: 10px; background: #fff;
  font-family: Arial, sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.tt-seo__serp-url { font-size: .75rem; color: #202124; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-seo__serp-title { font-size: 1.05rem; color: #1a0dab; line-height: 1.3; }
.tt-seo__serp-desc { font-size: .8rem; color: #4d5156; line-height: 1.45; }
.tt-seo__group { border: 1px solid var(--w-color-border-furniture); border-radius: 10px; padding: .5rem .75rem; }
.tt-seo__group + .tt-seo__group { margin-top: .5rem; }
.tt-seo__group summary { cursor: pointer; font-weight: 700; padding: .25rem 0; }
.tt-seo__group ul { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.tt-seo__check { position: relative; padding-left: 1.6rem; font-size: .85rem; line-height: 1.4; }
.tt-seo__check::before {
  position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 700;
}
.tt-seo__check--pass::before { content: "✓"; background: #22c55e; }
.tt-seo__check--fail::before { content: "✕"; background: #ef4444; }
.tt-seo__check small { display: block; color: var(--w-color-text-meta); }

.tt-seo-badge {
  display: inline-grid; place-items: center; min-width: 2.4rem; padding: .15rem .45rem; border-radius: 999px;
  font-weight: 700; font-size: .8rem; color: #fff;
}
.tt-seo-badge--good { background: #16a34a; }
.tt-seo-badge--ok { background: #d97706; }
.tt-seo-badge--bad { background: #dc2626; }

/* ---- Page editor: no minimap (the "Collapse all" list of sections on the right). */
[data-minimap-container],
.w-minimap { display: none !important; }

/* ---- Contact messages inbox (apps/inbox) */
.tt-inline-form { display: inline; margin: 0; }
.tt-board button.tt-chip { cursor: pointer; font: inherit; background: transparent; }
.tt-note {
  display: flex; gap: .5rem; align-items: center; padding: .75rem 1rem; border-radius: 10px; margin: 0 0 1.5rem;
  border: 1px solid var(--w-color-border-furniture);
}
.tt-note .icon { width: 1.1rem; height: 1.1rem; flex: none; }
.tt-note--ok { border-color: #16a34a; }
.tt-note--warn { border-color: #d97706; }
.tt-inbox__bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; }
.tt-inbox__bar .tt-tabs { flex: 1; }
.tt-inbox__search input { min-width: 260px; }
.tt-inbox__unread td { font-weight: 600; }
.tt-inbox__unread td:first-child { box-shadow: inset 4px 0 0 var(--w-color-secondary); }
.tt-message { max-width: 960px; }
.tt-message .tt-card { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.tt-message__head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tt-message__from { margin: 0 0 .25rem; font-size: 1.35rem; }
.tt-message__meta { text-align: right; color: var(--w-color-text-meta); font-size: .875rem; }
.tt-message__fields { display: grid; grid-template-columns: 140px 1fr; gap: .5rem 1rem; margin: 0; }
.tt-message__fields dt { font-weight: 700; color: var(--w-color-text-meta); }
.tt-message__fields dd { margin: 0; }
.tt-message__body { white-space: normal; line-height: 1.6; }
.tt-message__reply--failed { border-color: #dc2626; }
.tt-message__form { display: grid; gap: 1rem; }
.tt-message__form .button { justify-self: start; }

/* ---- Light / dark mode button at the top of the sidebar (core/theme-toggle.js) */
.tt-sidebar-top { justify-content: space-between !important; padding-left: 1rem; }
.tt-theme-toggle {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 25%); background: rgb(255 255 255 / 10%); color: #fff; cursor: pointer;
  transition: background .15s, transform .15s;
}
.tt-theme-toggle:hover { background: rgb(255 255 255 / 22%); transform: rotate(15deg); }
.tt-theme-toggle:focus-visible { outline: 2px solid var(--w-color-focus); outline-offset: 2px; }
.tt-theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Collapsed sidebar: the two buttons one above the other. */
.tt-sidebar-top:has(.sidebar__collapse-toggle[aria-expanded="false"]) {
  flex-direction: column; align-items: center !important; gap: .5rem; padding-left: 0;
}
.tt-sidebar-top:has(.sidebar__collapse-toggle[aria-expanded="false"]) .sidebar__collapse-toggle { margin-right: 0; }

/* ---- Live preview: when it is open it covers the whole editing area (Wagtail limits it to
   70% of the screen). Close it (the arrow at its top left) to get back to the editor. */
.form-side--preview.form-side--open {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}
.form-side--preview.form-side--open .form-side__resize-grip-container { display: none; }