*{
    box-sizing:border-box
}
body{
    margin:0;
    height:100dvh;
    display:grid;
    grid-template-rows:48px 44px minmax(0,1fr) 48px;
    background:var(--color-bg);
    color:var(--color-text);
    font:var(--font-size-md)/1.2 var(--font-family-sans)
}
button,input,select{
    font:inherit
}
button,input,select,summary{
    border-radius:var(--radius-sm)
}
button{
    min-height:32px;
    padding:4px 10px;
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text);
    cursor:pointer;
    white-space:nowrap
}
button:hover,summary:hover{
    background:var(--color-margin)
}
button:disabled{
    color:var(--color-text-muted);
    cursor:default;
    background:var(--color-bg)
}
button[aria-pressed=true],#open,#welcome-open,#confirm-units,#accept-trace{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:var(--color-surface)
}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible,a:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--color-focus);
    outline-offset:2px
}
input,select{
    background:var(--color-surface);
    color:var(--color-text);
    border:1px solid var(--color-text-muted);
    min-height:32px;
    min-width:0;
    max-width:100%;
    padding:4px 6px
}
input[type=number]{
    font-family:var(--font-family-mono);
    font-size:var(--font-size-xs)
}
input[type=checkbox]{
    min-height:16px;
    width:16px;
    vertical-align:middle;
    accent-color:var(--color-primary)
}
input[readonly]{
    background:var(--color-margin)
}
input[aria-invalid=true]{
    border-color:var(--color-error)
}
label{
    display:block;
    font-size:var(--font-size-sm);
    margin:8px 0
}
a{
    color:var(--color-primary);
    text-underline-offset:3px
}
h1,h2,h3,p{
    margin:0
}
h1{
    font:700 26px/1 var(--font-family-title)
}
h2{
    font-weight:600;
    font-size:14px
}
h3{
    font-size:14px
}
.help,.small{
    font-size:var(--font-size-sm);
    color:var(--color-text-muted);
    line-height:1.35
}
.identity-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 16px;
    border-bottom:1px solid var(--color-border);
    gap:16px
}
.vector-brand{
    display:flex;
    align-items:baseline;
    gap:12px
}
.vector-brand span{
    font-size:12px;
    color:var(--color-text-secondary)
}
.identity-bar nav{
    display:flex;
    align-items:center;
    gap:16px;
    font-size:12px
}
.identity-bar nav a{
    min-height:24px;
    display:inline-flex;
    align-items:center
}
.identity-bar nav button{
    min-height:28px;
    font-size:12px;
    border-color:transparent;
    background:transparent
}
.document-bar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 16px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    background:var(--color-surface);
    border-bottom:1px solid var(--color-border)
}
.document-bar>*{
    flex-shrink:0
}
.bar-rule{
    height:24px;
    width:1px;
    background:var(--color-border)
}
#ortho-open{
    border-color:var(--color-primary)
}
.document-menu{
    position:fixed;
    inset:auto;
    margin:0;
    padding:4px;
    min-width:150px;
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text)
}
.document-menu:popover-open{
    display:grid;
    gap:4px
}
.document-menu button{
    text-align:left;
    border-color:transparent
}
.document-menu::backdrop{
    background:transparent
}
main{
    display:grid;
    grid-template-columns:252px minmax(0,1fr);
    gap:8px;
    min-height:0;
    padding:8px
}
.workspace{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow:hidden
}
aside{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:8px;
    background:var(--color-margin);
    border:1px solid var(--color-border)
}
.navigation-tools,.tools{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px
}
.tools{
    margin-top:4px
}
.tools button{
    padding:4px 6px
}
.tools [data-tool=trace]{
    grid-column:1/-1
}
section{
    border-bottom:1px solid var(--color-border);
    padding-bottom:8px
}
.command-section h2{
    font-size:12px;
    color:var(--color-text-secondary)
}
.tool-context{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px;
    align-items:center
}
.tool-context h2{
    grid-column:1;
    grid-row:1;
    font-size:14px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
#tool-options{
    grid-column:2;
    grid-row:1;
    font-size:12px;
    min-height:28px;
    padding:3px 7px
}
#primary-settings{
    grid-column:1/-1;
    max-height:90px
}
#primary-settings label{
    margin:0;
    font-size:12px
}
#primary-settings .help{
    display:none
}
#polyline-controls label:first-child{
    min-height:20px
}
#polyline-controls label:nth-child(2){
    display:flex;
    align-items:center;
    gap:6px
}
#polyline-interval{
    width:76px;
    min-height:28px;
    padding:3px 5px;
    margin-left:auto
}
#symbol-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) 46px;
    gap:6px
}
#symbol-controls select{
    width:100%;
    display:block;
    min-height:28px;
    margin-top:2px
}
.symbol-preview{
    display:flex;
    align-items:center
}
.symbol-preview canvas{
    background:var(--color-canvas);
    width:46px;
    height:40px
}
#symbol-name{
    display:none
}
#connection-controls label{
    display:flex;
    flex-direction:column;
    gap:2px
}
#connection-width{
    min-height:28px;
    width:100%
}
#wire-help{
    display:block!important;
    font-size:12px;
    line-height:1.25
}
#wire-help[hidden]{
    display:none!important
}
#interval-status:empty{
    display:none
}
#interval-status{
    font-size:11px;
    color:var(--color-error);
    line-height:1.2;
    margin-top:2px
}
#tool-summary{
    grid-column:1/-1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px
}
#tool-summary[hidden]{
    display:none
}
.actions{
    display:flex;
    gap:4px;
    flex-wrap:wrap
}
.tool-context>.actions{
    grid-column:1/-1
}
.selection-region{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    align-items:center
}
.selection-region h2{
    display:none
}
#selected-feature{
    grid-column:1/-1;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
#vertex-strip{
    display:contents
}
#vertex-selection{
    grid-column:1/-1;
    font:11px var(--font-family-mono)
}
#vertex-editor,#delete{
    padding:4px 6px;
    font-size:12px
}
#delete{
    color:var(--color-error)
}
#delete:disabled{
    color:var(--color-text-muted)
}
.rail-rare{
    min-height:0;
    overflow:auto;
    flex:1 1 0
}
details{
    font-size:13px
}
summary{
    cursor:pointer;
    min-height:32px;
    padding:7px 4px;
    border-bottom:1px solid var(--color-border);
    font-weight:600
}
.display-fields{
    padding:4px 0 8px;
    display:grid;
    gap:4px
}
.display-fields label{
    margin:2px 0
}
.display-fields label>select{
    display:block;
    width:100%;
    margin-top:2px
}
.display-fields>button{
    text-align:left
}
.display-fields .help{
    font-size:11px
}
#geometry-list{
    display:grid;
    gap:4px;
    padding:4px 0;
    max-height:150px;
    overflow:auto
}
#geometry-list button{
    text-align:left;
    font-size:12px;
    white-space:normal
}
.selected{
    border-color:var(--color-primary);
    background:var(--color-surface);
    box-shadow:inset 3px 0 var(--color-primary)
}
.capture-strip{
    flex:0 0 48px;
    display:flex;
    gap:12px;
    align-items:center;
    padding:4px 8px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    min-width:0
}
.capture-strip label{
    margin:0;
    font-size:11px;
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:0 1 170px;
    min-width:0
}
.capture-strip select{
    min-height:26px;
    font-size:13px;
    padding:2px 5px;
    width:100%
}
.capture-strip #fixed-wrap{
    flex-basis:145px
}
.capture-strip input{
    min-height:26px;
    padding:2px 5px
}
.capture-strip .help{
    flex:1;
    min-width:80px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px
}
.views{
    min-height:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px
}
.view{
    position:relative;
    min-height:0;
    overflow:hidden;
    background:var(--color-canvas);
    border:1px solid var(--color-primary);
    flex:62 1 0
}
#profile-view{
    flex:38 1 0
}
#profile-view.collapsed{
    flex:0 0 34px
}
.view-heading{
    height:30px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 8px;
    background:var(--color-canvas-header);
    color:var(--color-canvas-text);
    white-space:nowrap
}
.view-heading h2{
    font-size:13px;
    flex-shrink:0
}
.view-heading span{
    font:11px var(--font-family-mono)
}
#cloud-label,#profile-label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1
}
.view-heading button{
    min-height:24px;
    padding:2px 7px;
    font-size:12px;
    background:var(--color-canvas-header);
    color:var(--color-canvas-text);
    border-color:var(--color-text-muted)
}
.view-heading button:disabled{
    color:var(--color-border)
}
.view-heading button[aria-pressed=true]{
    background:var(--color-canvas-text);
    color:var(--color-canvas-header);
    border-color:var(--color-canvas-text)
}
.emphasis-controls{
    display:flex;
    gap:2px
}
.view-heading label{
    display:flex;
    gap:4px;
    align-items:center;
    margin:0;
    flex-shrink:0
}
.view-heading #width-label{
    font:11px var(--font-family-sans)
}
#width{
    width:60px;
    min-height:24px;
    padding:2px 4px;
    font-size:11px
}
.north{
    color:var(--color-selection);
    flex-shrink:0
}
.view>canvas{
    position:absolute;
    left:0;
    top:30px;
    width:100%;
    height:calc(100% - 30px);
    display:block;
    touch-action:none
}
#profile-view>canvas{
    height:calc(100% - 48px)
}
.profile-axis{
    height:18px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:var(--color-canvas-header);
    color:var(--color-canvas-text);
    text-align:center;
    font:11px/18px var(--font-family-mono)
}
#profile-view.collapsed canvas,#profile-view.collapsed .profile-axis,#profile-view.collapsed label,#profile-view.collapsed #vertical-axis{
    display:none
}
.views[data-emphasis=top] #profile-view:not(.collapsed){
    display:none
}
.views[data-emphasis=profile] #top-view{
    flex:0 0 30px
}
.views[data-emphasis=profile] #top-view>canvas,.views[data-emphasis=profile] #top-view>.legend,.views[data-emphasis=profile] #top-view>.cursor-overlay{
    display:none
}
.views[data-emphasis=profile] #profile-view{
    flex:1 1 0
}
.views[data-emphasis=profile] #welcome{
    display:none
}
.views[data-emphasis=top] #top-view{
    flex:1 1 0
}
.axis-label{
    font-size:11px!important
}
.legend{
    position:absolute;
    bottom:8px;
    left:8px;
    max-width:calc(100% - 16px);
    padding:4px 6px;
    background:var(--color-canvas);
    color:var(--color-canvas-text);
    font:11px var(--font-family-mono);
    pointer-events:none;
    white-space:normal
}
.cursor-overlay{
    position:absolute;
    inset:30px 0 0;
    overflow:hidden;
    pointer-events:none;
    z-index:4;
    color:var(--color-cursor);
    --pointer-x:0px;
    --pointer-y:0px
}
#profile-view>.cursor-overlay{
    bottom:18px
}
.cursor-overlay span{
    position:absolute;
    pointer-events:none;
    filter:drop-shadow(0 0 1px var(--color-canvas))
}
.cursor-horizontal{
    left:0;
    right:0;
    top:var(--pointer-y);
    height:1px;
    background:currentColor
}
.cursor-vertical{
    top:0;
    bottom:0;
    left:var(--pointer-x);
    width:1px;
    background:currentColor
}
.cursor-target{
    left:var(--pointer-x);
    top:var(--pointer-y);
    width:16px;
    height:16px;
    border:1px solid currentColor;
    border-radius:50%;
    transform:translate(-50%,-50%)
}
.cursor-overlay[data-style=target] .cursor-horizontal{
    left:calc(var(--pointer-x) - 14px);
    right:auto;
    width:28px
}
.cursor-overlay[data-style=target] .cursor-vertical{
    top:calc(var(--pointer-y) - 14px);
    bottom:auto;
    height:28px
}
.cursor-overlay[data-style=crosshair] .cursor-target{
    display:none
}
.placement-marker{
    width:7px;
    height:7px;
    border:1px solid var(--color-selection);
    transform:translate(-50%,-50%) rotate(45deg);
    background:var(--color-canvas)
}
.view>canvas.custom-cursor{
    cursor:none
}
.view>canvas.pan-active{
    cursor:grab
}
.view>canvas.panning{
    cursor:grabbing
}
#welcome{
    position:absolute;
    inset:30px 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    background:var(--color-bg);
    color:var(--color-text);
    padding:16px
}
#welcome h2{
    font:700 30px/1.05 var(--font-family-title)
}
#welcome p{
    color:var(--color-text-secondary);
    line-height:1.4
}
.eyebrow{
    font:11px var(--font-family-mono);
    color:var(--color-text-muted);
    letter-spacing:1px
}
#welcome button{
    min-width:220px
}
#welcome .small{
    font-size:12px
}
#unit-panel{
    flex:0 0 auto;
    max-height:220px;
    overflow:auto;
    background:var(--color-surface);
    border:1px solid var(--color-warning);
    padding:12px
}
#unit-panel label{
    display:inline-block;
    margin-right:12px
}
#unit-panel label:has(#confirm-axes){
    display:block
}
#trace-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px;
    background:var(--color-surface)
}
footer{
    height:48px;
    display:grid;
    grid-template-columns:minmax(100px,1fr) minmax(150px,1.7fr) minmax(120px,1fr);
    grid-template-rows:24px 24px;
    background:var(--color-surface);
    border-top:1px solid var(--color-border);
    padding:0 12px;
    column-gap:12px;
    overflow:hidden;
    align-items:center
}
footer #prompt{
    grid-column:1/-1;
    font-size:13px;
    line-height:24px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0
}
#effective-placement{
    font-size:12px;
    color:var(--color-text-secondary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
#coords,#surface-info{
    font:11px/24px var(--font-family-mono);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0
}
dialog{
    width:min(410px,calc(100vw - 24px));
    max-height:calc(100dvh - 32px);
    padding:16px;
    border:1px solid var(--color-text-muted);
    border-radius:2px;
    background:var(--color-surface);
    color:var(--color-text);
    overflow:auto
}
dialog::backdrop{
    background:color-mix(in srgb,var(--color-primary) 35%,transparent)
}
.dialog-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px
}
.dialog-heading h2{
    font:700 24px var(--font-family-title)
}
dialog label>input:not([type=checkbox]),dialog label>select{
    display:block;
    width:100%;
    margin-top:4px
}
dialog .help{
    margin:8px 0;
    overflow-wrap:anywhere
}
#options-status,#vertex-status{
    font-size:12px;
    color:var(--color-text-secondary);
    margin-top:8px;
    overflow-wrap:anywhere
}
#layer-list label{
    display:flex;
    align-items:center;
    gap:7px;
    margin:5px 0
}
.swatch{
    width:11px;
    height:11px;
    border:1px solid var(--color-text-muted)
}
#ortho-opacity{
    width:100%;
    padding:0
}
#ortho-status{
    overflow-wrap:anywhere
}
.vertex-navigation{
    display:flex;
    gap:7px;
    align-items:center;
    flex-wrap:wrap
}
.vertex-navigation label{
    margin:0
}
.vertex-navigation #vertex-number{
    width:70px
}
.vertex-navigation button{
    padding:4px 8px
}
#vertex-source{
    overflow-wrap:anywhere
}
[hidden]{
    display:none!important
}
@media(max-height:780px) and (min-width:760px){
    .view{
        flex:55 1 0
    }
    #profile-view{
        flex:45 1 0
    }
}
@media(min-width:760px) and (max-width:999px){
    main{
        grid-template-columns:224px minmax(0,1fr)
    }
    .identity-bar{
        padding:4px 12px
    }
    .vector-brand span{
        display:none
    }
    .capture-strip{
        gap:8px
    }
    .capture-strip label{
        flex-basis:150px
    }
    .capture-strip #source-hint{
        display:none
    }
    .view-heading{
        gap:4px;
        padding:0 6px
    }
    .view-heading #cloud-label{
        display:none
    }
    #vertical-axis{
        display:none
    }
    #profile-label{
        max-width:160px
    }
}
@media(max-width:759px){
    body{
        height:auto;
        display:block
    }
    .identity-bar{
        min-height:48px;
        align-items:flex-start;
        padding:8px 12px;
        gap:8px
    }
    .vector-brand{
        display:block
    }
    .vector-brand span{
        font-size:11px
    }
    .identity-bar nav{
        gap:8px;
        flex-wrap:wrap;
        justify-content:flex-end;
        max-width:180px;
        font-size:11px
    }
    .identity-bar nav a{
        min-height:20px
    }
    .identity-bar nav button{
        min-height:24px
    }
    .document-bar{
        height:48px;
        padding:4px 8px;
        gap:4px
    }
    .document-bar button{
        min-height:40px;
        padding:4px 8px
    }
    main{
        display:flex;
        flex-direction:column;
        padding:8px;
        gap:8px
    }
    aside{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        padding:8px
    }
    .navigation-tools{
        grid-column:1/-1
    }
    .command-section{
        grid-column:1
    }
    .tools button{
        min-height:40px;
        white-space:normal;
        font-size:13px
    }
    .tool-context{
        grid-column:2;
        align-self:start
    }
    .tool-context .actions{
        display:grid;
        grid-template-columns:1fr
    }
    .tool-context h2{
        grid-column:1/-1;
        grid-row:1
    }
    #tool-options{
        grid-column:1/-1;
        grid-row:2;
        min-height:40px
    }
    #primary-settings{
        max-height:none
    }
    .tool-context .actions button{
        min-height:40px
    }
    .selection-region,.rail-rare{
        grid-column:1/-1
    }
    .selection-region #vertex-editor,.selection-region #delete{
        min-height:40px
    }
    .rail-rare{
        max-height:220px;
        overflow:auto
    }
    .rail-rare>details{
        display:inline-block;
        width:calc(50% - 4px);
        vertical-align:top
    }
    .rail-rare summary{
        min-height:40px;
        font-size:12px
    }
    .workspace{
        min-height:660px;
        height:760px
    }
    .capture-strip{
        height:auto;
        min-height:72px;
        flex-basis:auto;
        flex-wrap:wrap;
        gap:8px;
        padding:8px
    }
    .capture-strip label{
        flex:1 1 130px
    }
    .capture-strip select,.capture-strip input{
        min-height:40px
    }
    .capture-strip #source-hint{
        flex-basis:100%;
        white-space:normal;
        line-height:1.2
    }
    .views{
        min-height:500px
    }
    .view-heading #cloud-label,#profile-label{
        display:none
    }
    .view-heading{
        gap:4px;
        padding:0 5px
    }
    .view-heading h2{
        font-size:12px
    }
    .view-heading button{
        font-size:11px;
        padding:2px 5px
    }
    .emphasis-controls{
        margin-left:auto
    }
    .view-heading .north{
        display:none
    }
    #vertical-axis{
        font-size:10px!important
    }
    #width-label{
        font-size:10px!important;
        max-width:70px;
        white-space:normal
    }
    #width{
        width:54px
    }
    .legend{
        font-size:10px
    }
    .identity-bar h1{
        font-size:25px
    }
    #welcome h2{
        font-size:26px
    }
    #welcome p{
        font-size:13px
    }
    footer{
        grid-template-columns:minmax(100px,1fr) minmax(170px,1.8fr);
        padding:0 8px;
        column-gap:8px
    }
    #surface-info{
        display:none
    }
    #effective-placement{
        font-size:11px
    }
    #coords{
        font-size:10px
    }
    dialog button,dialog input,dialog select{
        min-height:40px
    }
    dialog input[type=checkbox]{
        min-height:16px
    }
    #unit-panel label{
        display:block
    }
    #unit-panel input[type=text]{
        width:100%
    }
}
@media(prefers-reduced-motion:reduce){
    *{
        scroll-behavior:auto
    }
}
.capture-strip{
    padding:3px 8px
}
.capture-strip label{
    line-height:12px
}
/* Keyboard focus stays inside the canvas, with high contrast on every edge. */
.view>canvas:focus-visible{
    outline:3px solid var(--color-canvas-text);
    outline-offset:-3px
}
.rail-rare :focus-visible{
    outline-offset:-3px
}
#primary-settings #interval-hint{
    display:block;
    font-size:11px;
    line-height:13px;
    margin-top:3px
}
#status-detail{
    position:fixed;
    inset:auto 12px 56px;
    margin:0 auto;
    width:auto;
    max-width:760px;
    max-height:180px;
    overflow:auto;
    padding:12px;
    background:var(--color-surface);
    color:var(--color-text);
    border:1px solid var(--color-text-muted);
    box-shadow:0 2px 8px color-mix(in srgb,var(--color-primary) 20%,transparent)
}
#status-detail:popover-open{
    display:flex;
    align-items:flex-start;
    gap:12px
}
#status-detail-text{
    flex:1;
    font-size:14px;
    line-height:1.4;
    overflow-wrap:anywhere
}
#status-close{
    flex-shrink:0
}
#prompt{
    cursor:pointer
}
@media(max-width:759px){
    #status-detail{
        inset:auto 8px 56px;
        max-height:240px
    }
    #status-detail:popover-open{
        display:block
    }
    #status-close{
        margin-top:8px;
        min-height:40px
    }
}