/* Shared inner-page theme. Layout and visibility remain owned by each tool. */
.workspace-page {
  --bg: #edf4f3;
  --surface: #fff;
  --field: var(--surface);
  --text: #102f32;
  --muted: #476368;
  --border: #c5d7d7;
  --primary: #087a73;
  --shadow: 0 8px 24px #12343612;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Inter, Arial, sans-serif;
}
html[data-theme="dark"] .workspace-page {
  --bg: #101827;
  --surface: #202A38;
  --field: #293547;
  --text: #F3F4F0;
  --muted: #BAC5D3;
  --border: #3B495D;
  --primary: #79D4BF;
}
.workspace-page .home-card-wrap { margin-top: 32px !important; max-width: 1180px; }
.workspace-page main { border: 1px solid var(--border); border-radius: 8px; box-shadow: none; padding: 32px; }
.workspace-page main h1 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; text-transform: none; color: var(--text); text-align: left; }
.workspace-page main > div:first-child { text-align: left; padding-bottom: 24px; margin-bottom: 24px; }
.workspace-page main h2 { font-size: 22px; letter-spacing: -.025em; line-height: 1.35; color: var(--text); }
.workspace-page main h3 { color: var(--text); line-height: 1.4; }
.workspace-page main p { line-height: 1.65; }
/* Slate tables with mint dividers match the shared dark palette. */
html[data-theme="dark"] .workspace-page table { background:#202A38; color:var(--text); font-size:14px; }
html[data-theme="dark"] .workspace-page table thead { background:#293547!important; }
html[data-theme="dark"] .workspace-page table thead th { color:#F3F4F0!important; border-bottom:1px solid var(--primary); }
html[data-theme="dark"] .workspace-page table tbody { background:#202A38!important; }
html[data-theme="dark"] .workspace-page table tbody tr { border-color:#3B495D; }
html[data-theme="dark"] .workspace-page table tbody tr:nth-child(even) { background:#253142; }
html[data-theme="dark"] .workspace-page table tbody tr:hover { background:#293547; }
html[data-theme="dark"] .workspace-page table td { color:var(--muted)!important; }
.workspace-page main .text-slate-500, .workspace-page main .text-slate-600 { color: var(--muted) !important; }
.workspace-page main .bg-slate-50 { background: color-mix(in srgb, var(--surface) 78%, var(--bg)) !important; }
.workspace-page main .border { border-color: var(--border) !important; }
.workspace-page main :is(.rounded-xl,.rounded-lg) { border-radius: 6px; }
.workspace-page main :is(.shadow-xl,.shadow-lg,.shadow-md,.shadow-sm) { box-shadow: none; }
.workspace-page main :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),select,textarea,.selectBox) {
  border: 1px solid var(--border) !important;
  background: var(--field) !important;
  color: var(--text) !important;
  border-radius: 4px;
  box-shadow: none;
  font-size: 16px;
  min-height: 44px;
  padding: 10px 12px;
}
.workspace-page main input::placeholder, .workspace-page main textarea::placeholder { color: var(--muted) !important; opacity: .8; }
.workspace-page main :is(input,select,textarea,button,a):focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 3px; box-shadow: none !important; }
.workspace-page main :is(input[type="checkbox"],input[type="radio"],input[type="range"]) { accent-color: var(--primary); }
.workspace-page :is(.btn-primary,.btn-secondary,.btn-tertiary,.btn-blue) {
  border-radius: 4px;
  box-shadow: none !important;
  font-size: 15px;
  min-height: 44px;
  padding: 10px 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.workspace-page :is(.btn-primary,.btn-blue) { background: var(--primary) !important; border: 1px solid var(--primary); color: var(--surface) !important; }
.workspace-page :is(.btn-secondary,.btn-tertiary) { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.workspace-page :is(.btn-primary,.btn-secondary,.btn-tertiary,.btn-blue):hover { filter: brightness(.95); }
.workspace-page #mode-steps,.workspace-page #mode-single,.workspace-page #builder-view-full,.workspace-page #builder-view-steps { min-height: 40px; padding: 8px 12px; border-radius: 4px; box-shadow: none; font-size: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.workspace-page :is(#mode-steps,#mode-single)[aria-pressed="true"] { background: var(--primary); color: var(--surface); border-color: var(--primary); }
@media(max-width:640px) {
 .workspace-page :is(#builder-view-full,#builder-view-steps) { font-size:.8125rem!important; white-space:nowrap!important; padding:.45rem .6rem!important; }
}
.workspace-page #perf-left > div:first-child { display: flex; justify-content: flex-end; }
.workspace-page #perf-left [data-rating-row] { grid-template-columns: minmax(0,1fr) 32px; gap: 8px; }
.workspace-page #perf-left [data-rating-row] > label { grid-column: 1 / -1; text-align: left; font-size: 15px; }
.workspace-page #perf-right > div { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.workspace-page #perf-right label { text-align: left; padding-top: 0; font-size: 15px; }
.workspace-page #perf-left,.workspace-page #perf-right { min-width: 0; }
.workspace-page #dynamic-form-fields { gap: 32px; }
.workspace-page #report-output,.workspace-page #strategies-output { font-size: 17px; line-height: 1.75; background: var(--surface) !important; }
.workspace-page #stepper-controls { padding-top: 24px; border-top: 1px solid var(--border); }
.workspace-page #rating-fields-list,.workspace-page #improvement-areas-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.workspace-page :is(#rating-fields-list,#improvement-areas-list) > * { margin: 0 !important; min-width: 0; }
.workspace-page :is(#rating-fields-list,#improvement-areas-list) > div { gap: 8px; padding: 10px; }
.workspace-page :is(#rating-fields-list,#improvement-areas-list) button { width: 32px; min-width: 32px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; }
.workspace-page :is(#rating-fields-list,#improvement-areas-list) .flex-1 { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.workspace-page #templates-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.workspace-page #templates-list > * { margin: 0 !important; min-width: 0; }
.workspace-page .tm-card { border-radius: 6px; padding: 24px; box-shadow: none !important; overflow:visible; }
.workspace-page .tm-card:has(.tm-dropdown.open) { z-index:20; }
.workspace-page .tm-card > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.workspace-page .tm-card .tm-body { min-width: 0; padding-right: 0; overflow-wrap: anywhere; }
.workspace-page .tm-card .tm-body h3 { display: block; }
.workspace-page .tm-card .tm-body h3 > span { display: inline-block; margin-left: 6px; vertical-align: middle; }
.workspace-page .tm-dropdown { position: relative; top: auto; right: auto; flex-shrink: 0; }
.workspace-page .tm-options { position:absolute; display:block; top:calc(100% + 6px); right:0; margin:0; width:180px; min-width:140px; clip-path:none; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .15s ease,transform .15s ease,visibility .15s; box-shadow:var(--shadow); }
.workspace-page .tm-dropdown.open .tm-options { visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); }
.builder-view-options { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px; scroll-margin-top:84px; }
.workspace-page .builder-view-options button[aria-pressed="true"] { background:var(--primary) !important; color:var(--surface) !important; border-color:var(--primary) !important; }
.workspace-page #template-form.builder-guided > section { margin:0; height:clamp(240px,calc(100svh - 380px),480px); overflow:auto; overscroll-behavior:contain; }
.builder-step-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:20px; margin-top:20px; border-top:1px solid var(--border); }
.builder-step-controls span { color:var(--muted); font-size:14px; text-align:center; }
.builder-step-controls button:disabled { opacity:.4; cursor:default; }
@media(prefers-reduced-motion:reduce) { .workspace-page .tm-options { transition:none; } }
.workspace-page .tm-button { min-height: 40px; min-width: 110px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); padding: 8px 12px; }
.workspace-page .tm-button .tm-label-text { font-size: 14px; }
.workspace-page .tm-options { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: 4px; }
.workspace-page .tm-option { font-size: 14px; }
.workspace-page .site-footer { margin-top: 44px; }
.workspace-page.auth-page::before,.workspace-page.auth-page::after { display: none; }
.workspace-page .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
.workspace-page .login-header h2 { color: var(--text); letter-spacing: -.03em; }
.workspace-page .login-header p { color: var(--muted); }
.workspace-page .login-header .brand-logo { width: 60px; height: 60px; margin-bottom: 16px; }
.workspace-page .login-header .brand-logo img { width: 60px; }
.workspace-page .close-login { color: var(--text); }
.workspace-page .material-btn { background: var(--primary); color: var(--surface); box-shadow: none; text-transform: none; font-size: 16px; }
.workspace-page .forgot-password { color: var(--primary); text-transform: none; }
.workspace-page .input-wrapper label { color: var(--muted); }
.workspace-page .input-wrapper input { color: var(--text); background: var(--surface); }
.contact-public { margin-top: 24px; padding: 20px 0; border-top: 1px solid var(--border); color: var(--muted); }
.contact-public h2 { margin-bottom: 8px; font-size: 18px; color: var(--text); }
.contact-layout { display: block; }
.contact-form-panel > h2 { margin-bottom: 20px; }
.contact-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
.contact-fields > * { min-width: 0; }
.contact-fields label { display: block; margin-bottom: 6px; }
.contact-wide-field { grid-column: 1 / -1; }
.contact-fields textarea { display: block; resize: vertical; }
.contact-fields > button { justify-self: start; }
.contact-fields #contact-status:empty { display: none; }
.contact-next { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 24px; }
.workspace-page .contact-next h2 { font-size: 18px; margin-bottom: 8px; }
.contact-next p { color: var(--muted); }
@media(max-width:600px) {
  .contact-fields { grid-template-columns: 1fr; gap: 16px; }
}
/* Vertical order matches the up/down controls; compact choices stay easy to tap. */
.workspace-page #template-form { gap: 20px; }
.workspace-page #template-form > section + section { margin-top: 20px; }
.workspace-page :is(#rating-fields-list,#improvement-areas-list) { grid-template-columns: 1fr !important; gap: 6px; }
.workspace-page :is(#rating-fields-list,#improvement-areas-list) > div { padding: 6px 10px; }
.workspace-page #template-form > section { padding: 20px; }
.workspace-page :is(#languages-checkboxes,#character-traits-checkboxes) { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px 14px; }
.workspace-page :is(#languages-checkboxes,#character-traits-checkboxes) .custom-checkbox-container { min-width: 0; margin: 0; padding: 0; min-height: 40px; }
.workspace-page :is(#languages-checkboxes,#character-traits-checkboxes) .custom-checkbox-label { min-height: 40px; width: 100%; margin: 0; padding-left: 28px; }
.workspace-page :is(#languages-checkboxes,#character-traits-checkboxes) .custom-checkbox-text { min-width: 0; overflow-wrap: anywhere; white-space: normal; font-size: 15px; line-height: 1.3; }
@media(max-width:900px) { .workspace-page :is(#languages-checkboxes,#character-traits-checkboxes) { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
 .workspace-page :is(#languages-checkboxes,#character-traits-checkboxes) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 10px; }
 .workspace-page #template-form > section { padding: 16px; }
 .workspace-page :is(#rating-fields-list,#improvement-areas-list) > div { gap:4px; padding:6px; }
 .workspace-page :is(#rating-fields-list,#improvement-areas-list) button { width:28px; min-width:28px; height:32px; }
 .workspace-page :is(#rating-fields-list,#improvement-areas-list) .drag-handle svg { width:16px; height:16px; }
}
@media(max-width:900px) {
  .workspace-page #templates-list,.workspace-page #rating-fields-list,.workspace-page #improvement-areas-list { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
  .workspace-page .home-card-wrap { margin-top: 18px !important; padding-inline: 12px; }
  .workspace-page main { padding: 18px; }
  .workspace-page main h1 { font-size: 27px; }
  .workspace-page main h2 { font-size: 21px; }
  .workspace-page main .p-6 { padding: 16px; }
  .workspace-page #dynamic-form-fields { gap: 24px; }
  .workspace-page .tm-card { padding: 18px; }
  .workspace-page .tm-card > div { grid-template-columns: minmax(0, 1fr); }
  .workspace-page main > div:first-child { padding-bottom: 18px; }
}