/* The architecture suite (Pages/Architect, js/arch-*.js). It borrows the photo editor's chrome — .pe-* — and adds the three-pane
   workspace: catalog on the left, plan and 3-D view in the middle, properties on the right. */

.arch-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ar { --ar-accent: var(--rl-accent, #2f6df6); --ar-left: 17.5rem; --ar-right: 19rem; }

/* ---- toolbar ---- */
.ar .pe__opts { gap: .25rem .35rem; flex-wrap: wrap; }
.ar-tools { display: flex; align-items: center; gap: .15rem; }
.ar-sepv { width: 1px; align-self: stretch; background: var(--pe-line); margin: .15rem .35rem; }
.ar-tb { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .55rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--rl-text); cursor: pointer; font-size: .82rem; white-space: nowrap; }
.ar-tb:hover { background: var(--rl-surface-sunken); }
.ar-tb.is-on { background: color-mix(in srgb, var(--ar-accent) 16%, transparent); border-color: color-mix(in srgb, var(--ar-accent) 55%, transparent); color: var(--ar-accent); }
.ar-tb:disabled { opacity: .4; cursor: default; }
.ar-tb svg { flex: none; }
.ar-tb--icon { padding: 0; width: 2rem; justify-content: center; }
.ar-docname { border: 0; background: transparent; color: var(--rl-text-muted); padding: .2rem .5rem; border-radius: 8px; cursor: pointer; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-docname:hover { background: var(--rl-surface-sunken); color: var(--rl-text); }
.ar-dirty::after { content: ' •'; color: var(--ar-accent); }

/* ---- workspace ---- */
.ar-body { flex: 1; min-height: 0; display: flex; position: relative; }
.ar-left, .ar-right { flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--rl-surface); }
.ar-left { width: var(--ar-left); border-right: 1px solid var(--pe-line); }
.ar-right { width: var(--ar-right); border-left: 1px solid var(--pe-line); overflow-y: auto; }
.ar-lefttabs { display: flex; border-bottom: 1px solid var(--pe-line); flex: none; }
.ar-lefttab { flex: 1; border: 0; background: transparent; padding: .5rem .4rem; cursor: pointer; font-size: .8rem; color: var(--rl-text-muted); border-bottom: 2px solid transparent; }
.ar-lefttab.is-on { color: var(--rl-text); border-bottom-color: var(--ar-accent); font-weight: 600; }
.ar-leftbody { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ar-leftbody > * { flex: 1; min-height: 0; }

.ar-center { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ar-work { flex: 1; min-height: 0; display: flex; position: relative; }
.ar-work--side { flex-direction: row; }
.ar-work--stack { flex-direction: column; }
.ar-planwrap, .ar-3dwrap { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--pe-work); }
.ar-planwrap { flex: 1 1 55%; }
.ar-3dwrap { flex: 1 1 45%; }
.ar-work--plan .ar-3dwrap, .ar-work--plan .ar-split { display: none; }
.ar-work--3d .ar-planwrap, .ar-work--3d .ar-split { display: none; }
.ar-split { flex: none; background: var(--pe-line); position: relative; z-index: 3; }
.ar-work--side .ar-split { width: 5px; cursor: col-resize; }
.ar-work--stack .ar-split { height: 5px; cursor: row-resize; }
.ar-split:hover, .ar-split.is-drag { background: var(--ar-accent); }

.ar-planstage { flex: 1; min-height: 0; position: relative; overflow: hidden; display: grid; grid-template: 18px 1fr / 18px 1fr; background: var(--pe-work); }
.ar-ruler { background: var(--rl-surface); display: block; }
.ar-ruler--top { grid-column: 2; grid-row: 1; width: 100%; height: 18px; border-bottom: 1px solid var(--pe-line); }
.ar-ruler--left { grid-column: 1; grid-row: 2; width: 18px; height: 100%; border-right: 1px solid var(--pe-line); }
.ar-corner { grid-column: 1; grid-row: 1; background: var(--rl-surface); border-right: 1px solid var(--pe-line); border-bottom: 1px solid var(--pe-line); }
.ar-planarea { grid-column: 2; grid-row: 2; position: relative; min-width: 0; min-height: 0; }
.ar-rulers-off .ar-planstage { grid-template: 0 1fr / 0 1fr; }
.ar-rulers-off .ar-ruler, .ar-rulers-off .ar-corner { display: none; }
.ar-plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.ar-planarea.is-drop { outline: 3px dashed var(--ar-accent); outline-offset: -6px; }

.ar-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.ar-3dbar { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem; z-index: 4; padding: .2rem; border-radius: 9px; background: color-mix(in srgb, var(--rl-surface) 88%, transparent); border: 1px solid var(--pe-line); backdrop-filter: blur(6px); }
.ar-3dhint { position: absolute; left: .6rem; bottom: .5rem; z-index: 4; font-size: .72rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); pointer-events: none; max-width: 70%; }
.ar-3dfail { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--rl-text-muted); }
.ar-typed { position: absolute; z-index: 6; background: var(--rl-surface); border: 1px solid var(--ar-accent); border-radius: 8px; padding: .3rem .5rem; font-size: .8rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); pointer-events: none; display: flex; gap: .6rem; }
.ar-typed span.is-on { color: var(--ar-accent); font-weight: 700; }

.ar-welcome { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 5; max-width: 26rem; text-align: center; background: color-mix(in srgb, var(--rl-surface) 94%, transparent); border: 1px solid var(--pe-line); border-radius: 14px; padding: 1.1rem 1.3rem; box-shadow: 0 10px 34px rgba(0, 0, 0, .22); }
.ar-welcome h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.ar-welcome p { margin: 0 0 .8rem; color: var(--rl-text-muted); font-size: .85rem; }
.ar-welcome__btns { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }

/* ---- context menu ---- */
.ar-ctx { position: fixed; z-index: 1000; min-width: 12rem; padding: .25rem; border-radius: 10px; background: var(--rl-surface-raised, var(--rl-surface)); border: 1px solid var(--pe-line); box-shadow: 0 10px 32px rgba(0, 0, 0, .35); }
.ar-ctx button { display: flex; width: 100%; justify-content: space-between; gap: 1.5rem; border: 0; background: transparent; padding: .38rem .6rem; border-radius: 8px; cursor: pointer; text-align: left; font-size: .84rem; }
.ar-ctx button:hover:not(:disabled) { background: color-mix(in srgb, var(--ar-accent) 16%, transparent); }
.ar-ctx button:disabled { opacity: .4; cursor: default; }
.ar-ctx hr { border: 0; border-top: 1px solid var(--pe-line); margin: .25rem 0; }
.ar-ctx kbd { color: var(--rl-text-muted); font: inherit; font-size: .75rem; }

/* ---- dialogs ---- */
.ar-list { display: flex; flex-direction: column; gap: .15rem; max-height: 22rem; overflow-y: auto; margin-top: .5rem; }
.ar-listrow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem .6rem; border: 1px solid transparent; border-radius: 8px; cursor: pointer; background: transparent; text-align: left; width: 100%; }
.ar-listrow:hover { background: var(--rl-surface-sunken); }
.ar-listrow.is-on { border-color: var(--ar-accent); background: color-mix(in srgb, var(--ar-accent) 10%, transparent); }
.ar-listrow small { color: var(--rl-text-muted); white-space: nowrap; }
.ar-form { display: grid; grid-template-columns: 9rem 1fr; gap: .5rem .8rem; align-items: center; }
.ar-form label { color: var(--rl-text-muted); font-size: .82rem; }
.ar-form input[type=text], .ar-form input[type=number], .ar-form select { width: 100%; }
.ar-photo { display: block; max-width: 100%; max-height: 52vh; margin: .6rem auto 0; border-radius: 8px; border: 1px solid var(--pe-line); }
.ar-progress { height: 6px; border-radius: 3px; background: var(--rl-surface-sunken); overflow: hidden; margin-top: .6rem; }
.ar-progress > i { display: block; height: 100%; width: 0; background: var(--ar-accent); transition: width .15s; }
.ar-keys { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .84rem; }
.ar-keys h3 { grid-column: 1 / -1; margin: .6rem 0 .1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rl-text-muted); }
.ar-keys kbd { font: inherit; font-weight: 600; white-space: nowrap; }

/* The workspace reacts to its own width, not the window's: the app's sidebar is often open beside it. */
.ar-body { container-type: inline-size; container-name: arbody; }
.ar-center { container-type: inline-size; container-name: arcenter; }
.ar .pe__status { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.ar .pe__status .pe__info:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ar-narrow { display: none; }

@container arbody (max-width: 1000px) {
    .ar-left, .ar-right { position: absolute; top: 0; bottom: 0; z-index: 20; box-shadow: 0 10px 34px rgba(0, 0, 0, .35); display: none; }
    .ar-left { left: 0; }
    .ar-right { right: 0; }
    .ar.ar--left .ar-left, .ar.ar--right .ar-right { display: flex; }
}
@container arcenter (max-width: 700px) {
    .ar-work--side { flex-direction: column; }
    .ar-work--side .ar-split { width: auto; height: 5px; cursor: row-resize; }
    .ar-3dhint { display: none; }
}
/* arch-ui.js sets .ar--compact when the workspace is narrow enough that the side panels have become drawers. */
.ar--compact .ar-narrow { display: inline-flex; }