# css_components.py - Docs/practice components and utilities
"""CSS chunk: icons, howto, result title, unified colors."""

CSS_COMPONENTS = """
/* Icons accents (global) */
i.fa-dice{color:#a78bfa!important;} i.fa-magnifying-glass{color:#34d399!important;} i.fa-brain{color:#fbbf24!important;} i.fa-rocket{color:#f87171!important;} i.fa-trophy{color:#d4af37!important;}

/* Headings and text */
.docs-sec h3,.practice-tabs h3{ font-size:22px!important; font-weight:900!important; color:var(--text)!important; margin:0 0 6px 0!important; }
.docs-sec h4,.practice-tabs h4{ font-size:18px!important; font-weight:800!important; color:var(--text)!important; margin:0 0 4px 0!important; }
.docs-sec p,.docs-sec li,.practice-tabs p,.practice-tabs li{ font-size:15px!important; color:var(--text)!important; }

/* How-to box */
.howto{
  border-left:4px solid var(--acc2); outline:1px solid rgba(255,255,255,.14); border-radius:12px; padding:10px 14px; margin-top:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); box-shadow:var(--shadow);
  /* dynamic width based on content */
  display:inline-block!important; width:auto!important; max-width:100%!important; min-width:280px!important;
}
.howto h4{ margin:0 0 6px 0; font-size:18px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:4px; }
.howto ol{ margin:0; padding-left:1.2em; list-style:decimal; }
.howto li{ margin:8px 0; padding-bottom:6px; border-bottom:1px dashed rgba(255,255,255,.15); }
.howto li:last-child{ border-bottom:none; padding-bottom:0; }
.howto .step-title{ color:var(--acc2)!important; font-weight:800!important; display:block!important; margin-bottom:2px; }
.howto .step-desc{ color: rgba(237,242,247,.85)!important; line-height:1.85!important; }
/* How-to substeps (auto-numbered as "X-Y.") */
.howto > ol{ counter-reset: step; }
.howto > ol > li{ counter-increment: step; }
.howto .substeps{ counter-reset: sub; list-style:none!important; margin:6px 0 4px 1.4em!important; padding-left:0!important; }
.howto .substeps > li{ counter-increment: sub; margin:4px 0!important; }
.howto .substeps > li::before{
  content: counter(step) "-" counter(sub) ". ";
  color:#60a5fa; font-weight:800; margin-right:6px;
}
.howto .substep-title{ font-weight:800; color:#60a5fa!important; display:inline!important; margin:0!important; }
.howto .substep-desc{ color: rgba(237,242,247,.85)!important; display:block!important; margin:4px 0 6px 0!important; }
/* Add a bit more spacing for manual line breaks inside how-to boxes */
.howto .step-desc br{ display:block!important; margin:18px 0!important; }
.howto br{ display:block!important; margin:16px 0!important; }
/* Ensure higher specificity inside docs/practice scopes */
.docs-sec .howto .step-desc br{ display:block!important; margin:18px 0!important; }
.practice-tabs .howto .step-desc br{ display:block!important; margin:18px 0!important; }

/* Variants */
.howto.info{ border-left-color:#38bdf8!important; background:linear-gradient(180deg,rgba(56,189,248,.12),rgba(56,189,248,.05))!important; }
.howto.success{ border-left-color:#10b981!important; background:linear-gradient(180deg,rgba(16,185,129,.12),rgba(16,185,129,.05))!important; }
.howto.warning{ border-left-color:#f59e0b!important; background:linear-gradient(180deg,rgba(245,158,11,.14),rgba(245,158,11,.06))!important; }
.howto.note{ border-left-color:#a78bfa!important; background:linear-gradient(180deg,rgba(167,139,250,.14),rgba(167,139,250,.06))!important; }
.howto h4 i{ color:#60a5fa!important; background: rgba(96,165,250,.22); border-radius:999px; padding:6px; position:relative; text-shadow:0 1px 0 rgba(0,0,0,.25); }
/* Override variant-specific icon colors to match list number color */
.howto.info h4 i, .howto.success h4 i, .howto.warning h4 i, .howto.note h4 i{ color:#60a5fa!important; }
.howto ol li::marker{ color:#60a5fa; font-weight:900; }
.howto::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg, #60a5fa, #3b82f6); border-top-left-radius:12px; border-top-right-radius:12px; }

/* Results title */
.result-title{ color:#60a5fa!important; font-weight:900!important; margin: 4px 0 8px 0!important; display:flex!important; align-items:center!important; gap:8px!important; text-shadow:0 1px 0 rgba(0,0,0,.25)! }
.result-title i{ color:#60a5fa!important; }

/* Total result button and table sizing */
/* Total button: make the wrapper and inner button stretch up to a sensible max */
.total-btn{ width:100%!important; max-width:360px!important; margin: 4px 0!important; }
.total-btn .gr-button, .total-btn button, .total-btn [role="button"], .total-btn > *{
  width:100%!important; max-width:360px!important;
}

/* Total table: constrain overall width and center it */
.total-table{ width:100%!important; max-width:720px!important; margin-left:auto!important; margin-right:auto!important; }
.total-table .gradio-dataframe, .total-table .wrap, .total-table [data-testid="dataframe"], .total-table [data-testid="dataframe"] > div{
  width:100%!important; max-width:720px!important; margin-left:auto!important; margin-right:auto!important;
}

/* Icon color for persona wish heading */
.practice-tabs i.fa-clipboard-list{ color:#60a5fa!important; }
.practice-tabs i.fa-braille{ color:#60a5fa!important; }
.practice-tabs i.fa-hourglass-start{ color:#f59e0b!important; }

/* Fix radio text alignment (avoid right-align within button area) */
.practice-tabs .gr-radio, .practice-tabs .gr-radio *{ text-align:left!important; justify-content:flex-start!important; }


/* Methods page: make icons follow surrounding text color */
.docs-sec .howto h4 i{ color:currentColor!important; background:transparent!important; text-shadow:none!important; }
.docs-sec .howto h4{ color:var(--text)!important; }
"""