/* ONLY page-specific rules – global calculator.css is untouched */

/* dimension box ------------------------------------------------ */
.dim-inputs       {text-align:center;margin-bottom:20px;}
.dim-inputs label {margin:0 10px;font-weight:500;}
.dim-inputs input {width:60px;padding:4px;font-size:1rem;text-align:center;}
.dim-inputs button{padding:2px 6px;font-size:.8rem;cursor:pointer;border-radius:4px;}

/* matrices layout --------------------------------------------- */
.matrices-area{display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.matrix-block{text-align:center;margin:0 10px;}
.matrix-title{margin-bottom:8px;font-weight:600;}
.operator{font-size:2rem!important;margin:0 20px;display:flex;align-items:center;justify-content:center;}

/* matrix brackets & cells ------------------------------------- */
.matrix-wrapper{
  --cell-size:40px;              /* JS overwrites */
  display:inline-block;position:relative;padding:8px;vertical-align:middle;
}
.matrix-wrapper table{border-collapse:separate;border-spacing:1px;}
.matrix-cell{width:var(--cell-size);height:var(--cell-size);padding:0;border:1px solid #999;box-sizing:border-box;}
.cell-input{width:100%;height:100%;border:none;padding:0;margin:0;text-align:center;font-size:1rem;background:transparent;outline:none;box-sizing:border-box;}
.matrix-wrapper::before,
.matrix-wrapper::after{content:"";position:absolute;top:0;bottom:0;width:4px;border-top:2px solid #333;border-bottom:2px solid #333;}
.matrix-wrapper::before{left:0;border-left:2px solid #333;border-radius:4px 0 0 4px;}
.matrix-wrapper::after {right:0;border-right:2px solid #333;border-radius:0 4px 4px 0;}

/* answer line -------------------------------------------------- */
.answer-box{margin-bottom:16px;display:flex;align-items:center;gap:8px;font-weight:bold;text-align:left;}
.answer-box strong{font-weight:700;}

/* hover colour for Solve button (class already in global css) */
.solve-button:hover{background-color:#2980b9;}