/* UI quality layer
   Loaded after calculator.css to normalize responsive behavior, bilingual text expansion,
   and dense control groups without rewriting the calculator-specific visual language. */

:root{
  --ui-control-min-height:44px;
  --ui-control-radius:10px;
  --ui-gap-1:8px;
  --ui-gap-2:12px;
  --ui-gap-3:16px;
  --ui-focus-ring:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent);
}

button,
input,
select,
textarea{
  font:inherit;
}

button,
.tool-item,
.category-tool,
.consent-actions button,
.formula-detail-actions button,
.mathlab-actions button{
  max-inline-size:100%;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  box-shadow:var(--ui-focus-ring);
}

.site-header{
  gap:var(--ui-gap-2);
  min-width:0;
}

.site-brand{
  min-width:0;
}

.site-brand>div{
  min-width:0;
}

.site-brand h1,
.site-brand small{
  overflow-wrap:anywhere;
}

.site-actions{
  flex:0 0 auto;
}

#lang-toggle,
.sidebar-toggle{
  min-inline-size:44px;
  min-block-size:44px;
}

.workspace-shell,
.center-column,
.tool-page,
.page-section,
.mathlab-layout,
.mathlab-editor-panel,
.mathlab-results{
  min-width:0;
}

.tool-sidebar{
  min-width:0;
}

.tool-item,
.tool-item-static{
  min-block-size:44px;
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
}

.tool-item .tool-icon,
.tool-item-static .tool-icon{
  flex:0 0 1.5rem;
  text-align:center;
}

.tool-group-title{
  overflow-wrap:anywhere;
}

.category-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}

.category-card,
.formula-card,
.date-grid section,
.ramp-panel,
.mathlab-editor-panel,
.mathlab-results section{
  min-width:0;
}

.category-tool,
.formula-detail-actions button,
.mathlab-actions button,
.consent-actions button{
  min-block-size:var(--ui-control-min-height);
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Math Lab example browser */
.mathlab-example-browser{
  display:grid;
  gap:var(--ui-gap-2);
  margin-block-end:var(--ui-gap-2);
}

.mathlab-example-browser-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--ui-gap-2);
  flex-wrap:wrap;
}

.mathlab-example-browser-head strong{
  font-size:.95rem;
}

.mathlab-example-browser-head span{
  color:var(--muted);
  font-size:.8rem;
  line-height:1.4;
}

.mathlab-example-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ui-gap-1);
}

.mathlab-example-group{
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--ui-control-radius);
  background:var(--panel);
  overflow:clip;
}

.mathlab-example-group summary{
  min-block-size:44px;
  display:flex;
  align-items:center;
  cursor:pointer;
  padding:9px 12px;
  font-weight:700;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.mathlab-example-group[open] summary{
  border-block-end:1px solid var(--line);
}

.mathlab-example-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:7px;
  padding:9px;
}

.mathlab-example-grid button{
  min-width:0;
  min-block-size:44px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  color:var(--text);
  padding:8px 10px;
  line-height:1.25;
  text-align:start;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}

.mathlab-example-grid button:hover{
  background:color-mix(in srgb,var(--panel) 88%,var(--focus));
}

.mathlab-command-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}

.mathlab-command-grid p,
.mathlab-command-grid code{
  min-width:0;
}

.mathlab-command-grid code{
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
}

/* Form and action layouts */
.formula-detail-actions,
.mathlab-actions,
.consent-actions,
.graph-actions{
  flex-wrap:wrap;
}

.formula-detail-actions>*,
.mathlab-actions>*,
.consent-actions>*{
  flex:0 1 auto;
}

.converter-card,
.ramp-design-grid,
.ramp-grid,
.graph-controls,
.programmer-grid,
.date-grid,
.formula-controls{
  min-width:0;
}

.converter-card>*,
.ramp-design-grid>*,
.ramp-grid>*,
.graph-controls>*,
.programmer-grid>*,
.date-grid>*,
.formula-controls>*{
  min-width:0;
}

input,
select,
textarea{
  max-inline-size:100%;
}

.graph-actions button{
  white-space:normal;
}

/* Bidirectional safety */
html[dir="rtl"] .tool-item,
html[dir="rtl"] .category-tool,
html[dir="rtl"] .mathlab-example-grid button{
  text-align:start;
}

html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] textarea[dir="ltr"],
html[dir="rtl"] .converter-result,
html[dir="rtl"] .programmer-result,
html[dir="rtl"] .advanced-result-meta{
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
}

html[dir="rtl"] .mathlab-example-browser-head{
  text-align:start;
}

/* Responsive density */
@media(max-width:1100px){
  .mathlab-example-groups{
    grid-template-columns:1fr;
  }
}

@media(max-width:900px){
  .site-header{
    align-items:flex-start;
  }

  .tool-sidebar{
    left:10px;
    right:10px;
    width:auto;
  }

  .mathlab-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .formula-detail-actions,
  .mathlab-actions,
  .consent-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .formula-detail-actions>*,
  .mathlab-actions>*,
  .consent-actions>*{
    width:100%;
  }

  .converter-card,
  .graph-controls,
  .programmer-grid,
  .date-grid,
  .formula-controls,
  .ramp-grid,
  .ramp-design-grid{
    grid-template-columns:1fr;
  }

  .graph-controls .graph-expression-field,
  .graph-actions,
  .ramp-grid .advanced-solve,
  .ramp-design-grid .advanced-solve{
    grid-column:auto;
  }
}

@media(max-width:520px){
  .site-header{
    padding-inline:10px;
  }

  .tool-page{
    padding:10px;
  }

  .mathlab-example-grid{
    grid-template-columns:1fr;
  }

  .mathlab-example-browser-head{
    display:grid;
  }

  .mathlab-editor-panel textarea{
    min-height:220px;
  }
}

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


/* 2026-10-01 workflow refinement */
.tool-search{
  position:sticky;
  inset-block-start:0;
  z-index:3;
  padding-block-end:8px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
}
.tool-group{
  border-block-start:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  padding-block-start:6px;
}
.tool-group:first-of-type{border-block-start:0}
.tool-group-title.tool-group-toggle{
  width:100%;
  min-block-size:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:5px 9px;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.035em;
  text-align:start;
  cursor:pointer;
}
.tool-group-title.tool-group-toggle::after{
  content:"▾";
  font-size:.8rem;
  transition:transform .16s ease;
}
.tool-group.is-collapsed .tool-group-title.tool-group-toggle::after{transform:rotate(-90deg)}
html[dir="rtl"] .tool-group.is-collapsed .tool-group-title.tool-group-toggle::after{transform:rotate(90deg)}
.tool-group.is-collapsed > :not(.tool-group-title){display:none}
.tool-group:has(.tool-item.active) .tool-group-title.tool-group-toggle{color:var(--text)}

.mathlab-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.mathlab-editor-panel{
  display:grid;
  gap:12px;
}
.mathlab-example-browser{
  max-block-size:340px;
  overflow:auto;
  overscroll-behavior:contain;
  padding-inline-end:2px;
}
.mathlab-example-browser-head{
  position:sticky;
  inset-block-start:0;
  z-index:2;
  padding-block:2px 8px;
  background:color-mix(in srgb,var(--panel) 97%,var(--page));
}
.mathlab-example-groups{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.mathlab-editor-panel textarea{
  min-height:360px;
}
.mathlab-command-reference{
  order:5;
}
.mathlab-actions{
  order:3;
}
#mathlab-status{
  order:4;
}
.mathlab-results{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.mathlab-results > section:first-child{
  grid-column:1/-1;
}
.mathlab-results pre{
  min-height:220px;
  max-height:420px;
}
.ramp-match-note{
  margin-block-start:10px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--page);
}
.ramp-match-note[hidden]{display:none}

@media(max-width:760px){
  .mathlab-example-groups{grid-template-columns:1fr}
  .mathlab-example-browser{max-block-size:300px}
  .mathlab-results{grid-template-columns:1fr}
  .mathlab-results > section:first-child{grid-column:auto}
  .mathlab-editor-panel textarea{min-height:280px}
}

@media(prefers-reduced-motion:reduce){
  .tool-group-title.tool-group-toggle::after{transition:none}
}


/* Math Lab quick examples stay collapsed on first load. */
.mathlab-example-browser > summary.mathlab-example-browser-head{
  cursor:pointer;
  list-style:none;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
}
.mathlab-example-browser > summary.mathlab-example-browser-head::-webkit-details-marker{display:none}
.mathlab-example-browser > summary.mathlab-example-browser-head::after{
  content:"▾";
  font-size:.82rem;
  color:var(--muted);
  transition:transform .16s ease;
}
.mathlab-example-browser:not([open]) > summary.mathlab-example-browser-head::after{transform:rotate(-90deg)}
html[dir="rtl"] .mathlab-example-browser:not([open]) > summary.mathlab-example-browser-head::after{transform:rotate(90deg)}
.mathlab-example-browser:not([open]){
  max-block-size:none;
  overflow:visible;
}
.mathlab-example-browser[open]{
  max-block-size:340px;
  overflow:auto;
}
@media(max-width:760px){
  .mathlab-example-browser[open]{max-block-size:300px}
}
@media(prefers-reduced-motion:reduce){
  .mathlab-example-browser > summary.mathlab-example-browser-head::after{transition:none}
}

/* Simplified navigation: four obvious tools, with the full library in the sidebar. */
.quick-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:10px 0 16px;max-width:100%}
.quick-actions button{flex:1 1 135px;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--panel);color:var(--text);font-weight:650;line-height:1.3}
.quick-actions button[aria-pressed="true"]{background:color-mix(in srgb,var(--focus) 13%,var(--panel));border-color:var(--focus);font-weight:800}
.quick-actions button:hover{border-color:var(--focus)}
@media(max-width:520px){.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.quick-actions button{font-size:.86rem;padding:9px 7px}}

/* One research task at a time. Native details keeps inputs available without loading JS UI widgets. */
.research-disclosure{min-width:0}
.research-disclosure-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:44px;cursor:pointer;list-style:none}
.research-disclosure-summary::-webkit-details-marker{display:none}
.research-disclosure-summary h3{margin:0;line-height:1.35}
.research-disclosure-summary::after{content:"▾";font-size:.95rem;color:var(--muted);flex:0 0 auto;transition:transform .16s ease}
.research-disclosure:not([open])>.research-disclosure-summary::after{transform:rotate(-90deg)}
html[dir="rtl"] .research-disclosure:not([open])>.research-disclosure-summary::after{transform:rotate(90deg)}
.research-disclosure>p{margin:4px 0 14px;color:var(--muted);line-height:1.5}
.research-disclosure[open]>.research-disclosure-summary{margin-block-end:6px}
.research-card:has(.research-disclosure:not([open])){padding-block:8px}
@media(prefers-reduced-motion:reduce){.research-disclosure-summary::after{transition:none}}

/* Make the optional slope workflow discoverable without duplicating the initial form. */
.ramp-advanced-disclosure{margin-block-start:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.ramp-advanced-disclosure>summary{cursor:pointer;min-block-size:48px;padding:12px 14px;font-weight:800;list-style:none;display:flex;align-items:center;justify-content:space-between}
.ramp-advanced-disclosure>summary::-webkit-details-marker{display:none}
.ramp-advanced-disclosure>summary::after{content:"▾";color:var(--muted)}
.ramp-advanced-disclosure:not([open])>summary::after{transform:rotate(-90deg)}
html[dir="rtl"] .ramp-advanced-disclosure:not([open])>summary::after{transform:rotate(90deg)}
.ramp-advanced-disclosure>.ramp-panel{margin:0;border:0;border-block-start:1px solid var(--line);border-radius:0}

/* Fast, readable lecture entry; keep the classic keypad available beneath. */
.calculator-direct-entry{display:grid;align-items:stretch;gap:5px;color:#f5f9ff}
.calculator-direct-entry .direct-entry-label{font-size:.73rem;font-weight:700;line-height:1.2;opacity:.95}
.calculator-direct-entry .direct-entry-controls{display:flex;align-items:center;gap:7px;min-width:0}
.calculator-direct-entry input{flex:1 1 auto;min-width:0;min-block-size:36px;color:#fff;opacity:1}
.calculator-direct-entry input::placeholder{color:#d8e7f5;opacity:.8}
.calculator-direct-entry .direct-entry-run{flex:0 0 auto;min-block-size:38px;border:1px solid #91b6e1;border-radius:8px;background:#d8e9fd;color:#14375b;padding:6px 10px;font-weight:800;font-size:.8rem;white-space:nowrap}
.calculator-direct-entry .direct-entry-run:hover{background:#f1f7ff}
.calculator-direct-entry input:focus-visible,.calculator-direct-entry .direct-entry-run:focus-visible{outline:2px solid #f5f9ff;outline-offset:2px}
@media(max-width:360px){.calculator-direct-entry .direct-entry-run{padding-inline:7px;font-size:.75rem}}

/* Precision is still configurable but no longer competes with the main unit task. */
.converter-advanced-options{min-width:0}
.converter-advanced-options>summary{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-weight:700;line-height:1.3}
.converter-advanced-options>summary::-webkit-details-marker{display:none}
.converter-advanced-options>summary::after{content:"▾";color:var(--muted);margin-inline-start:8px}
.converter-advanced-options:not([open])>summary::after{transform:rotate(-90deg)}
html[dir="rtl"] .converter-advanced-options:not([open])>summary::after{transform:rotate(90deg)}
.converter-advanced-options>label{margin-block-start:8px}

/* One focused research task per row, reducing two-column card clutter on wide monitors. */
.research-grid{grid-template-columns:minmax(0,1fr);gap:8px;max-width:860px;margin-inline:auto}
.research-card{min-width:0}

/* Visible, bilingual recovery when the sidebar tool search has no matches. */
.tool-search-empty{margin:8px 2px 3px;font-size:.82rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.tool-search-empty[hidden]{display:none}

/* Research CSV input errors are explicit in both English and Arabic; no silent row loss. */
:root{--ui-input-error:#b42318}
@media(prefers-color-scheme:dark){:root{--ui-input-error:#fb7185}}
.research-series-hint{margin:2px 0 10px;font-size:.82rem;line-height:1.5;color:var(--muted)}
.research-card input[aria-invalid="true"]{border-color:var(--ui-input-error);outline:2px solid var(--ui-input-error);outline-offset:1px}