/* Hallmark · pre-emit critique: P4 H5 E5 S5 R5 V4 */
/* Hallmark · component: guided calculation workspace · genre: modern-minimal · theme: existing zktool
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.calculation-tool form{display:grid;gap:16px}.calculation-result{overflow:auto}.calculation-result-table{width:100%;border-collapse:collapse;background:var(--color-paper)}.calculation-result-table th,.calculation-result-table td{padding:10px 12px;border:1px solid var(--color-rule);text-align:left;vertical-align:top}.calculation-result-table th{width:190px;background:var(--color-paper-2);color:var(--color-ink-2)}.calculation-result-table td{font-variant-numeric:tabular-nums}.calculation-note{margin:10px 0 0;padding:11px 13px;border-left:3px solid var(--color-warning);border-radius:4px;background:var(--color-warning-paper);color:var(--color-warning-ink)}.calculation-check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.calculation-check{display:flex;align-items:center;gap:7px;padding:9px;border:1px solid var(--color-rule);border-radius:5px;background:var(--color-paper)}.calculation-check input{width:auto}.calculation-table-wrap{overflow:auto}.calculation-rate-table{width:100%;border-collapse:collapse}.calculation-rate-table th,.calculation-rate-table td{padding:9px;border:1px solid var(--color-rule);text-align:center}.calculation-rate-table thead th{background:var(--color-paper-2)}.calculation-rate-table input{width:110px;box-sizing:border-box;padding:7px;border:1px solid var(--color-rule-2);border-radius:4px;text-align:right}.relative-chain{min-height:54px;padding:14px;border:1px solid var(--color-rule);border-radius:6px;background:var(--color-paper-2);color:var(--color-accent);font-size:18px;font-weight:700;word-break:break-all}.relative-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.relative-buttons button{padding:10px;border:1px solid var(--color-rule);border-radius:5px;background:var(--color-paper);cursor:pointer}.relative-buttons button:hover{border-color:var(--color-accent);color:var(--color-focus)}@media(max-width:800px){.calculation-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.relative-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:560px){.calculation-result-table th{width:110px}.calculation-check-grid{grid-template-columns:1fr}.relative-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.calculation-rate-table input{width:80px}}

.calculation-tool{
  --color-paper:oklch(100% 0 0);
  --color-paper-2:oklch(97.5% .008 180);
  --color-paper-3:oklch(95% .015 180);
  --color-ink:oklch(27% .018 175);
  --color-ink-2:oklch(40% .025 175);
  --color-muted:oklch(48% .025 175);
  --color-accent:oklch(50% .115 180);
  --color-accent-ink:oklch(100% 0 0);
  --color-focus:oklch(42% .14 180);
  --color-rule:oklch(89% .012 180);
  --color-rule-2:oklch(82% .018 180);
  --color-error:oklch(52% .18 28);
  --color-success:oklch(45% .12 155);
  --color-warning:oklch(68% .14 78);
  --color-warning-paper:oklch(97% .025 78);
  --color-warning-ink:oklch(38% .055 78);
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --radius-sm:.375rem;
  --radius-md:.5rem;
  --dur-short:160ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  min-width:0;
  overflow-x:clip;
  color:var(--color-ink);
}
.layui-card:has(.calculation-tool)>.layui-card-header{
  height:auto;
  min-height:42px;
  padding-block:var(--space-2);
  overflow:visible;
  white-space:normal;
}
.layui-card:has(.calculation-tool)>.layui-card-header h1{
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.3;
}
.calculation-tool form{gap:var(--space-4)}
.calculation-guided-field{min-width:0}
.calculation-guided-field>span{color:var(--color-ink)}
.calculation-guided-field input,.calculation-guided-field textarea,.calculation-guided-field select,.calculator-workbench input{
  min-height:44px;
  border:1px solid var(--color-rule-2);
  outline:2px solid transparent;
  outline-offset:1px;
  background:var(--color-paper);
  color:var(--color-ink);
  padding-inline:var(--space-3) 2.25rem;
}
.calculation-guided-field textarea{min-height:8rem;padding-block:var(--space-3);resize:vertical}
.calculation-guided-field input::placeholder,.calculation-guided-field textarea::placeholder{color:var(--color-muted)}
.calculation-guided-field input:focus-visible,.calculation-guided-field textarea:focus-visible,.calculation-guided-field select:focus-visible,.calculator-workbench input:focus-visible{
  border-color:var(--color-ink-2);
  outline-color:var(--color-focus);
  box-shadow:none;
}
.calculation-guided-field input:disabled,.calculation-guided-field textarea:disabled,.calculation-guided-field select:disabled{
  cursor:not-allowed;
  opacity:.55;
}
.calculation-guided-field input[aria-invalid="true"],.calculation-guided-field textarea[aria-invalid="true"]{border-color:var(--color-error)}
.calculation-guided-field .calculation-helper{
  min-height:1lh;
  color:var(--color-ink-2);
  font-size:.8125rem;
  font-weight:400;
  line-height:1.45;
}
.calculation-formula{
  overflow-wrap:anywhere;
  white-space:normal;
  word-break:break-word;
  padding:var(--space-3) var(--space-4);
  border-inline-start:3px solid var(--color-accent);
  border-radius:var(--radius-sm);
  background:var(--color-paper-2);
  color:var(--color-ink);
  font:700 1rem/1.6 var(--font-mono);
}
.calculation-steps{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-2);
  margin:0;
  padding:0;
  border-block:1px solid var(--color-rule);
  list-style:none;
}
.calculation-steps li{
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  align-items:start;
  gap:var(--space-3);
  min-width:0;
  padding:var(--space-3);
  border-block-end:1px solid var(--color-rule);
  color:var(--color-ink-2);
  line-height:1.6;
}
.calculation-steps li:last-child{border-block-end:0}
.calculation-steps b{
  display:grid;
  width:2rem;
  height:2rem;
  place-items:center;
  border-radius:50%;
  background:var(--color-paper-3);
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.calculation-guided-field select{
  width:100%;
  box-sizing:border-box;
  padding-inline:var(--space-3) 2.25rem;
  border-radius:var(--radius-sm);
}
.calculation-tool [hidden]{display:none!important}
.calculation-tool .browser-message[data-tone="error"]{color:var(--color-error)}
.calculation-tool .browser-message[data-tone="error"]::before{content:"⚠ "}
.calculation-tool .browser-message[data-tone="success"]{color:var(--color-success)}
.calculation-tool .browser-message[data-tone="success"]::before{content:"✓ "}
.calculation-example{
  padding:var(--space-3) var(--space-4);
  border:1px dashed var(--color-rule-2);
  border-radius:var(--radius-sm);
  background:var(--color-paper);
  color:var(--color-muted);
  line-height:1.65;
}
.calculation-set-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-items:center}
.calculation-set-symbol{
  display:grid;
  min-width:44px;
  min-height:44px;
  place-items:center;
  color:var(--color-accent);
  font:800 1.5rem/1 var(--font-mono);
}
.calculation-result-table,.calculation-result-table tbody{display:block}
.calculation-result-table tr{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border:1px solid var(--color-rule);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.calculation-result-table tr+tr{margin-block-start:var(--space-2)}
.calculation-result-table th,.calculation-result-table td{
  width:auto;
  border:0;
  background:var(--color-paper);
  color:var(--color-ink);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.calculation-result-table th{padding-block-end:var(--space-1);background:var(--color-paper-2);color:var(--color-ink-2)}
.calculation-result-table td{padding-block-start:var(--space-2)}
.calculation-note{
  border-color:var(--color-accent);
  background:var(--color-paper-2);
  color:var(--color-ink-2);
}
.calculation-tool .browser-actions button,.calculator-keypad button,.calculator-examples button{
  min-height:44px;
  border:1px solid var(--color-rule-2);
  border-radius:var(--radius-sm);
  outline:2px solid transparent;
  outline-offset:2px;
  background:var(--color-paper);
  color:var(--color-ink);
  white-space:nowrap;
  transition:background-color var(--dur-short) var(--ease-out),transform 100ms var(--ease-out);
}
.calculation-tool .browser-actions button.primary,.calculator-keypad .is-equals{
  border-color:var(--color-accent);
  background:var(--color-accent);
  color:var(--color-accent-ink);
}
.calculation-tool button:focus-visible{
  outline-color:var(--color-focus);
}
.calculation-tool button:active{transform:translateY(1px)}
.calculation-tool button:disabled,.calculation-tool button[aria-disabled="true"],.calculation-tool button[data-state="loading"]{
  cursor:not-allowed;
  opacity:.55;
}
.calculation-tool button[data-state="success"]{border-color:var(--color-success);color:var(--color-success)}
.calculation-tool[data-state="success"] .calculation-guided-field input,.calculation-tool[data-state="success"] .calculation-guided-field textarea{border-color:var(--color-success)}
.calculation-tool[data-state="error"] .browser-message{color:var(--color-error)!important}
.calculation-tool[data-state="error"] .browser-message::before{content:"⚠ "}
.calculation-tool[data-state="success"] .browser-message{color:var(--color-success)!important}
.calculation-tool[data-state="success"] .browser-message::before{content:"✓ "}
.calculator-workbench{display:grid;gap:var(--space-4);max-width:44rem;margin-inline:auto}
.calculator-result{
  display:grid;
  gap:var(--space-1);
  min-height:6rem;
  align-content:center;
  padding:var(--space-4);
  border:1px solid var(--color-rule);
  border-radius:var(--radius-md);
  background:var(--color-paper-2);
  text-align:end;
}
.calculator-result small{color:var(--color-muted)}
.calculator-result output{
  min-width:0;
  overflow-wrap:anywhere;
  color:var(--color-ink);
  font:800 clamp(1.75rem,7vw,2.75rem)/1.2 var(--font-mono);
}
.calculator-examples{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;color:var(--color-muted)}
.calculator-examples button{min-height:36px;padding:var(--space-2) var(--space-3);cursor:pointer}
.calculator-keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.calculator-keypad button{min-height:48px;cursor:pointer;font-size:1.05rem;font-weight:700}
.calculator-keypad .is-operator{background:var(--color-paper-3);color:var(--color-accent)}
.calculator-keypad .is-utility{color:var(--color-error)}
.calculator-keypad .is-equals{grid-column:1/-1}
.calculator-history{display:grid;gap:var(--space-2);padding-block-start:var(--space-3);border-block-start:1px solid var(--color-rule)}
.calculator-history ol{display:grid;gap:var(--space-1);margin:0;padding-inline-start:1.5rem;color:var(--color-muted);font-family:var(--font-mono)}
@media (hover:hover) and (pointer:fine){
  .calculation-guided-field input:not(:disabled):hover,.calculation-guided-field textarea:not(:disabled):hover,.calculation-guided-field select:not(:disabled):hover,.calculator-workbench input:not(:disabled):hover{
    background:var(--color-paper-2);
  }
  .calculation-tool .browser-actions button:hover,.calculator-keypad button:hover,.calculator-examples button:hover{
    background:var(--color-paper-2);
  }
  .calculation-tool .browser-actions button.primary:hover,.calculator-keypad .is-equals:hover{
    background:var(--color-focus);
  }
}
@media (min-width:40rem){
  .calculation-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calculation-steps li{border-block-end:0}
  .calculation-steps li+li{border-inline-start:1px solid var(--color-rule)}
  .calculation-result-table{display:table}
  .calculation-result-table tbody{display:table-row-group}
  .calculation-result-table tr{display:table-row;border:0}
  .calculation-result-table tr+tr{margin-block-start:0}
  .calculation-result-table th,.calculation-result-table td{display:table-cell;border:1px solid var(--color-rule);padding:var(--space-3)}
  .calculation-result-table th{width:12rem}
}
@media (min-width:48rem){
  .calculation-set-layout{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
}
@media (pointer:coarse){
  .calculation-tool button,.calculation-tool input,.calculation-tool select{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  .calculation-tool button{transition-duration:0ms}
}