1/* The system mark: one small button beside the field, wearing the current2 divider's mark, cycling to the next on click -- and inert, not absent,3 when this world divides only one way: a hash without its system is half4 an address. It keeps the navigator's 36px rhythm; the icon type shrinks5 to carry a word-mark instead of a glyph, at the specificity the shared6 button rule would otherwise win. */7.grid-navigator .grid-system {8 color: var(--accent);9 font-size: 10px;10 font-weight: 800;11 letter-spacing: 0.08em;12 text-transform: uppercase;13}1415.grid-navigator .grid-system:disabled {16 color: var(--muted);17 cursor: default;18}1920.grid-navigator {21 position: absolute;22 z-index: 8;23 top: 17px;24 right: 67px;25 display: flex;26 overflow: hidden;27 align-items: stretch;28 border: 1px solid var(--line-strong);29 border-radius: 8px;30 background: rgba(23, 25, 29, 0.94);31 box-shadow: 0 6px 25px rgba(0, 0, 0, 0.22);32}3334.grid-navigator[hidden] {35 display: none;36}3738.grid-navigator button {39 width: 36px;40 padding: 0;41 border: 0;42 border-right: 1px solid var(--line);43 background: transparent;44 color: var(--muted);45 font-size: 17px;46 cursor: pointer;47}4849.grid-navigator button:hover:enabled {50 color: var(--accent);51}5253/* The subgrid toggle sits after the field it belongs to, so its rule divides it54 from the field rather than trailing off the end of the control. */55.subgrid-toggle {56 display: grid;57 border-right: 0;58 border-left: 1px solid var(--line);59 place-items: center;60}6162.subgrid-toggle svg {63 width: 15px;64 fill: none;65 stroke: currentColor;66 stroke-linecap: round;67 stroke-linejoin: round;68 stroke-width: 1.3;69}7071.subgrid-toggle .subgrid-toggle-slash {72 display: none;73}7475.subgrid-toggle[aria-pressed="false"] {76 color: #6d6860;77}7879.subgrid-toggle[aria-pressed="false"] .subgrid-toggle-slash {80 display: inline;81 stroke: currentColor;82 stroke-width: 1.6;83}8485.grid-navigator label {86 display: flex;87 height: 36px;88 align-items: center;89 gap: 7px;90 padding: 0 9px;91 color: var(--muted);92 font-size: 8px;93 font-weight: 800;94 letter-spacing: 0.12em;95 text-transform: uppercase;96}9798.grid-navigator input {99 width: 74px;100 padding: 4px 6px;101 border: 1px solid #3c3833;102 border-radius: 4px;103 outline: none;104 background: #0e1014;105 color: var(--accent);106 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;107 font-size: 12px;108 font-weight: 700;109 letter-spacing: 0.08em;110 text-transform: lowercase;111 -webkit-user-select: text;112 user-select: text;113}114115.grid-navigator input:focus {116 border-color: rgba(58, 165, 201, 0.68);117}118