/* Interactive place-value tray. */

.place-lab {
    margin: 24px 0 8px;
    padding: 22px 24px 24px;
    border: 2px solid #c8d9e7;
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f8fc 100%);
    box-shadow: 0 12px 30px rgba(20, 57, 78, .12);
}

.place-lab__field { display: flex; gap: 14px; align-items: center; }
.place-lab__field span { color: #183b70; font-weight: 700; }

.place-lab__field input {
    width: 190px;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 2px solid #8db0c2;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #173849;
    font: 700 1.15rem ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.place-lab__field input:focus { border-color: #09539d; box-shadow: 0 0 0 4px rgba(9, 83, 157, .14); }

.place-lab__strip {
    display: flex;
    gap: 4px;
    margin: 20px 0 4px;
    align-items: end;
    justify-content: center;
}

.place-lab__cell {
    display: grid;
    width: 72px;
    padding: 8px 4px 9px;
    gap: 6px;
    border: 2px solid transparent;
    border-radius: 12px;
    justify-items: center;
    transition: border-color .18s ease, background-color .18s ease;
}

.place-lab__cell--whole { background: #eef4ff; }
.place-lab__cell--decimal { background: #fff4e6; }
.place-lab__cell.is-active { border-color: #3568b8; background: #fff; }
.place-lab__cell.is-empty .place-lab__digit { color: #a8b5bf; }

.place-lab__place { min-height: 2.2em; color: #405660; font: 700 .62rem/1.1 Aleo, serif; text-align: center; }
.place-lab__digit { color: #183b70; font: 700 1.7rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.place-lab__unit { color: #7c8d96; font: 700 .6rem/1 Aleo, serif; }
.place-lab__cell--decimal .place-lab__place,
.place-lab__cell--decimal .place-lab__unit { color: #8a6a4a; }
.place-lab__cell--decimal .place-lab__digit { color: #7a3c09; }
.place-lab__cell--point { width: 22px; padding-right: 0; padding-left: 0; background: none; }
.place-lab__cell--point .place-lab__digit { color: #b86821; font-family: Aleo, serif; font-size: 2rem; }

.place-lab__parts { display: grid; gap: 2px; margin: 16px 0 0; padding: 0; list-style: none; }

.place-lab__parts li {
    padding: 8px 12px;
    border-radius: 10px;
    color: #29444f;
    font-size: .95rem;
    line-height: 1.5;
    transition: background-color .18s ease;
}

.place-lab__parts li + li { border-top: 1px solid #e2ebf0; }
.place-lab__parts li.is-active { background: #e8f2f9; }
.place-lab__parts b { color: #183b70; }
.place-lab__parts strong { color: #09539d; }
.place-lab__holder { color: #62757e; }
.place-lab__holder b { color: #8b9aa3; }

.place-lab__words {
    margin: 16px 0 0;
    padding: 14px 18px;
    border: 2px solid #d5e1e9;
    border-radius: 14px;
    background: #fff;
    color: #29444f;
    line-height: 1.5;
}

.place-lab__words strong { color: #09539d; }

@media (prefers-reduced-motion: reduce) {
    .place-lab__cell,
    .place-lab__parts li,
    .place-lab__field input { transition: none; }
}

/* Rewriting the decimal parts over a common place. */

.fraction-bridge {
    display: grid;
    gap: 10px;
    margin: 22px 0;
    padding: 20px 24px 18px;
    justify-items: center;
    border: 2px solid #e4ccb3;
    border-radius: 18px;
    background: #fffaf3;
}

.fraction-bridge__line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.fraction-bridge__sign { color: #b86821; font-size: 1.3rem; font-weight: 700; }
.fraction-bridge__note { margin: 0; color: #8a6a4a; font-size: .84rem; font-weight: 700; text-align: center; }
.fraction-bridge__note span { display: block; font-size: 1.1rem; line-height: 1; }
.fraction-bridge figcaption { margin-top: 4px; color: #52666f; font-size: .9rem; text-align: center; }

.fraction {
    display: grid;
    padding: 4px 10px;
    gap: 3px;
    justify-items: center;
    color: #7a3c09;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.fraction b { font-size: 1.2rem; }
.fraction i { padding-top: 3px; border-top: 2px solid #b86821; font-size: 1.2rem; font-style: normal; }
.fraction--total { border-radius: 10px; background: #fff1dd; color: #7a3c09; }