/* Application Journal — the quieter, tactile companion to Glaze Preview */
#panel-glaze-journal,#panel-glaze-journal-library { --gj-ink:#f8f5ff; --gj-muted:#b9afd7; --gj-dim:#81759e; --gj-card:#211c3b; --gj-card2:#2b2450; --gj-line:#423866; --gj-violet:#b76cff; --gj-cyan:#45e0d2; --gj-orange:#ff9f68; color:var(--gj-ink); font-family:"Plus Jakarta Sans","Segoe UI",sans-serif; }
#panel-glaze-journal.gj-shell { max-width:1120px; margin:0 auto; padding:8px 0 44px; }
.gj-hero { position:relative; overflow:hidden; padding:28px; border:1px solid #4b3b79; border-radius:24px; background:radial-gradient(circle at 87% 10%,#633997 0,transparent 31%),linear-gradient(125deg,#1e1838,#241d48 58%,#30204a); box-shadow:0 16px 38px rgba(0,0,0,.24); }
.gj-hero-top { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
.gj-journal-library-link { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; margin-top:2px; white-space:nowrap; }
.gj-journal-library-link span { font-size:16px; line-height:1; }
.gj-kicker { color:var(--gj-cyan); font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.gj-hero h1 { margin:8px 0 7px; font-family:"Clash Display","Plus Jakarta Sans",sans-serif; font-size:clamp(29px,5vw,49px); line-height:1.02; letter-spacing:-.05em; }
.gj-hero p { max-width:660px; color:var(--gj-muted); line-height:1.65; font-size:14px; }
.gj-stepper { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:20px; } .gj-step-choice { min-width:0; display:flex; align-items:center; gap:8px; padding:11px 10px; border:1px solid rgba(183,108,255,.36); border-radius:12px; background:rgba(16,12,34,.5); color:var(--gj-muted); font:inherit; line-height:1.25; text-align:left; cursor:pointer; } .gj-step-choice:hover,.gj-step-choice:focus-visible { border-color:var(--gj-cyan); outline:2px solid rgba(69,224,210,.32); outline-offset:1px; } .gj-step-choice.is-active { border-color:var(--gj-cyan); background:#183e49; box-shadow:0 0 0 1px rgba(69,224,210,.28); } .gj-step-choice.is-complete { border-color:rgba(69,224,210,.46); } .gj-step-number { flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(183,108,255,.2); color:var(--gj-cyan); font-size:10px; font-weight:900; } .gj-step-choice.is-active .gj-step-number,.gj-step-choice.is-complete .gj-step-number { background:var(--gj-cyan); color:#10252d; } .gj-step-choice b,.gj-step-choice small { display:block; } .gj-step-choice b { color:var(--gj-ink); font-size:10px; } .gj-step-choice small { margin-top:2px; color:var(--gj-dim); font-size:8px; }
.gj-mark { position:absolute; right:8%; top:24px; width:125px; height:160px; border:1px solid rgba(69,224,210,.36); border-radius:8px; transform:rotate(8deg); opacity:.8; }
.gj-mark:before,.gj-mark:after { content:""; position:absolute; left:16px; right:16px; height:1px; background:rgba(255,159,104,.42); box-shadow:0 30px rgba(255,159,104,.28),0 60px rgba(255,159,104,.25),0 90px rgba(255,159,104,.2); top:27px; }
.gj-mark:after { left:62px; top:0; bottom:0; width:1px; height:auto; background:rgba(69,224,210,.3); box-shadow:none; }
.gj-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.gj-wizard-panel { margin-top:16px; } .gj-wizard-panel > .gj-step-card { width:100%; } .gj-wizard-actions { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:14px; padding:13px 15px; border:1px solid var(--gj-line); border-radius:14px; background:rgba(24,20,46,.72); } .gj-wizard-actions > span { color:var(--gj-muted); font-size:10px; font-weight:900; text-align:center; text-transform:uppercase; letter-spacing:.1em; } .gj-wizard-actions .gj-btn:first-child { justify-self:start; } .gj-wizard-actions .gj-btn:last-child { justify-self:end; }
.gj-card { background:var(--gj-card); border:1px solid var(--gj-line); border-radius:18px; padding:18px; box-shadow:0 8px 22px rgba(0,0,0,.13); }
.gj-step-card { min-width:0; } .gj-step-map { grid-column:1 / -1; }
.gj-card h2 { margin:0 0 5px; font-size:16px; letter-spacing:-.02em; }
.gj-note { color:var(--gj-dim); font-size:12px; line-height:1.5; }
.gj-field { margin-top:14px; } .gj-field label,.gj-label { display:block; margin-bottom:6px; color:var(--gj-muted); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; }
.gj-input,.gj-textarea,.gj-search { width:100%; border:1px solid var(--gj-line); border-radius:10px; padding:10px 11px; background:#18142e; color:var(--gj-ink); font:inherit; font-size:12px; }
.gj-textarea { min-height:120px; resize:vertical; line-height:1.5; } .gj-input:focus,.gj-textarea:focus,.gj-search:focus { outline:2px solid var(--gj-cyan); outline-offset:1px; }
.gj-photo-groups { display:grid; gap:14px; margin-top:14px; } .gj-photo-phase-group { padding:11px; border:1px solid rgba(183,108,255,.38); border-radius:13px; background:rgba(24,20,46,.3); } .gj-photo-phase-title { margin-bottom:9px; color:var(--gj-cyan); font-size:12px; font-weight:900; letter-spacing:.04em; } .gj-photo-surface-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .gj-photo-group { padding:10px; border:1px solid var(--gj-line); border-radius:12px; background:rgba(24,20,46,.45); } .gj-photo-group-title { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px; } .gj-photo-group-title b { color:var(--gj-ink); font-size:12px; } .gj-photo-group-title span { color:var(--gj-dim); font-size:9px; }
.gj-photos { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.gj-photo-section { margin-top:16px; padding-top:14px; border-top:1px solid var(--gj-line); } .gj-photo-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; } .gj-photo-section-heading h3 { margin:0; color:var(--gj-ink); font-size:14px; } .gj-photo-section-heading span { color:var(--gj-dim); font-size:10px; line-height:1.4; text-align:right; }
.gj-photo-slot { min-height:108px; border:1px dashed #7152a4; border-radius:12px; padding:10px; background:linear-gradient(135deg,rgba(183,108,255,.1),rgba(69,224,210,.04)); position:relative; text-align:center; }
.gj-photo-slot img { width:100%; height:106px; object-fit:cover; border-radius:8px; display:block; } .gj-photo-slot input { display:none; } .gj-photo-image-wrap { position:relative; } .gj-photo-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; } .gj-photo-labels .gj-photo-label { position:absolute; transform:translate(-50%,-50%) scale(.72); transform-origin:center; pointer-events:none; white-space:nowrap; }
.gj-photo-saved { display:block; margin-top:5px; color:var(--gj-cyan); font-size:9px; font-weight:800; line-height:1.3; }
.gj-photo-picker { min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; color:var(--gj-muted); font-size:11px; line-height:1.4; text-align:center; } .gj-photo-picker:focus-within,.gj-photo-picker:hover { color:var(--gj-ink); } .gj-photo-picker strong { color:var(--gj-ink); font-size:12px; } .gj-photo-picker small { display:block; margin-top:5px; color:var(--gj-dim); font-size:9px; } .gj-photo-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .gj-photo-select { display:inline-block; margin-top:10px; padding:7px 10px; border:1px solid var(--gj-cyan); border-radius:7px; background:rgba(69,224,210,.12); color:var(--gj-cyan); font-size:10px; font-weight:900; }
.gj-photo-slot strong { color:var(--gj-ink); font-size:12px; margin-bottom:3px; }
.gj-photo-choices,.gj-photo-actions { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.gj-photo-choices .gj-btn,.gj-photo-actions .gj-btn { padding:7px 8px; font-size:10px; }
.gj-photo-actions label { min-height:0; display:inline-flex; align-items:center; cursor:pointer; }
.gj-storage-note { margin:7px 0 0; color:var(--gj-dim); font-size:10px; line-height:1.4; }
.gj-btn { border:1px solid var(--gj-line); border-radius:9px; padding:9px 12px; background:var(--gj-card2); color:var(--gj-muted); font:800 11px inherit; cursor:pointer; }
.gj-btn:hover,.gj-btn:focus { border-color:var(--gj-cyan); color:var(--gj-ink); } .gj-btn-primary { background:var(--gj-violet); border-color:var(--gj-violet); color:#180e2d; } .gj-btn-warm { border-color:var(--gj-orange); color:var(--gj-orange); }
.gj-btn:disabled { opacity:.45; cursor:not-allowed; }
.gj-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; } .gj-status { min-height:19px; margin-top:9px; color:var(--gj-cyan); font-size:11px; } .gj-status.error { color:#ffb4aa; }
.gj-bottom-save { display:flex; justify-content:center; margin-top:16px; padding:16px 0 4px; border-top:1px solid var(--gj-line); } .gj-bottom-save .gj-btn { min-width:min(280px,100%); padding:12px 18px; font-size:13px; }
.gj-edit-icon { display:inline-block; margin-right:5px; color:var(--gj-orange); font-size:13px; font-weight:900; line-height:1; }
.gj-switch-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; } .gj-segment { display:flex; gap:5px; } .gj-segment .gj-btn { flex:1; padding:8px 7px; } .gj-segment .gj-btn.active { background:#183e49; border-color:var(--gj-cyan); color:var(--gj-ink); box-shadow:inset 0 0 0 1px rgba(69,224,210,.28); } .gj-view-note { margin-top:8px; color:var(--gj-cyan); font-size:10px; font-weight:800; }
.gj-mode { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:14px 0; } .gj-mode button { text-align:left; min-height:60px; } .gj-mode button.active { background:#183e49; border-color:var(--gj-cyan); color:var(--gj-ink); }
.gj-mode b,.gj-mode small { display:block; } .gj-mode small { margin-top:4px; color:var(--gj-dim); font-size:10px; font-weight:400; }
.gj-search-wrap { position:relative; margin-top:12px; } .gj-suggestions { display:none; position:absolute; z-index:5; left:0; right:0; max-height:220px; overflow:auto; border:1px solid var(--gj-line); border-radius:10px; background:#18142e; box-shadow:0 10px 20px rgba(0,0,0,.3); }
.gj-context-tools { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; } .gj-custom-glaze { margin-top:12px; } .gj-custom-fields { display:grid; gap:6px; } .gj-custom-fields .gj-btn { justify-self:start; }
.gj-suggestion { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; border:0; border-bottom:1px solid #302850; padding:10px; background:transparent; color:var(--gj-muted); text-align:left; cursor:grab; font:700 11px inherit; } .gj-suggestion:hover,.gj-suggestion:focus { background:#39245f; color:var(--gj-ink); }
.gj-suggestion > span { min-width:0; } .gj-suggestion b,.gj-suggestion small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gj-suggestion small { margin-top:3px; color:var(--gj-cyan); font-size:9px; font-weight:500; }
.gj-selected { min-height:38px; display:flex; align-items:center; gap:8px; margin-top:9px; padding:8px 10px; border:1px solid var(--gj-line); border-radius:10px; background:#1a1632; color:var(--gj-dim); font-size:10px; } .gj-selected[draggable="true"] { border-color:rgba(69,224,210,.55); cursor:grab; } .gj-selected[draggable="true"]:active { cursor:grabbing; }
.gj-selected span { color:var(--gj-cyan); font-weight:900; text-transform:uppercase; letter-spacing:.09em; } .gj-selected b { color:var(--gj-ink); font-size:11px; } .gj-selected small { margin-right:auto; color:var(--gj-dim); }
.gj-piece-map { position:relative; min-height:0; display:grid; place-items:center; overflow:hidden; margin-top:15px; border:1px dashed #7152a4; border-radius:14px; background:linear-gradient(135deg,rgba(183,108,255,.09),rgba(69,224,210,.04)); }
.gj-piece-map img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; background:#17122a; }
.gj-piece-placeholder { max-width:250px; padding:28px; color:var(--gj-dim); font-size:11px; line-height:1.5; text-align:center; }
.gj-photo-required-map { min-height:260px; } .gj-photo-required-map .gj-piece-placeholder { display:flex; flex-direction:column; align-items:center; gap:9px; max-width:400px; } .gj-photo-required-map .gj-piece-placeholder strong { color:var(--gj-ink); font-size:15px; } .gj-photo-required-map .gj-piece-placeholder span { color:var(--gj-muted); } .gj-photo-required-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:4px; } .gj-photo-required-map .gj-piece-placeholder .gj-btn { margin-top:0; }
.gj-generic-photo-option,.gj-generic-active { display:flex; align-items:flex-start; gap:8px; color:var(--gj-muted); font-size:10px; line-height:1.4; text-align:left; } .gj-generic-photo-option { max-width:360px; margin-top:8px; padding:9px 10px; border:1px solid rgba(69,224,210,.42); border-radius:9px; background:rgba(69,224,210,.06); cursor:pointer; } .gj-generic-photo-option input,.gj-generic-active input { flex:0 0 auto; margin-top:2px; accent-color:var(--gj-cyan); } .gj-generic-photo-option b { display:block; color:var(--gj-ink); font-size:11px; } .gj-generic-photo-option small { display:block; margin-top:2px; color:var(--gj-dim); } .gj-generic-photo-badge { position:absolute; z-index:12; top:10px; left:10px; padding:5px 8px; border:1px solid var(--gj-cyan); border-radius:16px; background:rgba(24,20,46,.9); color:var(--gj-cyan); font-size:9px; font-weight:900; } .gj-generic-active { position:absolute; z-index:12; top:40px; left:10px; padding:5px 7px; border-radius:7px; background:rgba(24,20,46,.9); color:var(--gj-ink); }
.gj-piece-grid { position:absolute; inset:0; } .gj-grid-side { display:grid; grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.38); border-bottom:1px solid rgba(255,255,255,.38); } .gj-grid-side .gj-map-target { position:relative; border:0; border-bottom:1px solid rgba(255,255,255,.38); border-radius:0; background:transparent; } .gj-grid-side .gj-map-target:last-child { border-bottom:0; } .gj-grid-side .gj-map-target:hover,.gj-grid-side .gj-map-target:focus,.gj-grid-side .gj-map-target.is-over { background:rgba(69,224,210,.06); box-shadow:none; } .gj-grid-top { inset:50% auto auto 50%; width:min(100%,550px); height:min(100%,550px); transform:translate(-50%,-50%); } .gj-grid-top .gj-map-target { position:absolute; border-radius:50%; transform:translate(-50%,-50%); touch-action:none; cursor:move; } .gj-grid-top .gj-map-target.is-ring-dragging { cursor:grabbing; border-color:var(--gj-cyan); box-shadow:0 0 0 3px rgba(69,224,210,.2); } .gj-grid-top .gj-map-target.is-ring-resizing { cursor:se-resize; border-color:var(--gj-orange); box-shadow:0 0 0 3px rgba(255,159,104,.24); } .gj-grid-top .gj-map-target:nth-child(1) { inset:11%; z-index:1; } .gj-grid-top .gj-map-target:nth-child(2) { inset:29%; z-index:2; } .gj-grid-top .gj-map-target:nth-child(3) { inset:47%; z-index:3; }
.gj-map-section { min-width:0; overflow:auto; padding:8px; border:1px solid rgba(255,255,255,.28); background:rgba(13,10,32,.74); color:var(--gj-ink); text-shadow:0 1px 5px rgba(0,0,0,.8); } .gj-map-section[open] { box-shadow:inset 0 0 0 1px rgba(69,224,210,.22); } .gj-map-section-summary { display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none; } .gj-map-section-summary::-webkit-details-marker { display:none; } .gj-map-section-summary > div { min-width:0; flex:1; } .gj-map-section-summary strong,.gj-map-section-summary span { display:block; } .gj-map-section-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; } .gj-map-section-summary div > span { color:var(--gj-cyan); font-size:8px; } .gj-map-section-body { margin-top:6px; } .gj-map-section-body .gj-section-name { font-size:10px; } .gj-map-section-body .gj-section-note { min-height:42px; max-height:58px; margin-top:6px; font-size:9px; } .gj-map-section-body .gj-map-editor { width:100%; margin:7px 0 5px; } .gj-map-section-body .gj-list { max-height:88px; overflow:auto; }
.gj-saved-layers { margin-top:6px; border-top:1px solid rgba(255,255,255,.18); padding-top:5px; } .gj-saved-layers > summary { cursor:pointer; color:var(--gj-cyan); font-size:9px; font-weight:800; } .gj-saved-layers .gj-list { margin-top:5px; } .gj-map-action { display:flex; flex-direction:column; align-items:stretch; } .gj-map-action .gj-map-editor { width:min(290px,100%); margin:0 auto 6px; } .gj-map-action .gj-saved-layers { width:min(290px,100%); margin:0 auto; background:rgba(24,20,46,.88); padding:6px 8px; border-radius:8px; }
.gj-piece-map.gj-layered-map { display:block; } .gj-piece-map.gj-layered-map img { width:100%; } .gj-layered-labels { position:absolute; inset:0; pointer-events:none; } .gj-map-action { position:absolute; left:50%; bottom:10px; width:min(260px,calc(100% - 20px)); transform:translateX(-50%); } .gj-map-action .gj-target-add { margin:0; background:rgba(24,20,46,.88); }
.gj-strip-boundaries { position:absolute; z-index:8; inset:0; pointer-events:none; } .gj-strip-boundary { position:absolute; left:5%; right:5%; width:90%; height:28px; padding:0; border:0; background:transparent; transform:translateY(-50%); cursor:ns-resize; touch-action:none; pointer-events:auto; } .gj-strip-boundary:before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; border-radius:2px; background:rgba(69,224,210,.95); box-shadow:0 0 0 1px rgba(13,10,32,.75),0 0 8px rgba(69,224,210,.7); transform:translateY(-50%); } .gj-strip-boundary span { position:absolute; left:50%; top:50%; width:42px; height:12px; border:1px solid var(--gj-cyan); border-radius:999px; background:rgba(24,20,46,.94); transform:translate(-50%,-50%); } .gj-strip-boundary span:after { content:"↕"; position:absolute; inset:50% auto auto 50%; color:var(--gj-cyan); font-size:10px; font-weight:900; line-height:1; transform:translate(-50%,-50%); } .gj-strip-boundary:hover:before,.gj-strip-boundary:focus-visible:before,.gj-strip-boundary.is-dragging:before { height:3px; background:#fff; } .gj-strip-boundary:focus-visible { outline:2px solid var(--gj-orange); outline-offset:2px; } .gj-strip-boundary.is-dragging span { border-color:#fff; background:var(--gj-cyan); } .gj-strip-boundary.is-dragging span:after { color:#132b32; }
.gj-strip-regions { position:absolute; z-index:6; inset:0; overflow:hidden; pointer-events:none; } .gj-strip-region { position:absolute; left:0; right:0; border-top:1px solid rgba(69,224,210,.5); border-bottom:1px solid rgba(69,224,210,.5); background:rgba(69,224,210,.025); } .gj-strip-region:nth-child(even) { background:rgba(183,108,255,.035); } .gj-strip-region span { position:absolute; right:9px; top:7px; padding:3px 6px; border-radius:999px; background:rgba(24,20,46,.78); color:rgba(255,255,255,.72); font-size:8px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.gj-map-search-panel { position:relative; z-index:20; margin-top:15px; padding:12px; border:1px solid rgba(69,224,210,.45); border-radius:12px; background:rgba(69,224,210,.06); }
.gj-map-search-panel .gj-map-editor { width:100%; margin:0; }
.gj-map-search-panel .gj-map-editor-label { margin-bottom:6px; color:var(--gj-cyan); font-size:10px; }
.gj-map-search-panel .gj-map-glaze-input { padding:10px 11px; font-size:12px; }
.gj-map-search-panel .gj-map-add { padding:9px 13px; font-size:11px; }
.gj-top-strip-add-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:9px; } .gj-top-strip-add-heading small { color:var(--gj-muted); font-size:9px; } .gj-top-strip-targets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .gj-top-strip-targets .gj-btn { flex:1 1 110px; padding:7px 9px; font-size:10px; } .gj-top-strip-targets .gj-btn.active { border-color:var(--gj-cyan); background:#183e49; color:var(--gj-ink); }
.gj-map-search-results { display:none; max-height:240px; overflow:auto; margin-top:7px; border:1px solid var(--gj-line); border-radius:9px; background:#18142e; box-shadow:0 9px 20px rgba(0,0,0,.24); }
.gj-map-search-choice { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:9px 10px; border:0; border-bottom:1px solid #302850; background:transparent; color:var(--gj-ink); text-align:left; cursor:pointer; }
.gj-map-search-choice:hover,.gj-map-search-choice:focus-visible { background:#302850; outline:2px solid var(--gj-cyan); outline-offset:-2px; }
.gj-map-search-choice span,.gj-map-search-choice b,.gj-map-search-choice small { display:block; min-width:0; }
.gj-map-search-choice b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.gj-map-search-choice small { margin-top:2px; color:var(--gj-cyan); font-size:9px; }
.gj-map-search-choice > strong { flex:0 0 auto; color:var(--gj-orange); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.gj-map-search-empty { padding:10px; color:var(--gj-dim); font-size:10px; }
.gj-discontinued-badge { display:inline-block; margin-left:5px; padding:2px 5px; border:1px solid var(--gj-orange); border-radius:999px; color:var(--gj-orange); font:800 8px "Space Mono",monospace; font-style:normal; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }
.gj-map-web-search { display:flex; align-items:center; gap:7px; padding:10px; background:rgba(183,108,255,.12); color:var(--gj-cyan); font-size:10px; font-weight:900; text-decoration:none; }
.gj-map-web-search:hover,.gj-map-web-search:focus-visible { background:rgba(183,108,255,.24); color:var(--gj-ink); outline:2px solid var(--gj-cyan); outline-offset:-2px; }
.gj-layered-title { position:absolute; z-index:4; top:12px; left:14px; max-width:260px; padding:6px 11px; border:1px solid rgba(69,224,210,.7); border-radius:20px; background:rgba(24,20,46,.9); color:var(--gj-cyan); font-size:10px; font-weight:900; letter-spacing:.04em; line-height:1.25; }
.gj-map-target { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid rgba(255,255,255,.28); background:rgba(13,10,32,.26); color:var(--gj-ink); cursor:pointer; text-shadow:0 1px 5px rgba(0,0,0,.8); transition:background .15s,box-shadow .15s; }
.gj-map-target:hover,.gj-map-target:focus,.gj-map-target.is-over { background:rgba(69,224,210,.18); box-shadow:inset 0 0 0 2px var(--gj-cyan); outline:0; }
.gj-grid-top .gj-map-target.is-ring-selected { background:rgba(69,224,210,.2); border-color:var(--gj-cyan); box-shadow:0 0 0 3px rgba(69,224,210,.34), inset 0 0 0 2px var(--gj-cyan); }
.gj-grid-top.is-preview-result .gj-map-target,.gj-grid-top.is-preview-result .gj-map-target:hover,.gj-grid-top.is-preview-result .gj-map-target:focus,.gj-grid-top.is-preview-result .gj-map-target.is-over,.gj-grid-top.is-preview-result .gj-map-target.is-ring-selected { background:transparent; }
.gj-map-target b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--gj-violet); color:#180e2d; text-shadow:none; font-size:11px; }
.gj-map-target > span:not(.gj-map-labels) { font-size:11px; font-weight:900; } .gj-map-target > small { font-size:9px; color:#d7d0ea; }
.gj-side-boundaries { position:absolute; inset:0; z-index:6; width:100%; height:100%; pointer-events:none; } .gj-side-boundaries path { fill:none; stroke:var(--gj-orange); stroke-width:1.2; vector-effect:non-scaling-stroke; opacity:.9; }
.gj-section-labels { position:absolute; inset:0; z-index:8; pointer-events:none; } .gj-section-label { position:absolute; transform:translate(-50%,-50%); display:block; width:min(270px,calc(100% - 24px)); padding:5px 8px; border:0; border-left:3px solid var(--gj-orange); border-radius:3px; background:rgba(255,255,255,.86); color:#15101f; cursor:pointer; pointer-events:auto; box-shadow:0 3px 10px rgba(0,0,0,.25); text-align:left; } .gj-section-label:hover,.gj-section-label:focus { background:#fff; outline:2px solid var(--gj-cyan); outline-offset:1px; } .gj-section-label b,.gj-section-label small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gj-section-label b { font-size:10px; font-weight:900; } .gj-section-label small { color:#3d2a55; font-size:9px; margin-top:2px; }
.gj-ring-section-label { position:absolute; z-index:5; display:inline-flex; align-items:center; gap:4px; width:auto; max-width:130px; padding:5px 9px; border:1px solid rgba(183,108,255,.75); border-radius:20px; background:rgba(24,20,46,.92); color:var(--gj-cyan); cursor:pointer; pointer-events:auto; box-shadow:0 3px 10px rgba(0,0,0,.35); font-size:9px; font-weight:900; line-height:1; text-align:left; text-shadow:none; white-space:nowrap; } .gj-ring-section-label .gj-edit-icon { margin:0; color:var(--gj-orange); font-size:10px; } .gj-grid-top .gj-map-target:nth-child(1) .gj-ring-section-label { left:76%; top:8%; transform:translate(-50%,-50%); } .gj-grid-top .gj-map-target:nth-child(2) .gj-ring-section-label { left:98%; top:50%; transform:translate(-50%,-50%); } .gj-grid-top .gj-map-target:nth-child(3) .gj-ring-section-label { left:50%; top:2%; transform:translate(-50%,-50%); } .gj-ring-section-label:hover,.gj-ring-section-label:focus { border-color:var(--gj-cyan); background:#302850; color:var(--gj-ink); outline:2px solid var(--gj-cyan); outline-offset:1px; } .gj-other-ring-label { left:17%; top:7%; width:auto; max-width:130px; transform:translate(-50%,-50%); }
.gj-section-glaze-stripe { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 0,transparent 42%,rgba(183,108,255,.22) 47%,rgba(69,224,210,.38) 50%,rgba(183,108,255,.22) 53%,transparent 58%,transparent 100%); } .gj-section-stripe-layers { position:absolute; top:50%; left:34%; max-width:45%; transform:translate(-50%,-50%); color:var(--gj-ink); font-size:9px; font-weight:900; line-height:1.35; text-align:center; text-shadow:0 1px 5px rgba(0,0,0,.9); }
.gj-side-strip-summary { margin-top:10px; padding:11px; border:1px solid rgba(183,108,255,.4); border-radius:11px; background:rgba(183,108,255,.06); } .gj-side-strip-summary-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px; } .gj-side-strip-summary-heading strong { color:var(--gj-cyan); font-size:11px; } .gj-side-strip-summary-heading span { color:var(--gj-dim); font-size:9px; } .gj-side-strip-list { display:grid; gap:5px; } .gj-side-strip-row { display:grid; grid-template-columns:92px minmax(0,1fr) auto; align-items:center; gap:7px; width:100%; padding:7px 8px; border:0; border-left:4px solid var(--gj-orange); border-radius:3px; background:linear-gradient(90deg,rgba(183,108,255,.2),rgba(69,224,210,.06)); color:var(--gj-ink); cursor:pointer; text-align:left; } .gj-side-strip-row:hover,.gj-side-strip-row:focus { outline:2px solid var(--gj-cyan); outline-offset:1px; } .gj-side-strip-row b { font-size:10px; } .gj-side-strip-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; } .gj-side-strip-row small { color:var(--gj-cyan); font-size:9px; white-space:nowrap; }
.gj-preview-application { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; padding:11px 12px; border:1px solid rgba(69,224,210,.45); border-radius:10px; background:rgba(69,224,210,.06); } .gj-preview-application .gj-btn { flex:0 0 auto; padding:10px 15px; font-size:11px; } .gj-preview-application span { color:var(--gj-muted); font-size:9px; line-height:1.45; } .gj-preview-error { flex:1 0 100%; color:#ffb6b6; font-size:10px; font-weight:700; }
.gj-preview-photo-badge { position:absolute; z-index:9; top:12px; right:12px; padding:5px 9px; border:1px solid rgba(69,224,210,.65); border-radius:999px; background:rgba(13,10,32,.82); color:var(--gj-cyan); font-size:9px; font-weight:900; letter-spacing:.02em; pointer-events:none; }
.gj-section-popout { position:fixed; z-index:1000; inset:clamp(10px,4vh,38px) clamp(10px,6vw,88px); width:auto; max-width:none; max-height:none; overflow:auto; transform:none; padding:clamp(18px,4vw,34px); border:1px solid var(--gj-cyan); border-radius:18px; background:rgba(24,20,46,.985); color:var(--gj-ink); box-shadow:0 0 0 100vmax rgba(9,6,21,.76),0 20px 55px rgba(0,0,0,.65); } .gj-section-popout-heading { position:sticky; top:-1px; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin:-5px 0 20px; padding:5px 0 14px; border-bottom:1px solid var(--gj-line); background:rgba(24,20,46,.985); } .gj-section-popout-heading strong,.gj-section-popout-heading span { display:block; } .gj-section-popout-heading strong { font-size:clamp(18px,3vw,25px); } .gj-section-popout-heading span { margin-top:4px; color:var(--gj-cyan); font-size:11px; } .gj-section-popout-heading .gj-mini { flex:0 0 auto; padding:9px 13px; border:1px solid var(--gj-cyan); border-radius:8px; color:var(--gj-cyan); } .gj-section-popout .gj-label { margin-top:15px; font-size:11px; } .gj-section-popout .gj-section-name,.gj-section-popout .gj-section-note { width:100%; } .gj-section-popout .gj-section-note { margin-top:10px; min-height:130px; font-size:13px; } .gj-section-popout .gj-map-editor { width:100%; max-width:680px; margin:18px 0 10px; } .gj-section-popout .gj-map-editor-label { margin-bottom:6px; font-size:11px; } .gj-section-popout .gj-map-editor-row { gap:8px; } .gj-section-popout .gj-map-glaze-input { padding:11px; font-size:13px; } .gj-section-popout .gj-map-add { padding:10px 15px; font-size:12px; } .gj-section-popout .gj-saved-layers { max-width:680px; margin-top:14px; padding-top:12px; } .gj-section-popout .gj-saved-layers > summary { font-size:11px; } .gj-section-popout .gj-saved-layers .gj-list { max-height:none; margin-top:10px; }
.gj-layer-popout { position:absolute; z-index:15; left:50%; bottom:12px; width:min(320px,calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto; transform:translateX(-50%); padding:10px; border:1px solid var(--gj-orange); border-radius:11px; background:rgba(24,20,46,.97); color:var(--gj-ink); box-shadow:0 15px 34px rgba(0,0,0,.58); } .gj-layer-popout-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px; } .gj-layer-popout-heading strong,.gj-layer-popout-heading span { display:block; } .gj-layer-popout-heading strong { overflow-wrap:anywhere; white-space:normal; font-size:13px; } .gj-layer-popout-heading span { margin-top:2px; color:var(--gj-cyan); font-size:8px; } .gj-layer-popout-fields { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; } .gj-layer-popout-field { min-width:0; position:relative; } .gj-layer-popout .gj-label { margin-top:5px; font-size:8px; } .gj-layer-popout-coats { width:58px; margin-top:3px; } .gj-layer-note { width:100%; min-height:42px; margin-top:3px; padding:6px; font-size:10px; } .gj-layer-save { margin-top:8px; padding:7px 11px; font-size:10px; }
.gj-layer-name-input { width:100%; margin-top:4px; }
.gj-layer-name-results { position:relative; z-index:2; margin-top:5px; }
.gj-layer-save { width:100%; margin-top:12px; justify-content:center; }
.gj-region-popout { border-color:var(--gj-orange); }
.gj-region-popout .gj-map-editor { width:100%; margin:8px 0 4px; }
.gj-region-popout .gj-map-editor-label { margin-bottom:5px; font-size:9px; }
.gj-region-popout .gj-map-glaze-input { padding:8px; font-size:11px; }
.gj-region-popout .gj-map-add { padding:7px 10px; font-size:10px; }
.gj-region-layer-list { margin-top:11px; padding-top:10px; border-top:1px solid var(--gj-line); }
.gj-region-layer-list .gj-list { max-height:185px; overflow:auto; }
.gj-map-editor { width:min(180px,88%); margin:4px auto 3px; text-align:left; } .gj-map-editor-label { display:block; margin-bottom:3px; color:#d7d0ea; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; } .gj-map-editor-row { display:flex; gap:4px; } .gj-map-glaze-input { min-width:0; width:100%; border:1px solid rgba(255,255,255,.34); border-radius:6px; padding:6px 6px; background:rgba(24,20,46,.92); color:var(--gj-ink); font:600 10px inherit; } .gj-map-glaze-input:focus { outline:2px solid var(--gj-cyan); outline-offset:1px; } .gj-map-add { flex:0 0 auto; border:1px solid var(--gj-cyan); border-radius:6px; padding:5px 7px; background:var(--gj-cyan); color:#10252d; font:900 10px inherit; cursor:pointer; }
.gj-top-map-editors { position:absolute; z-index:9; left:8px; right:8px; bottom:8px; display:flex; gap:6px; overflow-x:auto; padding:7px; border:1px solid rgba(69,224,210,.45); border-radius:10px; background:rgba(24,20,46,.9); box-shadow:0 5px 18px rgba(0,0,0,.38); } .gj-top-map-editors .gj-map-section { flex:0 0 220px; max-height:230px; }
.gj-photo-label { position:absolute; z-index:10; display:inline-flex; align-items:center; gap:4px; max-width:180px; padding:5px 8px; border:1px solid rgba(69,224,210,.7); border-radius:20px; background:rgba(24,20,46,.92); color:var(--gj-ink); font-size:9px; font-weight:900; text-shadow:none; transform:translate(-50%,-50%); cursor:grab; pointer-events:auto; box-shadow:0 3px 10px rgba(0,0,0,.35); white-space:nowrap; } .gj-photo-label:active { cursor:grabbing; } .gj-photo-label-name { display:block; min-width:0; max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gj-photo-label small { flex:0 0 auto; color:var(--gj-cyan); font-size:8px; font-weight:700; white-space:nowrap; } .gj-photo-label-remove { display:grid; place-items:center; width:17px; height:17px; flex:0 0 17px; margin:-2px -3px -2px 2px; padding:2px; border:0; border-radius:50%; background:rgba(255,103,117,.12); color:#ff8b96; cursor:pointer; } .gj-photo-label-remove:hover,.gj-photo-label-remove:focus-visible { background:rgba(255,103,117,.28); color:#fff; outline:2px solid #ff8b96; outline-offset:1px; } .gj-photo-label-remove svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; } .gj-map-labels { position:absolute; inset:0; z-index:9; pointer-events:none; }
.gj-targets { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-top:15px; } .gj-target { min-height:148px; border:1px solid var(--gj-line); border-radius:14px; padding:12px; background:var(--gj-card2); transition:transform .15s,opacity .15s; } .gj-target.is-over,.gj-layered-list.is-over { border-color:var(--gj-cyan); transform:translateY(-2px); }
.gj-target-heading { display:flex; align-items:center; gap:8px; } .gj-target-heading h3,.gj-layered-heading h3 { margin:0; font-size:13px; } .gj-target-heading p { margin:2px 0 0; color:var(--gj-dim); font-size:9px; }
.gj-target-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; cursor:pointer; list-style:none; } .gj-target-summary::-webkit-details-marker { display:none; } .gj-target-summary strong,.gj-target-summary span { display:block; } .gj-target-summary strong { color:var(--gj-ink); font-size:13px; } .gj-target-summary div > span { margin-top:2px; color:var(--gj-dim); font-size:9px; } .gj-collapse-hint { color:var(--gj-cyan); font-size:9px; font-weight:900; text-transform:uppercase; } .gj-target[open] .gj-collapse-hint { font-size:0; } .gj-target[open] .gj-collapse-hint:after { content:"Collapse"; font-size:9px; } .gj-section-body { margin-top:12px; padding-top:11px; border-top:1px solid var(--gj-line); } .gj-section-body .gj-label { margin-top:10px; } .gj-section-body .gj-label:first-child { margin-top:0; } .gj-section-body .gj-map-editor { width:100%; margin:12px 0 8px; } .gj-section-note { width:100%; min-height:76px; resize:vertical; border:1px solid var(--gj-line); border-radius:8px; padding:8px; background:#18142e; color:var(--gj-ink); font:inherit; font-size:11px; line-height:1.45; } .gj-section-note:focus { outline:2px solid var(--gj-cyan); outline-offset:1px; }
.gj-section-name { width:100%; border:0; border-bottom:1px solid transparent; padding:2px 0; background:transparent; color:var(--gj-ink); font:800 13px inherit; } .gj-section-name:hover,.gj-section-name:focus { border-bottom-color:var(--gj-cyan); outline:0; } .gj-add-section { display:grid; grid-template-columns:minmax(160px,1fr) auto; gap:7px; align-items:center; margin-top:10px; padding:10px; border:1px dashed #58437c; border-radius:11px; } .gj-add-section span { grid-column:1 / -1; color:var(--gj-dim); font-size:9px; }
.gj-target-number { display:grid; place-items:center; width:23px; height:23px; flex:0 0 23px; border-radius:50%; background:#39245f; color:var(--gj-cyan); font-size:10px; font-weight:900; }
.gj-target-add { width:100%; margin:9px 0 7px; padding:8px 9px; border:1px solid #58437c; border-radius:8px; background:#292044; color:var(--gj-ink); font-size:10px; font-weight:800; cursor:pointer; }
.gj-target-add span { display:block; margin-top:2px; color:var(--gj-dim); font-size:9px; font-weight:500; } .gj-target-add:disabled { opacity:.52; cursor:not-allowed; }
.gj-list { min-height:28px; } .gj-empty { padding:11px 5px; color:var(--gj-dim); font-size:11px; font-style:italic; border:1px dashed #58437c; border-radius:8px; text-align:center; }
.gj-layer { display:grid; grid-template-columns:12px 18px minmax(0,1fr) 48px auto; align-items:center; gap:5px; padding:7px; margin:5px 0; border:1px solid var(--gj-line); border-radius:8px; background:#1a1632; cursor:grab; } .gj-layer:hover { border-color:rgba(69,224,210,.7); } .gj-layer:active { cursor:grabbing; } .gj-drag-handle { color:var(--gj-dim); font-size:10px; } .gj-layer-name { min-width:0; overflow:hidden; font-size:11px; font-weight:800; } .gj-layer-name-line { display:flex; align-items:center; min-width:0; } .gj-layer-title-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gj-layer-order-part:last-child { color:var(--gj-orange); } .gj-layer-order-separator { color:var(--gj-dim); font-weight:500; } .gj-layer-kind { display:block; overflow:hidden; color:var(--gj-dim); font-size:9px; font-weight:500; margin-top:2px; text-overflow:ellipsis; white-space:nowrap; } .gj-order { color:var(--gj-orange); font:700 11px "Space Mono",monospace; }
.gj-coat-wrap { display:flex; flex-direction:column; gap:2px; color:var(--gj-dim); font-size:8px; text-transform:uppercase; } .gj-coats { width:45px; padding:5px; border:1px solid var(--gj-line); border-radius:6px; background:#18142e; color:var(--gj-ink); font-size:11px; } .gj-mini { border:0; padding:3px; background:transparent; color:var(--gj-muted); cursor:pointer; font-size:10px; } .gj-mini:hover,.gj-mini:focus { color:var(--gj-orange); }
.gj-order-remove { display:inline-grid; place-items:center; width:24px; height:24px; margin-left:3px; padding:0; border:1px solid rgba(255,103,117,.7); border-radius:50%; background:rgba(255,103,117,.12); color:#ff6775; font-size:19px; font-weight:900; line-height:1; } .gj-order-remove:hover,.gj-order-remove:focus-visible { border-color:#ff8b96; background:rgba(255,103,117,.28); color:#fff; outline:2px solid #ff8b96; outline-offset:1px; }
.gj-layered-list { margin-top:15px; padding:13px; border:1px solid rgba(183,108,255,.35); border-radius:13px; background:rgba(183,108,255,.08); } .gj-layered-list.is-over { border-color:var(--gj-cyan); box-shadow:inset 0 0 0 1px var(--gj-cyan); } .gj-layered-list .gj-list { min-height:86px; } .gj-ordered-application-list .gj-empty { min-height:58px; display:grid; place-items:center; }
.gj-layered-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .gj-layer-count { padding:4px 8px; border-radius:20px; background:#39245f; color:var(--gj-cyan); font-size:9px; font-weight:900; }
@media (max-width:760px) { .gj-layout { grid-template-columns:1fr; } .gj-step-map { grid-column:auto; } .gj-stepper { display:flex; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; } .gj-step-choice { flex:0 0 142px; scroll-snap-align:start; } .gj-wizard-actions { grid-template-columns:1fr 1fr; } .gj-wizard-actions > span { grid-column:1 / -1; grid-row:1; } .gj-wizard-actions .gj-btn { grid-row:2; width:100%; } .gj-hero { padding:22px 18px; } .gj-hero-top { flex-direction:column; gap:14px; } .gj-journal-library-link { width:100%; justify-content:center; } .gj-mark { right:-35px; opacity:.35; } .gj-card { padding:15px; } .gj-layer { grid-template-columns:10px 18px minmax(0,1fr) 44px; } .gj-layer .gj-layer-actions { grid-column:3 / 5; } .gj-piece-map,.gj-piece-map img { min-height:0; height:auto; } .gj-section-popout { inset:6px; padding:18px 14px; border-radius:12px; } .gj-section-popout .gj-layer { grid-template-columns:10px 18px minmax(0,1fr) 44px; } }
@media (max-width:700px) { .gj-context-tools { grid-template-columns:1fr; } }
@media (max-width:560px) { .gj-switch-row { grid-template-columns:1fr; } .gj-targets { grid-template-columns:1fr; } .gj-add-section { grid-template-columns:1fr; } .gj-add-section span { grid-column:auto; } .gj-preview-application { align-items:stretch; flex-direction:column; } .gj-preview-application .gj-btn { width:100%; } }
@media (max-width:460px) { .gj-photos,.gj-mode,.gj-photo-surface-grid { grid-template-columns:1fr; } .gj-piece-map { min-height:260px; } .gj-selected { align-items:flex-start; flex-wrap:wrap; } }

/* My Glaze Journal library — an image-led, personal shelf rather than a data table. */
#panel-glaze-journal-library.gj-library-shell { max-width:1120px; margin:0 auto; padding:clamp(22px,5vw,56px) clamp(14px,3vw,28px) 64px; color:var(--gj-ink); font-family:"Plus Jakarta Sans","Segoe UI",sans-serif; }
.gj-library-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:4px 0 28px; }
.gj-library-head h1 { max-width:650px; margin:9px 0 10px; color:var(--gj-ink); font-family:"Clash Display","Plus Jakarta Sans",sans-serif; font-size:clamp(36px,7vw,72px); line-height:.94; letter-spacing:-.065em; }
.gj-library-head p { max-width:560px; margin:0; color:var(--gj-muted); font-size:14px; line-height:1.7; }
.gj-library-new { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:0 0 auto; border:1px solid var(--gj-cyan); border-radius:999px; padding:12px 17px; background:var(--gj-cyan); color:#122a30; font:900 11px "Plus Jakarta Sans","Segoe UI",sans-serif; cursor:pointer; transition:transform .15s,opacity .15s; }
.gj-library-new:hover,.gj-library-new:focus-visible { transform:translateY(-2px); opacity:.9; outline:0; }
.gj-library-new > span { font-size:19px; font-weight:400; line-height:.6; }
.gj-library-rule { display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; padding:11px 0; border-top:1px solid var(--gj-line); border-bottom:1px solid var(--gj-line); color:var(--gj-dim); font:800 9px "Space Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.gj-library-rule span:first-child { color:var(--gj-orange); }
.gj-library-grid { column-count:3; column-gap:17px; }
.gj-library-grid.is-short { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; column-count:auto; gap:17px; }
.gj-library-grid.is-short .gj-library-card { display:block; margin-bottom:0; }
.gj-library-card { display:inline-block; width:100%; margin:0 0 18px; overflow:hidden; break-inside:avoid; border:1px solid var(--gj-line); border-radius:17px; background:linear-gradient(145deg,var(--gj-card),#19152f); box-shadow:0 12px 28px rgba(5,3,18,.22); transition:transform .2s,opacity .2s; }
.gj-library-card:hover { transform:translateY(-4px); }
.gj-library-image { position:relative; display:block; width:100%; min-height:178px; overflow:hidden; padding:0; border:0; background:#17132a; color:var(--gj-ink); cursor:pointer; text-align:left; }
.gj-library-image img { display:block; width:100%; height:auto; min-height:178px; max-height:430px; object-fit:cover; transition:transform .35s,opacity .2s; }
.gj-library-card:hover .gj-library-image img { transform:scale(1.035); }
.gj-library-image:focus-visible { outline:3px solid var(--gj-cyan); outline-offset:-3px; }
.gj-library-image-tag { position:absolute; left:11px; bottom:10px; max-width:calc(100% - 22px); overflow:hidden; padding:5px 8px; border:1px solid rgba(69,224,210,.45); border-radius:5px; background:rgba(18,14,39,.84); color:var(--gj-cyan); font:800 8px "Space Mono",monospace; letter-spacing:.03em; text-overflow:ellipsis; white-space:nowrap; }
.gj-library-no-photo { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; min-height:178px; padding:20px 17px; background:radial-gradient(circle at 75% 15%,rgba(183,108,255,.42),transparent 34%),linear-gradient(140deg,#29214f,#15132a 70%); }
.gj-library-no-photo:before { content:""; display:block; width:58px; height:72px; margin-bottom:auto; border:1px solid rgba(69,224,210,.42); border-radius:45% 45% 38% 38%; transform:rotate(12deg); }
.gj-library-no-photo b { color:var(--gj-ink); font-size:13px; }
.gj-library-no-photo small { margin-top:4px; color:var(--gj-muted); font-size:10px; line-height:1.4; }
.gj-library-card-body { padding:15px 16px 16px; }
.gj-library-card-top,.gj-library-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gj-library-date,.gj-library-index { color:var(--gj-dim); font:800 8px "Space Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.gj-library-index { color:var(--gj-orange); }
.gj-library-card h2 { margin:9px 0 7px; color:var(--gj-ink); font-family:"Clash Display","Plus Jakarta Sans",sans-serif; font-size:21px; line-height:1.03; letter-spacing:-.04em; }
.gj-library-card p { min-height:32px; margin:0 0 16px; color:var(--gj-muted); font-size:10px; line-height:1.55; }

/* Glaze Journal cards — Monochrome Studio. Photos remain unchanged. */
.gj-card,
.gj-library-card,
.gj-library-no-photo {
  border-color: var(--transparent-content-ink, var(--text)) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--transparent-content-ink, var(--text)) !important;
  box-shadow: none !important;
}
.gj-library-card :where(h2, p, small),
.gj-library-no-photo :where(b, small) {
  color: var(--transparent-content-ink, var(--text)) !important;
}
.gj-library-card p,
.gj-library-no-photo small {
  opacity: .72;
}
.gj-library-no-photo:before {
  border-color: currentColor !important;
}
.gj-library-card p.is-muted { color:var(--gj-dim); font-style:italic; }
.gj-library-card-foot { padding-top:11px; border-top:1px solid rgba(66,56,102,.8); color:var(--gj-dim); font-size:9px; }
.gj-library-edit { border:0; padding:0; background:transparent; color:var(--gj-cyan); font:900 10px inherit; cursor:pointer; }
.gj-library-edit:hover,.gj-library-edit:focus-visible { color:var(--gj-orange); outline:0; }
.gj-library-edit span { margin-left:4px; font-size:14px; }
.gj-library-empty,.gj-library-error { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:430px; padding:38px 24px; border:1px dashed #7152a4; border-radius:20px; background:radial-gradient(circle at 50% 0,rgba(183,108,255,.16),transparent 48%),rgba(24,20,46,.5); text-align:center; }
.gj-library-empty-mark { width:90px; height:118px; margin-bottom:25px; border:1px solid rgba(69,224,210,.5); border-radius:48% 48% 42% 42%; transform:rotate(-8deg); box-shadow:inset 12px 0 0 rgba(183,108,255,.11),12px 9px 0 -1px rgba(255,159,104,.48); }
.gj-library-empty h2,.gj-library-error h2 { margin:10px 0 8px; font-family:"Clash Display","Plus Jakarta Sans",sans-serif; font-size:clamp(25px,4vw,38px); letter-spacing:-.045em; }
.gj-library-empty p,.gj-library-error p { max-width:440px; margin:0 0 22px; color:var(--gj-muted); font-size:12px; line-height:1.65; }

/* Glaze Journal empty states — Monochrome Studio. */
.gj-empty,
.gj-map-search-empty,
.gj-library-empty,
.gj-library-error {
  border-color: var(--transparent-content-ink, var(--text)) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--transparent-content-ink, var(--text)) !important;
  box-shadow: none !important;
}
.gj-library-empty :where(.gj-kicker, h2, p),
.gj-library-error :where(.gj-kicker, h2, p) {
  color: var(--transparent-content-ink, var(--text)) !important;
}
.gj-library-empty p,
.gj-library-error p,
.gj-map-search-empty {
  opacity: .72;
}
.gj-library-empty-mark {
  border-color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--transparent-content-ink, var(--text));
}
.gj-library-error { min-height:300px; }
@media (max-width:820px) { .gj-library-grid { column-count:2; } .gj-library-grid.is-short { grid-template-columns:repeat(2,minmax(0,1fr)); } .gj-library-head { align-items:flex-start; flex-direction:column; } }
@media (max-width:520px) { #panel-glaze-journal-library.gj-library-shell { padding-top:24px; } .gj-library-grid { column-count:1; } .gj-library-grid.is-short { display:block; } .gj-library-grid.is-short .gj-library-card { margin-bottom:18px; } .gj-library-head h1 { font-size:45px; } .gj-library-new { width:100%; } }

/* Journal navigation follows the current theme, rather than retaining a
   dark-only banner beneath the shared light-theme text treatment. */
#panel-glaze-journal .gj-hero,
#panel-glaze-journal .gj-wizard-actions {
  background: transparent;
  border-color: var(--transparent-content-ink, var(--text));
  color: var(--transparent-content-ink, var(--text));
  box-shadow: none;
}
#panel-glaze-journal .gj-hero h1,
#panel-glaze-journal .gj-hero p,
#panel-glaze-journal .gj-wizard-actions > span {
  color: var(--transparent-content-ink, var(--text));
}
#panel-glaze-journal .gj-hero p { opacity: .85; }
#panel-glaze-journal .gj-mark { opacity: .15; pointer-events: none; }
#panel-glaze-journal .gj-step-choice {
  background: transparent;
  border-color: var(--text-muted);
  color: var(--transparent-content-ink, var(--text));
}
#panel-glaze-journal .gj-step-choice.is-active {
  background: var(--surface-3);
  border-color: var(--transparent-content-ink, var(--text));
}
#panel-glaze-journal .gj-step-choice b {
  color: inherit;
  font-size: 12px;
}
#panel-glaze-journal .gj-step-choice small {
  color: inherit;
  font-size: 11px;
  line-height: 1.4;
  opacity: .85;
}
#panel-glaze-journal .gj-step-number {
  color: var(--transparent-content-ink, var(--text));
}
#panel-glaze-journal .gj-step-choice.is-active .gj-step-number,
#panel-glaze-journal .gj-step-choice.is-complete .gj-step-number {
  color: #10252d;
}

#panel-glaze-journal .gj-generic-photo-option {
  display: block;
  width: 100%;
  max-width: 560px;
  min-height: 76px;
  padding: 16px 18px;
  border: 2px solid var(--transparent-content-ink, var(--text));
  border-radius: 12px;
  background: transparent;
  color: var(--transparent-content-ink, var(--text));
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
#panel-glaze-journal .gj-generic-photo-option b {
  color: var(--transparent-content-ink, var(--text));
  font-size: 18px;
  line-height: 1.35;
}
#panel-glaze-journal .gj-generic-photo-option small {
  color: var(--transparent-content-ink, var(--text));
  font-size: 14px;
  line-height: 1.5;
  margin-top: 6px;
}
#panel-glaze-journal .gj-generic-photo-option[aria-pressed="true"] {
  background: var(--surface-3);
}
#panel-glaze-journal .gj-generic-photo-option:hover,
#panel-glaze-journal .gj-generic-photo-option:focus-visible {
  background: var(--surface-3);
  outline: 2px solid var(--transparent-content-ink, var(--text));
  outline-offset: 3px;
}
#panel-glaze-journal .gj-generic-selection {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
}

/* These mapping tabs retain dark purple/teal fills in both themes, so their
   text must stay light rather than inheriting the light-theme page ink. */
#panel-glaze-journal .gj-segment .gj-btn,
#panel-glaze-journal .gj-mode .gj-btn,
#panel-glaze-journal .gj-top-strip-targets .gj-btn {
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
}
#panel-glaze-journal .gj-mode .gj-btn b,
#panel-glaze-journal .gj-mode .gj-btn small {
  color: #fff !important;
  opacity: 1;
}
#panel-glaze-journal .gj-mode .gj-btn small {
  font-size: 12px;
  line-height: 1.45;
}