@layer components{.phonology-table-scroll{width:100%;overflow-x:auto}table.phonology-table{border-spacing:0;border-collapse:separate;border:var(--border);border-radius:var(--rounding);width:var(--width-page);background-color:var(--background-panel);margin-block:1rem;overflow:hidden;& caption{font-family:var(--font-heading);padding-bottom:.25rem;font-size:1.25rem}& th{font-family:var(--font-heading);background-color:var(--background-intermediate);text-align:center;padding:.5rem;font-size:.875rem;font-weight:450;&.row{text-align:right;max-width:min-content}}& :focus-visible{outline:none}& th,& td{border:var(--border);outline-color:#0000;transition:outline .1s}& td{text-align:center;padding:.5rem}& thead tr:first-child th:first-child{border-top-left-radius:var(--rounding)}& thead tr:first-child th:last-child{border-top-right-radius:var(--rounding)}& tbody,& tbody tr:last-child,& tbody tr:last-child th.row{border-bottom-left-radius:var(--rounding)}& tbody,& tbody tr:last-child,& tbody tr:last-child td:last-child{border-bottom-right-radius:var(--rounding)}&.focus-inside-table{& .focused{outline:2px solid var(--color-sky-300);outline-offset:-2px}& .col-focused,& .row-focused,& .cell-focused{background-color:var(--background-intermediate)}}& .selected{outline:2px solid var(--color-sky-500);outline-offset:-2px;background-color:var(--background-intermediate)}& .select-edge-top{border-top:2px solid var(--color-sky-500)}& .select-edge-bottom{border-bottom:2px solid var(--color-sky-500)}& .select-edge-left{border-left:2px solid var(--color-sky-500)}& .select-edge-right{border-right:2px solid var(--color-sky-500)}& .annotation{color:var(--foreground-secondary);text-decoration:none}}h3.annotations-header{font-family:var(--font-heading);margin-block:.5rem .25rem;margin-left:.25rem;font-size:1rem}ol.annotations,ol.annotations li{list-style:decimal}ol.annotations{flex-direction:column;gap:.25rem;padding-left:1.75rem;display:flex;&:not(.empty){margin-bottom:1.4rem}& li{transition:color .2s}& button{text-align:left;&:hover{cursor:pointer;text-decoration:underline;transition:color .1s;color:var(--foreground-accent)!important}}&.has-focused{& li:not(.focused){color:var(--foreground-tertiary)}}}.phonology-editor{user-select:none;& .controls,& .controls-container{flex-direction:row;display:flex}& .controls-container{flex-wrap:wrap;justify-content:center;gap:1rem}& .controls-header{font-family:var(--font-heading);color:var(--foreground-secondary);background-color:var(--background-panel);border-bottom-left-radius:var(--rounding);border-top-left-radius:var(--rounding);border:var(--border);border-right:1px solid var(--input-border);padding:.325rem .75rem;font-size:.9rem}& .control-button{border:1px solid var(--input-border);background:var(--input-background);cursor:pointer;color:var(--foreground-secondary);transition:color .2s, background-color var(--duration-fast) cubic-bezier(.3, 0, .8, .15), opacity var(--duration-fast) cubic-bezier(.3, 0, .8, .15);font-family:var(--font-normal);border-left:1px solid #0000;flex:1;justify-content:center;align-items:center;padding:.325rem .75rem;font-size:.9rem;display:flex;& svg{width:20px;height:20px;color:inherit}:last-child>&{border-top-right-radius:var(--rounding);border-bottom-right-radius:var(--rounding)}&.disabled{cursor:not-allowed;opacity:.5;background-color:#0000}&:not(.disabled):hover{background-color:var(--input-background-focus);border-color:var(--input-border-focus);border-left:1px solid var(--input-border-focus);border-bottom:1px solid var(--input-border-focus)}}& .phoneme+.phoneme{padding-left:.5rem}}.help-content{flex-direction:column;gap:1rem;max-height:50vh;padding-right:1rem;display:flex;overflow-y:auto;& kbd,& .keybind{font-family:var(--font-monospace);background-color:var(--background-panel);border:var(--border);border-radius:var(--rounding);padding:.25rem .5rem;font-size:.875rem;&+kbd,&+.keybind{margin-left:.5rem}& svg{display:inline}}& .keybind-list{grid-template-columns:max-content 1fr;gap:.5rem;display:grid;& dt{justify-content:flex-end;display:flex}}}}