/* INBETWEEN interface tokens — adapté au système Space Mono UI de Video → Sound / Ultra HDR.
   Noir/blanc, un seul accent vert, angles droits, filets 1 px, libellés capitales.
   Artwork colours and glyph case remain authored data. */
:root{font-family:'Space Mono',monospace;font-synthesis:none;--accent:#66ff5d;--ui-bg:#f7f7f4;--ui-fg:#050505;--line:#0b0b0b;--soft-line:#b8b8b1;--field:#eeeeea;--muted:#707070;color:var(--ui-fg);background:var(--ui-bg)}
body[data-theme]{--accent:#66ff5d;--ui-bg:#f7f7f4;--ui-fg:#050505;--line:#0b0b0b;--soft-line:#b8b8b1;--field:#eeeeea;--muted:#707070;background:var(--ui-bg)!important;color:var(--ui-fg)!important;font:400 12px/1.4 'Space Mono',monospace;text-transform:uppercase}
body[data-theme=night]{--ui-bg:#000;--ui-fg:#f7f7f4;--line:#f7f7f4;--soft-line:#3a3a36;--field:#050505;--muted:#8d8d86;color-scheme:dark}
:root[data-theme=dark]{background:#000;color:#f7f7f4;--accent:#66ff5d}
body[data-theme] :is(button,input,select,textarea,output){font-family:'Space Mono',monospace;font-weight:400;font-synthesis:none;letter-spacing:0}
body[data-theme] :is(.topbar,.document-strip,.settings,.layers-panel,.footer,.workspace,.workspace-top,.workspace-bottom,.mobile-drawer,.mobile-tabs,.mobile-scroll,#specimen-pane,#text-pane,#animation-pane,dialog,.export-dropdown){background:var(--ui-bg)!important;color:var(--ui-fg)!important;border-color:var(--line)!important}
body[data-theme] :is(button,input,select,textarea,.button,.segment,.toolbox,.grid-row,.layer-row,.layer-thumbnail,.swatch,.custom-color,.export-dropdown,dialog,.mobile-tabs button,#notice,.drawer-handle i){border-radius:0!important;box-shadow:none!important}
body[data-theme] :is(.button,.interface-preferences button,.shape-picker button,.segment,.toolbox,select,input:not([type=range]):not([type=checkbox]):not([type=color]),textarea,.export-dropdown,dialog){border:1px solid var(--ui-fg);background:var(--ui-bg)!important;color:var(--ui-fg)!important}
body[data-theme] :is(h1,h2,.settings-title h1,.layers-heading h2){font-family:'Space Mono',monospace;font-weight:700;letter-spacing:0;color:var(--ui-fg)}
body[data-theme] h2::before{color:var(--ui-fg)}
body[data-theme] :is(.settings-title h1,.layers-heading h2,.dialog-heading h2,.specimen-heading h1,.animation-heading h1){font-size:15px}
body[data-theme] :is(.control label,.number-label,.color-row,.check-row,.layer-details label,.font-name-label,.collection-selection,.grid-row>button,.layer-select>span,.segment button,.text-button,.button){font-size:11px;color:var(--ui-fg)}
body[data-theme] .button{height:38px;padding:0 14px;text-transform:uppercase;letter-spacing:.02em}
body[data-theme] :is(.control output,output,.number-label input){font-variant-numeric:tabular-nums;color:var(--ui-fg)}
body[data-theme] :is(.help,.range-captions,.selection-name,.muted,.edition,.footer,.workspace-bottom p){color:var(--muted)}
body[data-theme] .brand{color:var(--accent)!important;font-family:'Space Mono',monospace;font-weight:700;letter-spacing:-.5px}
body[data-theme] .topbar{height:56px;min-height:56px;padding:0 16px;gap:12px;border-bottom:1px solid var(--ui-fg)!important}
body[data-theme] .topbar .brand{font-size:24px}
body[data-theme] .topbar .button{height:38px;padding:0 12px;gap:6px}
body[data-theme] .settings section{border-top:1px dotted var(--soft-line)}
body[data-theme] :is(.button.primary,.segment button.active,.toolbox button.active,.view-toggle button.active,.interface-preferences button[aria-pressed=true],.mobile-tabs button[aria-pressed=true],#drawing-tabs button.active,.view-tabs button.active){background:var(--ui-fg)!important;color:var(--ui-bg)!important;border-color:var(--ui-fg)!important;font-weight:700}
body[data-theme] :is(.toolbox button.active,#drawing-tabs button.active){color:var(--accent)!important;background:#050505!important}
body[data-theme] #save-project{border:1px solid var(--ui-fg);border-bottom:1px solid var(--ui-fg)}
body[data-theme] :is(.grid-row.active,.layer-row.active){background:var(--ui-bg)!important;color:var(--ui-fg)!important;border:1px solid var(--accent)!important}
body[data-theme] :is(button,.button,.text-button):hover:not(:disabled){color:var(--ui-fg);background:var(--ui-bg)}
body[data-theme] :is(.button,.iconbutton,.shape-picker button,.export-dropdown button):hover:not(:disabled){border-color:var(--accent)!important}
body[data-theme] :is(.row-delete,.text-button):hover{color:var(--ui-fg);text-decoration:underline;text-decoration-color:var(--accent)}
body[data-theme] :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body[data-theme] .shape-picker svg{fill:currentColor}
/* Base shapes are marks, not framed controls: outlined at rest, solid black when selected, no surrounding rectangle. */
body[data-theme] .shape-picker button{border:0!important;background:transparent!important;background-color:transparent!important;box-shadow:none!important;padding:0}
body[data-theme] .shape-picker button:not(.active) svg{fill:none!important;stroke:var(--ui-fg);stroke-width:1.35;stroke-linejoin:round;vector-effect:non-scaling-stroke}
body[data-theme] .shape-picker button.active svg{fill:#050505!important;stroke:#050505!important;stroke-width:1.35;stroke-linejoin:round;vector-effect:non-scaling-stroke}
body[data-theme] .shape-picker button.active{background:transparent!important;background-color:transparent!important;border:0!important;border-color:transparent!important;box-shadow:none!important}
body[data-theme] .shape-picker button:hover:not(.active) svg{stroke:var(--accent)}
body[data-theme] .grid-symbol{border-color:var(--ui-fg)}
body[data-theme] .swatch{background:var(--swatch)!important;border:1px solid var(--soft-line)}
body[data-theme] .swatch.active::after{border-radius:0;border:1px solid var(--ui-fg)}
body[data-theme] .layer-row.drop-above::before,body[data-theme] .layer-row.drop-below::after{height:1px;background:var(--accent)}
body[data-theme] input[type=checkbox]{accent-color:var(--ui-fg)}
body[data-theme] input[type=range]{background:transparent}
body[data-theme] input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--soft-line)}
body[data-theme] input[type=range]::-webkit-slider-thumb{border-radius:0;width:5px;height:20px;margin-top:-10px;background:var(--accent)}
body[data-theme] input[type=range]::-moz-range-track{height:1px;background:var(--soft-line)}
body[data-theme] input[type=range]::-moz-range-thumb{border-radius:0;width:5px;height:20px;border:0;background:var(--accent)}
body[data-theme] .animation-stage{border:5px solid var(--accent);border-radius:0;background:#fff}
body[data-theme] :is(.paper,.drawing-viewport,.layer-thumbnail,.glyph-image,.text-preview,#live-text-strip){background:#fff;color:#050505;color-scheme:light}
body[data-theme] :is(.workspace,.canvas-area,.drawing-viewport){background:#fff!important}
body[data-theme] .paper{border:0;outline:0;box-shadow:none;overflow:visible;background:#fff!important}
body[data-theme] :is(.canvas-caption,.canvas-bottom){color:var(--ui-fg)}
body[data-theme] :is(.glyph-card,.glyph-name){border-color:var(--soft-line)}
body[data-theme] .drawer-handle i{height:2px;background:var(--soft-line)}
#new-project-dialog{width:min(420px,calc(100vw - 24px))}
#new-project-form{display:flex;flex-direction:column;gap:18px}
#new-project-form .font-name-label{margin:0}
#new-project-form .button{align-self:flex-end}
body[data-theme] .mobile-ui .topbar{height:36px;min-height:36px;padding:0 5px;gap:2px}
body[data-theme] .mobile-ui .topbar .brand{font-size:14px;letter-spacing:-.6px}
body[data-theme] .mobile-ui .topbar :is(.button,.iconbutton,.interface-preferences button){height:30px;min-height:30px;font-size:9px;padding:0 3px}
body[data-theme] .mobile-ui #new-project{width:26px;min-width:26px;display:grid;place-items:center;padding:0}
.mobile-ui #new-project>span{display:none}
body[data-theme] .mobile-ui #save-project{width:26px;padding:0}
body[data-theme] .mobile-ui :is(input:not([type=range]):not([type=checkbox]):not([type=color]),select,textarea){font-size:16px}
body[data-theme] .mobile-ui .tab-character{height:30px}
body[data-theme] .mobile-ui .animation-stage{padding:6px}

/* One shared viewport and identical cells keep the alphabet registered. */
#specimen-pane,.mobile-ui #specimen-pane{grid-template-rows:auto auto auto auto minmax(0,1fr)}
.alphabet-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.alphabet-order-hint{font-size:11px;line-height:1.5;color:var(--muted);text-transform:none}
#alphabet-spacing-preview{max-height:94px;min-height:72px;margin-bottom:0}
#specimen-pane .approach-control{margin-bottom:0}
#alphabet-gallery{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));grid-auto-rows:168px;gap:10px;align-items:stretch;padding:3px}
.glyph-card{display:grid;grid-template-rows:minmax(0,1fr) 34px;position:relative;isolation:isolate}
.glyph-image{display:flex;align-items:stretch;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;padding:12px}
.glyph-image svg{width:100%;height:100%;min-width:0;min-height:0;pointer-events:none}
.glyph-name{height:34px}
.glyph-drag{position:absolute;z-index:2;right:3px;top:3px;width:28px;height:28px;padding:0;background:#fff;color:#111;cursor:grab;touch-action:none;opacity:.65;font-size:19px}
.glyph-drag:hover,.glyph-drag:focus-visible{opacity:1;background:var(--accent)}
[data-reorder-id]{position:relative}
[data-reorder-id].order-dragging{opacity:.4}
[data-reorder-id].order-drop-before{box-shadow:inset 4px 0 var(--accent)!important}
[data-reorder-id].order-drop-after{box-shadow:inset -4px 0 var(--accent)!important}
#drawing-tabs [draggable=true],#animation-sequence-list [draggable=true]{cursor:grab}
.mobile-ui #alphabet-gallery{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));grid-auto-rows:148px;gap:7px}
.mobile-ui .glyph-card{grid-template-rows:minmax(0,1fr) 40px}
.mobile-ui .glyph-name{height:40px}
.mobile-ui .glyph-image{padding:10px}
.mobile-ui .glyph-drag{width:32px;height:32px}
.mobile-ui .alphabet-actions{gap:4px}
.mobile-ui .alphabet-actions .button{padding:0 6px;font-size:9px}
.mobile-ui #alphabet-spacing-preview{max-height:78px;min-height:60px}
.mobile-ui .alphabet-order-hint{font-size:10px}

@media(max-width:350px){body[data-theme] .mobile-ui .topbar .brand{font-size:10px}body[data-theme] .mobile-ui .topbar{gap:1px}body[data-theme] .mobile-ui .topbar :is(.iconbutton,.interface-preferences button){width:23px;min-width:23px}body[data-theme] .mobile-ui #open-gallery{font-size:8px;padding:0 2px}}

/* Boutons d'action du panneau (fond vert) et bouton d'ajout de couleur. */
body[data-theme] .aside-bottom{display:flex;gap:10px}
body[data-theme] .aside-bottom .button{flex:1}
body[data-theme] #trace-image{background:var(--accent)!important;color:#050505!important;border-color:var(--accent)!important;font-weight:700}
body[data-theme] #trace-image:hover:not(:disabled){background:var(--ui-fg)!important;color:var(--accent)!important;border-color:var(--ui-fg)!important}
body[data-theme] .palette{flex-wrap:wrap;margin-bottom:10px}

/* Barre de défilement fine des onglets de dessin (Firefox + WebKit). */
#drawing-tabs{scrollbar-width:thin;scrollbar-color:var(--soft-line) transparent}
#drawing-tabs::-webkit-scrollbar{height:3px}
#drawing-tabs::-webkit-scrollbar-thumb{background:var(--soft-line)}
#drawing-tabs::-webkit-scrollbar-track{background:transparent}

/* Pas d'anneau de focus autour de la zone de dessin au clic. */
#drawing:focus,#drawing:focus-visible{outline:none}