/* ============================================================================
   ghoti.css — site-wide design system
   ----------------------------------------------------------------------------
   Loads on every page AFTER the active theme and BEFORE analytics.css, so it
   rejuvenates the whole app (overriding the dated theme skeleton) while the
   analytics dashboard keeps its own scoped styling. Palette + light/dark are
   harmonized with mod/analytics/analytics.css.
   ============================================================================ */

:root{
  color-scheme: light dark;

  /* surfaces */
  --bg:            #efeeea;
  --bg-tint:       radial-gradient(1100px 620px at 100% -12%, rgba(42,120,214,.07), transparent 60%);
  --surface:       #ffffff;
  --surface-2:     #f6f6f3;
  --surface-3:     #eceae4;

  /* text */
  --text:          #17160f;
  --text-2:        #52514b;
  --muted:         #8b887f;

  /* lines */
  --border:        rgba(17,16,12,.10);
  --border-strong: rgba(17,16,12,.17);

  /* accent (matches analytics --series-1) */
  --accent:        #2a78d6;
  --accent-2:      #1c5cab;
  --accent-soft:   rgba(42,120,214,.10);
  --on-accent:     #ffffff;

  --good:          #1f9d57;
  --bad:           #e0483f;

  --radius:        16px;
  --radius-sm:     10px;
  --radius-pill:   999px;

  --shadow-sm:     0 1px 2px rgba(16,24,40,.06);
  --shadow:        0 1px 2px rgba(16,24,40,.05), 0 16px 38px -18px rgba(16,24,40,.30);
  --shadow-lg:     0 34px 80px -28px rgba(16,24,40,.46);
  --ring:          0 0 0 3px rgba(42,120,214,.32);

  --font:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* centres content inside full-width header/footer bars */
  --gutter:        max(1.15rem, calc((100% - 1200px) / 2));
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:            #0b0b0c;
    --bg-tint:       radial-gradient(1100px 620px at 100% -12%, rgba(74,147,234,.12), transparent 60%);
    --surface:       #161619;
    --surface-2:     #1e1e22;
    --surface-3:     #26262b;

    --text:          #f4f4f2;
    --text-2:        #c8c6bd;
    --muted:         #908d85;

    --border:        rgba(255,255,255,.10);
    --border-strong: rgba(255,255,255,.17);

    --accent:        #4a93ea;
    --accent-2:      #83b6f3;
    --accent-soft:   rgba(74,147,234,.16);
    --on-accent:     #061220;

    --shadow-sm:     0 1px 2px rgba(0,0,0,.55);
    --shadow:        0 1px 2px rgba(0,0,0,.55), 0 20px 44px -20px rgba(0,0,0,.8);
    --shadow-lg:     0 44px 96px -32px rgba(0,0,0,.9);
    --ring:          0 0 0 3px rgba(74,147,234,.4);
  }
}

/* ===== Base ================================================================ */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body,
html > body{                       /* html > body beats prosimii's 9pt rule */
  margin: 0;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-tint);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection{ background: var(--accent-soft); color: var(--text); }

a{ color: var(--accent); text-decoration: none; padding: 0; }
a:hover{ color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }

img{ max-width: 100%; }

h1,h2,h3,h4,h5,h6{ line-height: 1.2; letter-spacing: -.012em; color: var(--text); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 8px;
}

/* thin, quiet scrollbars */
*{ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: var(--border-strong); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background: var(--muted); background-clip: padding-box; }

/* ===== Header ============================================================== */
#header{
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.superHeader{
  background: transparent;
  color: var(--muted);
  text-align: right;
  padding: .45rem var(--gutter);
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.superHeader span{
  color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; font-size: .72rem;
}

#ghotiLogin{ display: inline-block; }
#ghotiLogin ul{ margin: 0; padding: 0; list-style: none; display: inline-flex; gap: .4rem; }
#ghotiLogin li{ display: inline-flex; margin: 0; }
#ghotiLogin a{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .85rem; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-2);
  font-weight: 600; font-size: .84rem; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
#ghotiLogin a:hover{ background: var(--accent); color: var(--on-accent); text-decoration: none; }

.midHeader{
  background: transparent;
  color: var(--text);
  padding: .9rem var(--gutter);
  display: flex; align-items: center; gap: 1rem;
}
.midHeader img{ height: 52px; width: auto; display: block; }
.headerSubTitle{ color: var(--muted); font-style: normal; font-weight: 400; font-size: .95rem; margin: 0; }
.headerLinks{ position: static; margin-left: auto; padding: 0; }

.subHeader{
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .5rem var(--gutter);
  color: var(--text);
}

/* ===== Primary page navigation (pills) ==================================== */
#ghotiPageMenu ul{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
#ghotiPageMenu li{ display: inline-flex; margin: 0; }
#ghotiPageMenu a,
.subHeader a{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; border-radius: var(--radius-pill);
  color: var(--text-2); font-weight: 600; font-size: .9rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
#ghotiPageMenu a:hover,
.subHeader a:hover{ background: var(--surface-3); color: var(--text); text-decoration: none; }
#ghotiPageMenu a i{ display: none; }   /* FontAwesome isn't loaded */

/* ===== Layout ============================================================== */
#main-copy{
  max-width: 1200px;
  margin: 1.6rem auto 0;
  padding: 0 1.15rem 2rem;
  clear: left;
}
.rowOfBoxes{
  clear: both; border: 0;
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin: 0 0 1.25rem;
}
.rowOfBoxes.dividingBorderAbove{ border-top: 0; margin-top: .25rem; }
.rowOfBoxes > div:empty{ display: none; }   /* drop the empty prosimii spacer column */

/* turn the old float columns into flex children */
.quarter, .oneThird, .half, .twoThirds, .fullWidth{
  float: none; border-left: 0; margin: 0; padding: 0; min-width: 0; width: auto;
}
.twoThirds{ flex: 1 1 60%; text-align: left; }
.oneThird{ flex: 1 1 262px; }
.quarter{ flex: 1 1 220px; }

/* ===== Main content card =================================================== */
#pageFeedback{ display: block; color: var(--accent-2); font-weight: 600; }

#ghotiContent{
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.85rem 2.1rem 4.85rem;
  min-height: 320px;
  overflow-wrap: anywhere;
  container-type: inline-size; /* lets admin panels react to the panel's own
                                   rendered width (it sits beside a sidebar),
                                   not just the viewport - see the container
                                   queries alongside the width media queries
                                   further down. */
}
#ghotiContent h1{ font-size: 1.95rem; font-weight: 750; margin: .2rem 0 .8rem; color: var(--text); }
#ghotiContent h2{ font-size: 1.4rem; font-weight: 700; margin: 1.5rem 0 .6rem; color: var(--text); }
#ghotiContent h3{ font-size: 1.15rem; font-weight: 700; margin: 1.2rem 0 .5rem; color: var(--text); }
#ghotiContent h4, #ghotiContent h5, #ghotiContent h6{ color: var(--text); margin: 1rem 0 .4rem; }
#ghotiContent p{ margin: 0 0 1rem; color: var(--text-2); line-height: 1.75; }
#ghotiContent ul, #ghotiContent ol{ margin: 0 0 1rem 1.3rem; padding: 0; }
#ghotiContent li{ margin: .35rem 0; line-height: 1.6; }
#ghotiContent img{ border-radius: var(--radius-sm); height: auto; }
#ghotiContent hr{ border: 0; border-top: 1px solid var(--border); margin: 1.6rem 0; }
#ghotiContent blockquote{
  margin: 1rem 0; padding: .65rem 1.1rem;
  border-left: 3px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-2);
}
#ghotiContent code{ font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: .1em .35em; border-radius: 6px; }
#ghotiContent pre{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; overflow: auto; font-size: .82rem; }
#ghotiContent pre code{ background: none; padding: 0; }
#ghotiContent table{ border-collapse: collapse; width: 100%; margin: 1rem 0; }
#ghotiContent th, #ghotiContent td{ border: 1px solid var(--border); padding: .55rem .7rem; text-align: left; }
#ghotiContent th{ background: var(--surface-2); font-weight: 600; }
#ghotiContent tr:hover td{ background: var(--surface-2); }
#ghotiPageDisplay{ display: block; }

/* ===== Sidebar (private / admin menus, theme changer) ===================== */
#main-copy .oneThird h1{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 700; margin: .3rem .3rem .4rem;
}
#ghotiPrivateMenu, #ghotiAdminMenu{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: .4rem; margin: 0 0 1.1rem;
}
#ghotiPrivateMenu ul, #ghotiAdminMenu ul{ list-style: none; margin: 0; padding: 0; }
#ghotiPrivateMenu li, #ghotiAdminMenu li{ margin: 0; }
#ghotiPrivateMenu a, #ghotiAdminMenu a{
  display: block; padding: .5rem .7rem; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 500; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
#ghotiPrivateMenu a:hover, #ghotiAdminMenu a:hover{
  background: var(--accent-soft); color: var(--accent-2); text-decoration: none;
}

#changeTheme{
  margin: .45rem 0 0;
  display: inline-flex;
  max-width: 100%;
}
#changeTheme p{
  margin: 0;
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
#changeTheme p::after{
  content: "";
  position: absolute;
  right: .85rem;
  top: 50%;
  width: .48rem;
  height: .48rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}
#changeTheme select{
  min-width: 10.75rem;
  width: 100%;
  padding: .56rem 2.25rem .56rem .85rem;
  border-radius: 8px;
  border-color: var(--border-strong);
  background-color: var(--surface);
  color: var(--text);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.25;
  box-shadow: var(--shadow-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#changeTheme select:hover{
  border-color: var(--accent);
  background-color: var(--surface-2);
}
#changeTheme select:focus{
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ===== Feature cards (banners / standards / links row) ==================== */
.rowOfBoxes.dividingBorderAbove .quarter{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.25rem;
}
#main-copy .quarter h1{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 700; margin: 0 0 .7rem;
}
.ghotiBanner, #footer img{ border: 0; border-radius: var(--radius-sm); height: auto; }

/* Ad slots. The size is Google's to decide, so this only reserves the width and
   keeps the "Advertisement" caption legible and clearly separate from content. */
.ghotiAdSlot{ margin: .6rem 0; max-width: 100%; overflow: hidden; }
.ghotiAdSlot ins.adsbygoogle{ display: block; width: 100%; }
.ghotiAdSlotSmall{ max-width: 336px; }
.ghotiAdLabel{
  display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin-bottom: .25rem;
}
.ghotiHint{ font-size: .86rem; color: var(--muted); margin: .5rem 0; }
.ghotiHint code{ word-break: break-all; }

#ghotiLinks ul, #ghotiLinksList{ list-style: none; margin: 0; padding: 0; }
#ghotiLinks li{ margin: 0; }
#ghotiLinks li a{
  display: block; padding: .38rem .55rem; border-radius: var(--radius-sm);
  color: var(--text-2); text-decoration: none; font-size: .92rem;
  transition: background .12s ease, color .12s ease;
}
#ghotiLinks li a:hover{ background: var(--accent-soft); color: var(--accent-2); text-decoration: none; }

/* ===== Footer ============================================================== */
#footer{
  color: var(--muted); background: transparent;
  border-top: 1px solid var(--border);
  text-align: center; font-size: .85rem; line-height: 1.6;
  margin: 2.5rem 0 0; padding: 1.6rem var(--gutter); clear: left;
}
#footer a{ color: var(--accent); text-decoration: none; }
#footer a:hover{ text-decoration: underline; }

/* ===== Forms & buttons ===================================================== */
form, fieldset,
.ghotiForm, .ghotiFormGrid, .ghotiField, .ghotiCrudRow{
  min-width: 0;
  max-width: 100%;
}
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=url], select, textarea{
  font: inherit; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  min-width: 0;
  max-width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
select{ cursor: pointer; }
textarea{ line-height: 1.6; resize: vertical; }
label{ color: var(--text-2); font-size: .92rem; }
input[type=checkbox]{ width: 16px; height: 16px; accent-color: var(--accent); vertical-align: middle; }

.ghotiAdminPanel{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ghotiCrudHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  flex-wrap: wrap;
}
.ghotiCrudHeader h1{ margin: 0; }
.ghotiForm{
  display: flex;
  flex-direction: column;
  gap: .95rem;
}
.ghotiForm p{ margin: 0; }
.ghotiFormGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: .85rem;
  align-items: end;
}
.ghotiFormGrid > *{ min-width: 0; }
.ghotiField{
  display: flex;
  flex-direction: column;
  gap: .32rem;
  color: var(--text-2);
  font-size: .9rem;
  font-weight: 650;
}
.ghotiField > span{
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ghotiField input,
.ghotiField select,
.ghotiField textarea{ width: 100%; }
.ghotiPasswordInput{
  display: flex;
  width: 100%;
  align-items: stretch;
}
.ghotiPasswordInput input{
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ghotiPasswordToggle{
  flex: 0 0 auto;
  width: 2.15rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .78rem;
  opacity: .65;
  cursor: pointer;
}
.ghotiPasswordToggle:hover,
.ghotiPasswordToggle:focus-visible{ background: var(--surface-3); color: var(--text); opacity: 1; }
.ghotiPasswordToggle:focus-visible{ outline: none; box-shadow: var(--ring); }
.ghotiFieldWide{ grid-column: span 2; }
.ghotiFormActions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  flex-wrap: wrap;
}
.ghotiFormActions > *{ min-width: 0; max-width: 100%; }
.ghotiInlineChoice{
  display: inline-flex;
  align-items: flex-start;
  gap: .5rem;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-weight: 600;
}
/* ---------------------------------------------------------------------------
   Site Settings
   Tabs keep each concern together while all fields remain in the same form.
   --------------------------------------------------------------------------- */
#ghotiSiteSettings .siteSettingsTabs{
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  max-width: 100%;
  padding: .25rem .15rem .7rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
#ghotiSiteSettings .siteSettingsTabs [role="tab"]{
  flex: 0 0 auto;
  white-space: nowrap;
}
#ghotiSiteSettings .siteSettingsTabs [aria-selected="true"]{
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
#ghotiSiteSettings .siteSettingsTabs [role="tab"]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#ghotiSiteSettings .siteSettingsPanel[hidden]{ display: none !important; }
#ghotiSiteSettings .siteSettingsGrid{ display: block; }
#ghotiSiteSettings .siteSettingsPanel{ min-width: 0; }
#ghotiSiteSettings .siteSettingsSection{
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 0;
  padding: 1.15rem 1.2rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
#ghotiSiteSettings .siteSettingsSection legend{
  padding: 0 .4rem;
  margin-left: -.4rem;
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
/* Full width: Identity holds site and public operator fields, while Optional modules holds
   a docs panel. Both look cramped in half a column. */
#ghotiSiteSettings .siteSettingsSectionWide{
  grid-column: span 2;
}
#ghotiSiteSettings .siteSettingsSectionIntro{
  margin: -.25rem 0 .15rem;
  color: var(--text-2);
  font-size: .9rem;
}
#ghotiSiteSettings .siteSettingsChoices{
  display: grid;
  gap: .55rem;
}
/* Help text closes a section: push it to the bottom so cards in the same row
   line their bodies up regardless of how much help each one carries. */
#ghotiSiteSettings .siteSettingsSection .ghotiHelpText{
  margin: 0;
  margin-top: auto;
  padding-top: .15rem;
  font-size: .85rem;
}
#ghotiSiteSettings .siteSettingsSection .ghotiDocs{
  margin-top: .35rem;
}
.securityAutoControls{ margin-top: -.15rem; }
.securityRuleGrid{ align-items: start; }
.securityRuleGrid textarea{
  min-height: 8.25rem;
  font-family: var(--mono);
  font-size: .82rem;
}
.securitySessionGrid{ max-width: 22rem; }
.securityBlockList{
  display: grid;
  gap: .55rem;
  margin-top: .2rem;
  padding: .85rem;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.securityBlockListHeader,
.securityBlockList li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.securityBlockListHeader strong{ font-size: .82rem; }
.securityBlockListHeader span{ color: var(--muted); font-size: .72rem; }
.securityBlockList ul{ display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.securityBlockList li{ padding-top: .5rem; border-top: 1px solid var(--border); }
.securityBlockList li > div{ display: grid; min-width: 0; }
.securityBlockList code{ overflow-wrap: anywhere; }
.securityBlockList small{ color: var(--muted); font-size: .7rem; }
.securityBlockList .ghotiEmptyState,
.securityBlockList .ghotiHelpText{ margin: 0 !important; padding: 0 !important; }
/* Send Email: the pick-your-recipients list, and the live preview of the
   themed message. The preview intentionally carries its own inline colours
   (from the mail palette) so it shows what the recipient will see rather than
   what this workspace looks like. */
.composeMailUserList{
  display: grid;
  gap: .4rem;
  margin-top: .5rem;
  padding: .85rem;
  max-height: 18rem;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.composeMailUserList[hidden]{ display: none; }
.composeMailUserList ul{ display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.composeMailUserList li{ min-width: 0; }
.composeMailUserList small{ color: var(--muted); font-size: .7rem; margin-left: .35rem; overflow-wrap: anywhere; }
.composeMailUserList input:disabled + *,
.composeMailUserList label:has(input:disabled){ opacity: .55; }
.composeMailPreview{ margin: .4rem 0 1rem; }
.composeMailPreview *{ max-width: 100%; }
/* A field that only matters when the checkbox above it is ticked. Indented and
   rule-marked so the dependency is visible rather than implied by proximity;
   dimmed (never hidden) while inactive, so the saved value stays readable. */
#ghotiSiteSettings .settingsDependent{
  margin-left: .15rem;
  padding-left: .85rem;
  border-left: 2px solid var(--border-strong);
}
#ghotiSiteSettings .settingsDependent[data-inactive="true"]{
  opacity: .55;
}
#ghotiSiteSettings .ghotiCrudHeader{
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
#ghotiSiteSettings .ghotiCrudHeader h1{ margin: 0 0 .2rem; }
#ghotiSiteSettings .ghotiCrudHeader .ghotiHelpText{ margin: 0; max-width: 54ch; }
/* Second Save at the end of a long form, so it is reachable from either end. */
#ghotiSiteSettings .siteSettingsFooterActions{
  align-items: center;
  gap: .9rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
#ghotiSiteSettings .siteSettingsFooterActions .ghotiHelpText{ margin: 0; }
/* Two cards side by side need roughly 320px each before the fields inside them
   start wrapping awkwardly; below that the grid goes to one column. This sits
   above the 520px block, which handles the field grids inside each card. */
@media (max-width: 860px){
  #ghotiSiteSettings .siteSettingsGrid{ grid-template-columns: minmax(0, 1fr); }
  #ghotiSiteSettings .siteSettingsSectionWide{ grid-column: span 1; }
  #ghotiSiteSettings .ghotiCrudHeader{ align-items: stretch; flex-direction: column; }
}
.ghotiHelpText,
.ghotiEmptyState{
  color: var(--muted);
  font-size: .9rem;
}
.ghotiCrudList{
  gap: .85rem;
}
.ghotiCrudRow{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .95rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.ghotiCrudActions{
  justify-content: flex-end;
}
.ghotiCrudMeta{
  margin-right: auto;
  color: var(--muted);
  font-size: .86rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ghotiCrudMeta b{ color: var(--text-2); }
.ghotiLinkRow[hidden]{ display: none; }
.ghotiLinkGroup{
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.ghotiLinkGroupHeader{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.ghotiLinkGroupHeader h2{ margin: 0; font-size: 1.05rem; }
.ghotiLinkGroupHeader code{ font-family: var(--mono); }
.ghotiLinkStatus{ color: var(--good); font-size: .86rem; }
.ghotiLinkStatus.is-error,
.ghotiFormError{ color: var(--bad); }
.ghotiFormError{ margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.ghotiFormError[hidden]{ display: none; }
.ghotiPreviewImage{
  display: block;
  max-height: 140px;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
/* User accounts use full-width cards so optional board controls never squeeze inputs. */
#ghotiManageUsers{ width: 100%; min-width: 0; max-width: none; }
.ghotiUserList{ display: grid; gap: 1rem; min-width: 0; }
.ghotiUserCard{
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  display: grid;
  gap: 1rem;
}
.ghotiUserFields{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
  min-width: 0;
}
.ghotiUserFields input{ min-width: 0; box-sizing: border-box; }
.ghotiUserDetails{ display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem 2rem; min-width: 0; }
.ghotiUserDetails > div{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; }
.ghotiUserDetailLabel{ color: var(--muted); font-size: .8rem; font-weight: 700; }
.ghotiUserBoards{ flex: 1 1 240px; }
.ghotiUserBoards .ghotiModeratesList{ overflow-wrap: anywhere; min-width: 0; }
#ghotiManageUsers .ghotiUserActions{ justify-content: flex-start; border-top: 1px solid var(--border); padding-top: .85rem; }
#ghotiManageUsers .ghotiUserActions button{ min-height: 40px; }

.ghotiManageTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .65rem;
}
.ghotiManageTable th{
  padding: 0 .7rem .25rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
  text-transform: uppercase;
  text-align: left;
}
.ghotiManageTable td{
  padding: .7rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ghotiManageTable td input[type=text]{
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.ghotiManageTable td:first-child{
  border-left: 1px solid var(--border);
  border-radius: 8px 0 0 8px;
}
.ghotiManageTable td:last-child{
  border-right: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
}

.captchaBlock{
  margin: .75rem 0 .85rem;
  padding: .7rem .8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.captchaQuestion{
  display: inline-block;
  margin: .18rem 0 .35rem;
  color: var(--text);
  font-weight: 700;
}

/* ===== Buttons =========================================================== *
 * One button family for the whole app: <button>, input-style buttons, and
 * links styled as buttons (.ghotiButton/.btn) all share the same fancy look -
 * gradient, gloss edge, hover lift + glow, press, focus ring. The .is-busy
 * state swaps the label for a spinner while an async action is in flight
 * (see ghotiButtonBusy() in ghoti.js).
 * ========================================================================= */
.ghotiButton,
.btn,
input[type=button], input[type=submit], button{
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1.05rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), var(--accent));
  color: var(--on-accent);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.22);
  text-decoration: none;
  max-width: 100%;
  /* A label stays on one line. Wrapping (with overflow-wrap:anywhere) broke
   * short labels mid-word - "Dele|te" - whenever a table column squeezed the
   * button. Keep labels short enough to fit a phone instead; text buttons that
   * show data (.ghotiTextButton, e.g. a product name) still wrap, below. */
  white-space: nowrap;
  text-align: center;
  position: relative;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.ghotiButton:hover,
.btn:hover,
input[type=button]:hover, input[type=submit]:hover, button:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.25);
  filter: saturate(1.08) brightness(1.04);
  text-decoration: none;
}
.ghotiButton:active,
.btn:active,
input[type=button]:active, input[type=submit]:active, button:active{
  transform: translateY(1px);
  box-shadow: var(--shadow-sm), inset 0 2px 5px rgba(0,0,0,.22);
  filter: brightness(.97);
}
.ghotiButton:focus-visible,
.btn:focus-visible,
input[type=button]:focus-visible, input[type=submit]:focus-visible, button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
.ghotiButton:disabled, .btn:disabled,
input[type=button]:disabled, input[type=submit]:disabled, button:disabled{
  opacity: .55; cursor: not-allowed; transform: none;
  filter: grayscale(.45); box-shadow: none;
}
.ghotiButton img,
button img{
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

/* busy: set by ghotiButtonBusy() in ghoti.js while a press's request is in
   flight. A button - any <button>, styled or not, and <a> buttons - swaps its
   label for a spinner. The label text is made transparent (text nodes can't
   be targeted with visibility), !important because several themes colour
   their buttons more specifically than this, and the spinner uses --text so
   it reads on accent, secondary and danger buttons alike. */
.ghotiButton.is-busy, .btn.is-busy, button.is-busy{ pointer-events: none; color: transparent !important; }
.ghotiButton.is-busy > *, .btn.is-busy > *, button.is-busy > *{ visibility: hidden; }
.ghotiButton.is-busy::after, .btn.is-busy::after, button.is-busy::after{
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 1.15em; height: 1.15em;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: ghotiSpin .7s linear infinite;
}
@keyframes ghotiSpin{ to { transform: rotate(360deg); } }

/* Links and menu items that run script (the admin menu, page navigation) keep
   their text and show a small spinner after it. content is !important because
   some themes decorate menu links with an ::after arrow through an id
   selector; the arrow gives way to the spinner only while busy. */
a.is-busy:not(.ghotiButton):not(.btn):not(.ghotiIconButton),
[role="button"].is-busy:not(button):not(.ghotiButton):not(.btn):not(.ghotiIconButton),
[role="menuitem"].is-busy:not(button):not(.ghotiButton):not(.btn):not(.ghotiIconButton),
[role="tab"].is-busy:not(button):not(.ghotiButton):not(.btn):not(.ghotiIconButton){ pointer-events: none; }
a.is-busy:not(.ghotiButton):not(.btn):not(.ghotiIconButton)::after,
[role="button"].is-busy:not(button):not(.ghotiButton):not(.btn):not(.ghotiIconButton)::after,
[role="menuitem"].is-busy:not(button):not(.ghotiButton):not(.btn):not(.ghotiIconButton)::after,
[role="tab"].is-busy:not(button):not(.ghotiButton):not(.btn):not(.ghotiIconButton)::after,
.ghotiProgressBusy::before{
  content: "" !important;
  display: inline-block;
  width: .9em; height: .9em;
  margin: 0 .45em;
  vertical-align: -.1em;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: ghotiSpin .7s linear infinite;
}
.ghotiProgressBusy::before{ margin-left: 0; }

/* While any press is waiting on the server, the whole page says so - the
   feedback that survives a control that disappears on press, such as a
   dropdown menu closing behind the item you chose. */
html.ghotiBusy, html.ghotiBusy *{ cursor: progress !important; }

/* Reduced motion flattens every animation to nothing, which would freeze a
   spinner into a plain ring. A busy indicator carries information, so it
   keeps a slow turn instead. */
@media (prefers-reduced-motion: reduce){
  .is-busy::after, .ghotiProgressBusy::before{ animation-duration: 1.8s !important; }
}

/* standalone spinner (progress text, placeholders, ...) */
.ghotiSpinner{
  display: inline-block; width: 1.1em; height: 1.1em;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: ghotiSpin .7s linear infinite;
  vertical-align: -0.2em;
}

.ghotiButtonSecondary,
input[type=button].ghotiButtonSecondary,
input[type=submit].ghotiButtonSecondary,
button.ghotiButtonSecondary{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
}
.ghotiButtonSecondary:hover,
input[type=button].ghotiButtonSecondary:hover,
input[type=submit].ghotiButtonSecondary:hover,
button.ghotiButtonSecondary:hover{
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* active range-picker button (analytics toolbar); placed after the secondary
   group so hovering an active pill keeps its accent fill */
.ghotiButton.ghotiRangeActive{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #000 4%), var(--accent-2, var(--accent)));
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.18);
  color: var(--on-accent);
}
.ghotiButtonDanger,
input[type=button].ghotiButtonDanger,
input[type=submit].ghotiButtonDanger,
button.ghotiButtonDanger{
  background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 88%, #fff 10%), var(--bad));
  color: #fff;
}
.ghotiButtonDanger:hover,
input[type=button].ghotiButtonDanger:hover,
input[type=submit].ghotiButtonDanger:hover,
button.ghotiButtonDanger:hover{
  background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 80%, #000 4%), color-mix(in srgb, var(--bad) 86%, #000 14%));
}
.ghotiButtonCompact{
  padding: .42rem .7rem;
  font-size: .9rem;
}

/* ===== Modal =============================================================== */
#popup-bg{
  display: none;                         /* JS sets display:flex to open */
  position: fixed; inset: 0; z-index: 2147483647;
  /* Center vertically so the modal always clears fixed/sticky headers,
     whose heights vary widely between themes (a fixed top offset is
     unreliable and can end up hidden underneath a tall header). */
  align-items: center; justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  background: rgba(8,12,20,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#popup{
  width: 100%; max-width: 520px; margin: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  text-align: left; overflow: hidden; position: relative; z-index: 1;
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .25s ease, transform .25s ease;
}
#popup.show{ opacity: 1; transform: none; }
#popup-title{ margin: 0; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
#popup-title h2, #popupTitle{ margin: 0; padding: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
#popup-content{ display: block; padding: 1.25rem; max-height: 70vh; overflow: auto; }
#popup-content #ghotiLogin{ display: block; width: 100%; }
#popup-content input[type=text], #popup-content input[type=email],
#popup-content input[type=password], #popup-content textarea, #popup-content select{ width: 100%; margin: .15rem 0 .6rem; }
#popup-content input[type=button], #popup-content input[type=submit]{ margin-top: .3rem; margin-right: .4rem; }
#popupFeedback{ display: block; margin-top: .5rem; color: var(--accent-2); font-weight: 600; }

.popup-close{ position: absolute; right: .55rem; top: .55rem; }
.popup-close a{
  display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--muted);
  transition: background .12s ease, transform .12s ease;
}
.popup-close a:hover{ background: var(--surface-3); color: var(--text); transform: rotate(90deg); }
.popup-close img{ width: 13px; height: 13px; opacity: .7; }

/* ===== Page editor ========================================================= */
#managePagePanel{ position: static; }
.ghotiPageActions{
  position: absolute;
  bottom: 1.15rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
}
.ghotiCommentActions{
  left: 1.25rem;
  justify-content: flex-start;
}
.ghotiEditActions{
  right: 1.25rem;
  justify-content: flex-end;
}
.ghotiIconButton{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, #ffffff 56%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, #ffffff 30%);
  color: var(--accent);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.28);
  opacity: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ghotiIconButton.is-busy{ pointer-events: none; color: transparent !important; }
.ghotiIconButton.is-busy > *{ visibility: hidden; }
.ghotiIconButton.is-busy::after{
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: .95em; height: .95em;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: ghotiSpin .7s linear infinite;
}
.ghotiIconButton:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, #ffffff 82%);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.ghotiIconButton:focus-visible{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, #ffffff 82%);
}
.ghotiIconButton:active{ transform: translateY(0); }
.ghotiIconButton img,
.ghotiIconButtonImage{
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  border-radius: 4px;
  opacity: .88;
  transition: opacity .12s ease;
}
#ghotiContent .ghotiIconButton img{
  width: 18px;
  height: 18px;
}
.ghotiIconButton:hover img,
.ghotiIconButton:focus-visible img{ opacity: 1; }
.ghotiDangerButton:hover{
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
}
.managePageActions{
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .85rem;
}
.managePageVisibilityLabel{
  margin-left: .45rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}
#managePagePanel .managePageVisibilityLabel{ color: var(--muted); }
#publicPrivateButton{
  display: inline-flex;
  align-items: center;
}
#managePageForm{
  position: relative; visibility: hidden;   /* JS reveals + slides down */
  width: min(1120px, 100%);
  margin: .6rem auto 1.25rem;
  overflow: hidden;
  background:
    radial-gradient(700px 230px at 5% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.ghotiEditorHeader{
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr);
  align-items: end;
  gap: 2rem;
  padding: 1.5rem 1.6rem 1.35rem;
  border-bottom: 1px solid var(--border);
}
.ghotiEditorHeader h2{ margin: .2rem 0 .3rem; font-size: clamp(1.45rem, 3vw, 2.15rem); }
.ghotiEditorHeader p{ margin: 0; max-width: 45ch; color: var(--text-2); }
.ghotiEditorEyebrow{
  color: var(--accent-2);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ghotiEditorHeaderFields{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr);
  gap: .75rem;
}
.ghotiEditorHeaderFields label{ display: grid; gap: .34rem; }
.ghotiEditorHeaderFields label > span{
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#pageTitleEdit{ min-width: 0; font-size: 1.04rem; font-weight: 700; }
#pageVisibilityEdit{ min-width: 0; }
.ghotiEditorToolbar{
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 58px;
  padding: .6rem .75rem;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.ghotiEditorToolGroup,
.ghotiEditorModes{ display: flex; align-items: center; gap: .3rem; }
.ghotiEditorToolGroup + .ghotiEditorToolGroup{ padding-left: .65rem; border-left: 1px solid var(--border); }
.ghotiEditorToolbar button,
.ghotiEditorToolbar select{
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: .42rem .68rem;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
}
.ghotiEditorToolbar select{ min-width: 118px; background: var(--surface-2); border-color: var(--border); }
.ghotiEditorToolbar button:hover{ color: var(--text); background: var(--surface-2); border-color: var(--border); }
.ghotiEditorToolbar button.is-active{
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 24%, transparent);
}
.ghotiEditorModes{
  margin-left: auto;
  padding: .22rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ghotiEditorModes button{ min-height: 30px; padding: .35rem .65rem; }
.ghotiEditorCanvas{
  position: relative;
  min-height: 500px;
  padding: clamp(.75rem, 2vw, 1.5rem);
  background:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    var(--surface-2);
  background-size: 28px 28px;
}
.ghotiVisualEditor,
.ghotiSourceEditor,
.ghotiEditorPreview{
  display: none;
  width: min(820px, 100%);
  min-height: 450px;
  margin: 0 auto;
  padding: clamp(1.3rem, 4vw, 3rem);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 50px -30px rgba(0,0,0,.45);
}
#managePageForm[data-editor-mode="visual"] .ghotiVisualEditor,
#managePageForm[data-editor-mode="source"] .ghotiSourceEditor,
#managePageForm[data-editor-mode="preview"] .ghotiEditorPreview{ display: block; }
.ghotiVisualEditor{
  line-height: 1.75;
  cursor: text;
}
.ghotiVisualEditor:focus,
.ghotiSourceEditor:focus{ outline: none; border-color: var(--accent); box-shadow: var(--ring), 0 18px 50px -30px rgba(0,0,0,.45); }
.ghotiVisualEditor:empty::before{
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.ghotiSourceEditor{
  resize: vertical;
  tab-size: 2;
  font: 13px/1.72 var(--mono);
  white-space: pre;
}
.ghotiEditorPreview{ cursor: default; }
.ghotiEditorPreview a{ pointer-events: none; }
.ghotiEditorEmptyPreview{ color: var(--muted); font-style: italic; }
.ghotiEditorFooter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.ghotiEditorStatus,
.ghotiEditorActions{ display: flex; align-items: center; gap: .6rem; }
.ghotiEditorStatus{ min-width: 0; color: var(--muted); font-size: .76rem; }
.ghotiEditorSafeBadge{
  flex: none;
  padding: .27rem .55rem;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 24%, transparent);
  border-radius: var(--radius-pill);
  font-weight: 750;
}
.ghotiEditorSafeBadge::before{ content: '\2713'; margin-right: .3rem; }
#ghotiEditorMessage{ color: var(--accent-2); font-weight: 650; }
#managePageForm.is-dirty .ghotiEditorSafeBadge::before{ content: '\2022'; }
#managePageForm.is-dirty .ghotiEditorSafeBadge{ color: var(--accent-2); background: var(--accent-soft); border-color: var(--accent-soft); }
.ghotiEditorActions .ghotiButton{ margin: 0; }
.ghotiEditorSave{ min-width: 152px; }
#managePageForm img, #managePagePanel a img{ vertical-align: middle; cursor: pointer; }

/* ===== Page management panel ============================================== */
#ghotiPageManager{
  width: 100%;
  max-width: 1100px;
}
#ghotiPageManager .ghotiCrudHeader{ align-items: flex-end; }
#ghotiPageManager .ghotiCrudHeader h1{ margin-bottom: .25rem; }
#ghotiPageManager .ghotiCrudHeader p{ margin: 0; }
.ghotiPageAddForm{
  display: flex;
  align-items: center;
  gap: .55rem;
}
.ghotiPageAddForm input{ width: min(230px, 42vw); }
.ghotiPageManagerLabels,
.ghotiPageManagerRow{
  display: grid;
  grid-template-columns: minmax(112px,.65fr) minmax(170px,1.35fr) minmax(95px,.55fr) minmax(170px,1fr) auto;
  align-items: center;
  gap: .75rem;
}
.ghotiPageManagerLabels{
  padding: 0 .85rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  text-transform: uppercase;
}
.ghotiPageManagerRows{
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.ghotiPageManagerRow{
  min-height: 70px;
  padding: .7rem .85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ghotiPageManagerRow:hover{ border-color: var(--border-strong); }
.ghotiPageManagerRow.is-dragging{
  opacity: .52;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.ghotiPageOrderControls,
.ghotiPageManagerActions,
.ghotiPageManagerFooter{
  display: flex;
  align-items: center;
  gap: .4rem;
}
.ghotiPageOrderControls{ grid-column: 1; }
.ghotiDragHandle{
  width: 24px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: grab;
  user-select: none;
}
.ghotiPageOrderControls button{
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.ghotiPageOrderControls button:hover{ border-color: var(--accent); background: var(--accent-soft); }
.ghotiPageOrderControls button:disabled{
  opacity: .3;
  cursor: default;
  transform: none;
  box-shadow: none;
}
button.ghotiPageManagerTitle{
  grid-column: 2;
  min-width: 0;
  padding: .2rem 0;
  flex-direction: column;
  align-items: flex-start;
  gap: .12rem;
  background: transparent;
  border: 0;
  color: var(--text);
  box-shadow: none;
  text-align: left;
}
button.ghotiPageManagerTitle:hover{
  color: var(--accent-2);
  transform: none;
  box-shadow: none;
}
.ghotiPageManagerTitle span{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.ghotiPageManagerTitle small{ color: var(--muted); font-size: .75rem; }
.ghotiDefaultChoice{
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: max-content;
  color: var(--text-2);
  font-weight: 650;
}
.ghotiDefaultChoice[hidden]{ display: none; }
.ghotiPagePermission{ display: block; }
.ghotiPagePermission{ grid-column: 4; }
.ghotiPagePermission select{ width: 100%; }
.ghotiMobileLabel{ display: none; }
.ghotiPageManagerActions{ grid-column: 5; justify-content: flex-end; }
.ghotiPageManagerFooter{
  justify-content: space-between;
  padding-top: .25rem;
}
.ghotiPageManagerFooter p{ margin: 0; }

/* ===== Site Settings panel ================================================= */
#ghotiSiteSettings{ width: 100%; min-width: 0; max-width: none; }
#ghotiSiteSettings h1{ font-size: 1.55rem; margin: 0 0 .3rem; }
#ghotiSiteSettings form{ display: flex; flex-direction: column; gap: .2rem; }
#ghotiSiteSettings p{ margin: .55rem 0; }
#ghotiSiteSettings > p:first-of-type,
#ghotiSiteSettings > p:last-child{ color: var(--muted); font-size: .88rem; }
#ghotiSiteSettings label{ font-weight: 600; color: var(--text); }
#ghotiSiteSettings input[type=text], #ghotiSiteSettings select{ width: 100%; margin-top: .3rem; }
#ghotiSiteSettings input[type=checkbox]{ margin-right: .55rem; }
#ghotiSiteSettings input[type=button]{ margin-top: .4rem; }

/* ===== Icons & small imagery =============================================== */
.linkIcon{ cursor: pointer; vertical-align: middle; }
img.linkIcon{ width: 20px; height: 20px; border-radius: 5px; transition: transform .12s ease; }
img.linkIcon:hover{ transform: scale(1.15); }
.adminIcon{ width: 20px; height: 20px; vertical-align: middle; cursor: pointer; }
.ghoti-icon{ width: 20px; height: 20px; color: var(--accent); vertical-align: middle; }

/* ===== Utilities & motion ================================================== */
.doNotDisplay{ display: none !important; }
.alignRight{ text-align: right; }
.alignCentre{ text-align: center; }
.boldText{ font-weight: 700; }

/* toggled visible by JS on login */
#ghotiPrivateMenuTitle, #ghotiAdminMenuTitle,
#ghotiPrivateMenu, #ghotiAdminMenu{ visibility: hidden; }

.card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem;
}

.fade-in{ animation: ghotiFadeIn .3s ease both; }
@keyframes ghotiFadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ===== Responsive ========================================================== */
@media (max-width: 820px){
  .rowOfBoxes{ flex-direction: column; }
  .twoThirds, .oneThird, .quarter{ flex: 1 1 auto; }
  #ghotiContent{ padding: 1.3rem 1.15rem 4.5rem; }
  .ghotiFieldWide{ grid-column: span 1; }
  .ghotiCrudActions{ justify-content: flex-start; }
  .ghotiManageTable{ display: block; overflow-x: auto; }
  .midHeader{ padding: .8rem var(--gutter); }
  .midHeader img{ height: 42px; }
  #popup{ max-width: 100%; }
  #ghotiPageManager .ghotiCrudHeader{ align-items: stretch; }
  .ghotiPageAddForm input{ width: 100%; }
  .ghotiPageManagerLabels{ display: none; }
  .ghotiPageManagerRow{
    grid-template-columns: minmax(0,1fr) auto;
    gap: .7rem 1rem;
  }
  .ghotiPageOrderControls{ grid-column: 1; grid-row: 2; }
  .ghotiPageManagerTitle{ grid-column: 1; grid-row: 1; }
  .ghotiDefaultChoice{ grid-column: 2; grid-row: 1; }
  .ghotiPagePermission{ grid-column: 1 / -1; grid-row: 3; }
  .ghotiMobileLabel{
    display: block;
    margin-bottom: .32rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
  }
  .ghotiPageManagerActions{ grid-column: 2; grid-row: 2; }
  .ghotiPageManagerFooter{ align-items: flex-start; flex-direction: column; }

  #ghotiManageUsers .ghotiManageTable,
  #ghotiManageUsers .ghotiManageTable tbody,
  #ghotiManageUsers .ghotiManageTable tr,
  #ghotiManageUsers .ghotiManageTable td{ display: block; width: 100%; }
  #ghotiManageUsers .ghotiManageTable{ border-spacing: 0; }
  #ghotiManageUsers .ghotiManageTable thead{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  #ghotiManageUsers .ghotiManageTable tr{
    margin-bottom: .8rem;
    padding: .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
  }
  #ghotiManageUsers .ghotiManageTable td,
  #ghotiManageUsers .ghotiManageTable td:first-child,
  #ghotiManageUsers .ghotiManageTable td:last-child{
    padding: .35rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  #ghotiManageUsers .ghotiManageTable td::before{
    content: attr(data-label);
    display: block;
    margin-bottom: .25rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
  }
  #ghotiManageUsers .ghotiManageTable td input,
  #ghotiManageUsers .ghotiManageTable td > button{ width: 100%; }
}

@media (max-width: 520px){
  .ghotiFormGrid{ grid-template-columns: minmax(0,1fr); }
  .ghotiFieldWide{ grid-column: 1; }
  #ghotiSiteSettings .siteSettingsGrid{ grid-template-columns: minmax(0,1fr); }
  #ghotiSiteSettings .siteSettingsSectionWide{ grid-column: span 1; }
  .ghotiCrudHeader{
    align-items: stretch;
    flex-direction: column;
  }
  .ghotiCrudHeader > button,
  .ghotiCrudHeader > .ghotiButton{ width: 100%; }
  .ghotiFormActions{
    align-items: stretch;
    flex-direction: column;
  }
  .ghotiFormActions > button,
  .ghotiFormActions > input[type=button],
  .ghotiFormActions > input[type=submit],
  .ghotiFormActions > .ghotiButton{ width: 100%; margin: 0; }
  .ghotiCrudMeta{ width: 100%; margin-right: 0; }
  #popup-bg{ padding: .5rem; }
  #popup{ border-radius: 10px; }
  #popup-title{ padding: .8rem 3rem .8rem .85rem; }
  .securityBlockListHeader,
  .securityBlockList li{ align-items: stretch; flex-direction: column; }
  #popup-content{ padding: .85rem; max-height: calc(100vh - 5rem); }
  #popup-content .ghotiFormActions > input[type=button],
  #popup-content .ghotiFormActions > input[type=submit]{ width: 100%; margin: 0; }
  #managePageForm{ border-radius: 14px; }
  .ghotiEditorHeader{ grid-template-columns: 1fr; gap: 1rem; padding: 1.15rem; }
  .ghotiEditorToolbar{ align-items: stretch; flex-wrap: wrap; }
  .ghotiEditorToolGroup{ flex-wrap: wrap; }
  .ghotiEditorModes{ width: 100%; margin-left: 0; }
  .ghotiEditorModes button{ flex: 1; }
  .ghotiEditorCanvas{ min-height: 420px; padding: .6rem; }
  .ghotiVisualEditor,
  .ghotiSourceEditor,
  .ghotiEditorPreview{ min-height: 400px; padding: 1.1rem; }
  .ghotiEditorFooter{ align-items: stretch; flex-direction: column; }
  .ghotiEditorStatus{ flex-wrap: wrap; }
  .ghotiEditorActions{ display: grid; grid-template-columns: 1fr 1fr; }
  .ghotiEditorActions .ghotiEditorSave{ grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .ghotiEditorActions .ghotiButton{ width: 100%; }
  .captchaBlock{ padding: .6rem; }
  .ghotiInlineChoice{ width: 100%; }
  .ghotiPageAddForm{ align-items: stretch; flex-direction: column; }
  .ghotiPageAddForm input, .ghotiPageAddForm button{ width: 100%; }
  .ghotiPageManagerRow{ grid-template-columns: 1fr; }
  .ghotiPageOrderControls,
  .ghotiPageManagerTitle,
  .ghotiDefaultChoice,
  .ghotiPagePermission,
  .ghotiPageManagerActions{ grid-column: 1; grid-row: auto; }
  .ghotiPageManagerActions{ align-items: stretch; flex-direction: column; justify-content: flex-start; }
  .ghotiPageManagerActions button,
  .ghotiPageManagerFooter button{ width: 100%; }
  .ghotiPageManagerFooter{ width: 100%; }
}

/* Container-query mirrors of the two breakpoints above: #ghotiContent sits
 * beside a sidebar column in most themes, so its rendered width can be much
 * narrower than the viewport - these make Manage Pages / Manage Users adapt
 * to the panel's own width instead of squishing while the window is wide. */
@container (max-width: 820px){
  .ghotiFieldWide{ grid-column: span 1; }
  .ghotiCrudActions{ justify-content: flex-start; }
  .ghotiManageTable{ display: block; overflow-x: auto; }
  #ghotiPageManager .ghotiCrudHeader{ align-items: stretch; }
  .ghotiPageAddForm input{ width: 100%; }
  .ghotiPageManagerLabels{ display: none; }
  .ghotiPageManagerRow{
    grid-template-columns: minmax(0,1fr) auto;
    gap: .7rem 1rem;
  }
  .ghotiPageOrderControls{ grid-column: 1; grid-row: 2; }
  .ghotiPageManagerTitle{ grid-column: 1; grid-row: 1; }
  .ghotiDefaultChoice{ grid-column: 2; grid-row: 1; }
  .ghotiPagePermission{ grid-column: 1 / -1; grid-row: 3; }
  .ghotiMobileLabel{
    display: block;
    margin-bottom: .32rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
  }
  .ghotiPageManagerActions{ grid-column: 2; grid-row: 2; }
  .ghotiPageManagerFooter{ align-items: flex-start; flex-direction: column; }

  #ghotiManageUsers .ghotiManageTable,
  #ghotiManageUsers .ghotiManageTable tbody,
  #ghotiManageUsers .ghotiManageTable tr,
  #ghotiManageUsers .ghotiManageTable td{ display: block; width: 100%; }
  #ghotiManageUsers .ghotiManageTable{ border-spacing: 0; }
  #ghotiManageUsers .ghotiManageTable thead{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  #ghotiManageUsers .ghotiManageTable tr{
    margin-bottom: .8rem;
    padding: .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
  }
  #ghotiManageUsers .ghotiManageTable td,
  #ghotiManageUsers .ghotiManageTable td:first-child,
  #ghotiManageUsers .ghotiManageTable td:last-child{
    padding: .35rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  #ghotiManageUsers .ghotiManageTable td::before{
    content: attr(data-label);
    display: block;
    margin-bottom: .25rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
  }
  #ghotiManageUsers .ghotiManageTable td input,
  #ghotiManageUsers .ghotiManageTable td > button{ width: 100%; }
}
@container (max-width: 520px){
  .ghotiPageManagerRow{ grid-template-columns: 1fr; }
  .ghotiPageOrderControls,
  .ghotiPageManagerTitle,
  .ghotiDefaultChoice,
  .ghotiPagePermission,
  .ghotiPageManagerActions{ grid-column: 1; grid-row: auto; }
  .ghotiPageManagerActions{ align-items: stretch; flex-direction: column; justify-content: flex-start; }
  .ghotiPageManagerActions button,
  .ghotiPageManagerFooter button{ width: 100%; }
  .ghotiPageManagerFooter{ width: 100%; }
}

@media (max-width: 360px){
  :root{ --gutter: .65rem; }
  #main-copy{ padding-right: .55rem; padding-left: .55rem; }
  #ghotiContent{ padding: .85rem .7rem 4.25rem; }
  .ghotiCrudRow{ padding: .7rem; }
  .managePageActions{ align-items: flex-start; }
  .ghotiEditorHeaderFields{ grid-template-columns: 1fr; }
  .ghotiEditorToolGroup + .ghotiEditorToolGroup{ padding-left: 0; border-left: 0; }
  #changeTheme select{ min-width: 0; }
}

/* ================================================================== *
 *  Administrator documentation
 * ================================================================== */
.ghotiTextButton{
  display: inline;
  white-space: normal;       /* link-style, often a name: let it wrap */
  overflow-wrap: break-word; /* between words; only an overlong word is split */
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ghotiTextButton:hover{ color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
#ghotiDocumentation{ max-width: 1180px; margin: 0 auto; }
.ghotiDocsHero{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 245px;
  margin-bottom: 1.25rem;
  padding: clamp(1.5rem, 5vw, 3.6rem);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(560px 260px at 85% 20%, rgba(126,231,255,.28), transparent 68%),
    linear-gradient(135deg, #17233f 0%, #233f78 52%, #356ec1 100%);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}
.ghotiDocsHero::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(90deg, transparent, #000);
  pointer-events: none;
}
.ghotiDocsHero > div:first-child{ position: relative; z-index: 1; max-width: 690px; }
.ghotiDocsHero h1{ margin: .3rem 0 .6rem; color: #fff; font-size: clamp(2.2rem, 7vw, 4.4rem); letter-spacing: -.055em; }
.ghotiDocsHero p{ margin: 0; color: rgba(255,255,255,.78); font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.55; }
.ghotiDocsKicker{
  color: #9fdcff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ghotiDocsHeroMark{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 118px;
  width: 118px;
  height: 118px;
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 28px 55px rgba(0,0,0,.22);
  font-size: 4rem;
  font-weight: 850;
  line-height: 1;
  transform: rotate(4deg);
}
.ghotiDocsLayout{
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}
.ghotiDocsNav{
  position: sticky;
  top: 5rem;
  display: grid;
  gap: .18rem;
  padding: .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.ghotiDocsNav strong{
  padding: .4rem .55rem .55rem;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ghotiDocsNav a{
  padding: .45rem .55rem;
  color: var(--text-2);
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
}
.ghotiDocsNav a:hover{ color: var(--accent-2); background: var(--accent-soft); text-decoration: none; }
.ghotiDocsGuide{ display: grid; gap: 1rem; width: 100%; min-width: 0; max-width: 100%; }
.ghotiGuideSection{
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2.1rem);
  scroll-margin-top: 5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  max-width: 100%;
}
.ghotiGuideSection > div{ min-width: 0; max-width: 100%; }
.ghotiGuideLead{ background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent) 5%, var(--surface))); }
.ghotiGuideNumber{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 12px;
  font: 750 .76rem/1 var(--mono);
}
.ghotiGuideSection h2{ margin: .1rem 0 1rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.ghotiGuideSection h3{ margin: 1.65rem 0 .45rem; font-size: 1rem; }
.ghotiGuideSection h3:first-child{ margin-top: 0; }
.ghotiGuideSection p{ max-width: 78ch; margin: .45rem 0 .8rem; color: var(--text-2); }
.ghotiGuideSection p,
.ghotiGuideSection li,
.ghotiGuideSection dd{ overflow-wrap: anywhere; }
.ghotiGuideSection code,
.ghotiGuideSection kbd{
  padding: .13rem .38rem;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 5px;
  font: 650 .88em/1.4 var(--mono);
}
.ghotiGuideSection pre{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: .75rem 0 1.2rem;
  overflow-x: auto;
  color: #dce8ff;
  background: #111827;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ghotiGuideSection pre code{ display: block; padding: 1rem 1.1rem; color: inherit; background: transparent; border: 0; font-weight: 500; }
.ghotiGuideSteps{ display: grid; gap: .7rem; margin: 1rem 0; padding: 0; list-style: none; }
.ghotiGuideSteps li{ display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .75rem; align-items: start; }
.ghotiGuideSteps li > div{ min-width: 0; }
.ghotiGuideSteps li > span{
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 800;
}
.ghotiGuideSteps p{ margin: .15rem 0 0; font-size: .9rem; }
.ghotiGuideCallout{
  margin: 1.2rem 0 .2rem;
  padding: .9rem 1rem;
  color: var(--text-2);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
.ghotiGuideCalloutWarn{ background: color-mix(in srgb, #e9a23b 12%, transparent); border-left-color: #e9a23b; }
.ghotiGuideChecklist{ display: grid; gap: .5rem; margin: .75rem 0 1rem; padding: 0; list-style: none; }
.ghotiGuideChecklist li{ position: relative; padding-left: 1.65rem; color: var(--text-2); }
.ghotiGuideChecklist li::before{
  content: "\2713";
  position: absolute;
  left: 0;
  top: .12rem;
  display: grid;
  place-items: center;
  width: 1.12rem;
  height: 1.12rem;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, transparent);
  border-radius: 50%;
  font-size: .67rem;
  font-weight: 900;
}
.ghotiGuideCards,
.ghotiGuideFeatureList{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.ghotiGuideCards article,
.ghotiGuideFeatureList article{
  padding: .9rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.ghotiGuideCards p,
.ghotiGuideFeatureList p{ margin: .2rem 0 0; font-size: .88rem; }
.ghotiGuideFeatureList h3{ margin: 0 0 .35rem; color: var(--accent-2); }
.ghotiGuideTroubleshooting{ margin: 0; }
.ghotiGuideTroubleshooting dt{ margin-top: 1rem; font-weight: 750; }
.ghotiGuideTroubleshooting dd{ margin: .25rem 0 0; padding: 0 0 1rem; color: var(--text-2); border-bottom: 1px solid var(--border); }
.ghotiGuideFinish{ margin-top: 1.25rem !important; font-weight: 650; }
@media (max-width: 820px){
  .ghotiDocsLayout{ grid-template-columns: minmax(0, 1fr); }
  .ghotiDocsNav{ position: static; display: flex; gap: .3rem; overflow-x: auto; }
  .ghotiDocsNav strong{ display: none; }
  .ghotiDocsNav a{ flex: none; white-space: nowrap; }
}
@media (max-width: 560px){
  .ghotiDocsHero{ min-height: 210px; border-radius: 16px; }
  .ghotiDocsHeroMark{ position: absolute; right: -24px; bottom: -30px; opacity: .28; }
  .ghotiGuideSection{ grid-template-columns: 1fr; }
  .ghotiGuideNumber{ width: 36px; height: 36px; }
  .ghotiGuideCards,
  .ghotiGuideFeatureList{ grid-template-columns: 1fr; }
}

/* ================================================================== *
 *  Shared collapsible "how to" docs panel (ghoti_docs_panel / ghotiDocsHtml).
 *  Used on every admin screen so all usage documentation looks the same.
 * ================================================================== */
.ghotiDocs{
	margin: 1rem 0 0.2rem;
	border: 1px solid rgba(127,127,160,0.35);
	border-radius: 14px;
	background: linear-gradient(160deg, rgba(139,92,246,0.08), rgba(34,211,238,0.05));
	overflow: hidden;
}
.ghotiDocs summary{
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.8rem 1.1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	user-select: none;
}
.ghotiDocs summary::-webkit-details-marker{ display: none; }
.ghotiDocs summary::before{
	content: "\2139";
	margin-right: 0.15rem;
	color: #8b5cf6;
	font-weight: 700;
}
.ghotiDocs summary::after{
	content: "\25BE";
	margin-left: auto;
	color: #8b5cf6;
	transition: transform 0.25s ease;
}
.ghotiDocs[open] summary::after{ transform: rotate(180deg); }
.ghotiDocs[open] summary{ border-bottom: 1px solid rgba(127,127,160,0.25); }
.ghotiDocsTitle{ font-size: 1rem; }
.ghotiDocsHint{
	font-size: 0.78rem;
	font-weight: 400;
	opacity: 0.6;
}
.ghotiDocsBody{
	padding: 1rem 1.2rem 1.2rem;
	font-size: 0.92rem;
	line-height: 1.6;
}
.ghotiDocsBody h3{
	margin: 1.1rem 0 0.3rem;
	font-size: 0.95rem;
	font-weight: 700;
}
.ghotiDocsBody h3:first-child{ margin-top: 0; }
.ghotiDocsBody ul{ margin: 0.25rem 0 0.6rem; padding-left: 1.3rem; }
.ghotiDocsBody li{ margin: 0.25rem 0; }
.ghotiDocsBody code,
.ghotiDocCode{
	display: inline-block;
	margin: 0.1rem 0;
	padding: 0.2rem 0.6rem;
	border-radius: 7px;
	background: rgba(139,92,246,0.16);
	border: 1px solid rgba(139,92,246,0.35);
	font-size: 0.92em;
	font-weight: 600;
	color: #8b5cf6;
}
@media (prefers-reduced-motion: reduce){
	.ghotiDocs summary::after{ transition: none; }
}