/* ============================================================
   Utilities Bunker — Braille Converter v2.1
   File: /assets/css/modules/convert/braille-converter.v2.1.css
   Purpose:
   - Tool-only styling for Braille Converter
   - Keeps layout uniform with UB v2.1 / Ohm's Law structure
   - Mobile-first, accessible, performance-focused
   - No changes to ub-toolkit.v2.1.css
   ============================================================ */

:root{
  --braille-radius: 16px;
  --braille-gap: 14px;
  --braille-soft: rgba(0,0,0,.06);
  --braille-soft-2: rgba(0,0,0,.04);
  --braille-ring: rgba(249,58,19,.16);
}

html.ub-theme-dark:root{
  --braille-soft: rgba(255,255,255,.08);
  --braille-soft-2: rgba(255,255,255,.04);
  --braille-ring: rgba(249,58,19,.22);
}

/* Page head */
.braille-page-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.braille-h1{
  margin:0;
  font-size:var(--ub-fs-5);
}

.braille-subtitle{
  margin:6px 0 0;
  max-width:72ch;
}

/* How-to */
.braille-howto{
  margin:0;
  padding-left:18px;
}

.braille-howto li + li{
  margin-top:6px;
}

/* Main tool layout */
.braille-tool-wrap{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(280px, .9fr);
  gap:var(--braille-gap);
  align-items:start;
}

@media (max-width: 1024px){
  .braille-tool-wrap{
    grid-template-columns:1fr;
  }
}

.braille-panel{
  min-width:0;
}

.braille-panel--main{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.braille-panel--side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Mode bar */
.braille-modebar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.braille-modebar .ub-chip{
  min-height:44px;
  padding:10px 14px;
}

.braille-modebar .ub-chip[aria-pressed="true"]{
  border-color:rgba(249,58,19,.55);
  box-shadow:0 0 0 4px var(--braille-ring);
}

/* Input / output grid */
.braille-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

@media (max-width: 820px){
  .braille-grid{
    grid-template-columns:1fr;
  }
}

.braille-grid .ub-field{
  min-width:0;
}

.braille-grid textarea{
  min-height:240px;
  resize:vertical;
  line-height:1.5;
}

.braille-output{
  font-family:var(--ub-mono);
  letter-spacing:.02em;
}

/* Actions */
.braille-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.braille-actions .ub-btn{
  min-height:44px;
}

@media (max-width: 640px){
  .braille-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 420px){
  .braille-actions{
    grid-template-columns:1fr;
  }
}

/* Status */
.braille-status-wrap{
  min-height:0;
}

/* Side mini cards */
.braille-mini-card{
  margin-bottom:0;
}

.braille-option-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.braille-chip-control{
  justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  width:100%;
  min-height:44px;
}

.braille-chip-control input[type="checkbox"]{
  flex:0 0 auto;
}

/* Reference grid */
.braille-ref-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

@media (max-width: 420px){
  .braille-ref-grid{
    grid-template-columns:1fr 1fr;
  }
}

.braille-ref-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--ub-border);
  border-radius:14px;
  background:var(--ub-surface-2);
  min-height:44px;
  font-weight:900;
}

.braille-glyph{
  font-family:var(--ub-mono);
  font-size:20px;
  line-height:1;
}

/* Side list */
.braille-side-list{
  margin:0;
  padding-left:18px;
}

.braille-side-list li + li{
  margin-top:8px;
}

/* Details box */
.braille-details{
  margin-top:14px;
}

#detailsBox{
  font-family:var(--ub-mono);
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* FAQ */
.braille-faq-q{
  margin:12px 0 6px;
  font-size:var(--ub-fs-2);
}

.braille-faq-a{
  margin:0 0 10px;
}

.braille-faq-a:last-child{
  margin-bottom:0;
}

/* Rail polish */
.ub-rail .ub-btn--block{
  width:100%;
}

/* Better spacing on common card list if page is dense */
.ub-card.ub-common .ub-common-list li{
  font-size:13px;
}

/* Focus polish */
.braille-modebar .ub-chip:focus-visible,
.braille-chip-control:focus-within,
.braille-ref-item:focus-within,
.braille-actions .ub-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
}

/* Textarea visual polish */
.braille-grid textarea{
  background:var(--ub-surface-1);
  border:1px solid var(--ub-border);
  border-radius:var(--ub-radius-1);
  box-shadow:inset 0 1px 0 var(--braille-soft-2);
}

.braille-grid textarea[readonly]{
  background:var(--ub-surface-2);
}

/* Output emphasis */
#brailleOutput{
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* KPI grid on small screens */
#liveOut .ub-out-grid{
  align-items:start;
}

/* Mobile tightening */
@media (max-width: 520px){
  .braille-page-head{
    align-items:stretch;
  }

  .braille-page-head > *{
    width:100%;
  }

  .braille-page-head .ub-btn{
    width:100%;
  }

  .braille-ref-item{
    padding:10px;
  }

  .braille-glyph{
    font-size:18px;
  }
}

/* Large screen polish */
@media (min-width: 1280px){
  .braille-grid textarea{
    min-height:280px;
  }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .braille-modebar .ub-chip,
  .braille-actions .ub-btn,
  .braille-ref-item,
  .braille-chip-control{
    transition:none !important;
  }
}