/* Veille céleste — navigateur d'objets (tuiles, filtres, fiche détaillée), entre les réglages et les courbes. */

.objects{margin-bottom:16px;padding:clamp(16px,1.8vw,24px)}
.obj-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px 16px;flex-wrap:wrap;margin-bottom:14px}
.obj-head h2{margin:2px 0}
.obj-head .sub{margin:0}
.obj-count{font-size:13px;color:var(--muted-ui,#adbfaf);font-variant-numeric:tabular-nums}

.obj-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.obj-search{flex:1 1 240px;min-width:0;height:40px;padding:0 13px;border:1px solid var(--edge,#2e5040);border-radius:12px;background:var(--control,#0b1911);color:var(--ink-ui,#f0f7f1);font:inherit;font-size:14px}
.obj-search:focus{outline:none;border-color:var(--mint,#69b9a5);box-shadow:0 0 0 3px #69b9a52b}
.obj-types{display:flex;gap:6px;flex-wrap:wrap}
.obj-type{display:inline-flex;align-items:center;gap:6px}
.obj-type small{font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;background:#ffffff14;font-variant-numeric:tabular-nums}
.obj-type[hidden]{display:none}
.obj-type.is-empty{opacity:.45}
.obj-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-ui,#adbfaf)}
.obj-sort select{height:40px;padding:0 10px;border:1px solid var(--edge,#2e5040);border-radius:12px;background:var(--control,#0b1911);color:var(--ink-ui,#f0f7f1);font:inherit;font-size:13px}

.obj-filters{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--edge,#2e5040)}
.obj-range{display:flex;flex-direction:column;gap:2px;min-width:150px;font-size:12px;color:var(--muted-ui,#adbfaf)}
.obj-range b{color:var(--ink-ui,#f0f7f1);font-variant-numeric:tabular-nums}
.obj-range input{width:100%;accent-color:var(--mint,#69b9a5)}
.obj-dir{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-ui,#adbfaf)}
.obj-dir .chip{padding:6px 10px}
.dir-track{position:relative;width:170px;padding-top:2px}
.dir-track input{display:block;width:100%;margin:0;accent-color:var(--mint,#69b9a5)}
.obj-dir.is-all .dir-track input,.obj-dir.is-all .dir-compass{opacity:.45}
.dir-scale{display:flex;justify-content:space-between;padding:0 4px;font-size:10px;line-height:1;color:var(--muted-ui,#adbfaf)}
.dir-favs{position:absolute;left:0;right:0;top:-11px;height:12px;pointer-events:none}
.dir-mark{position:absolute;transform:translateX(-50%);padding:0;border:0;background:none;color:#ffd46e;font-size:11px;line-height:1;cursor:pointer;pointer-events:auto;opacity:.75}
.dir-mark.is-on,.dir-mark:hover{opacity:1;text-shadow:0 0 6px rgba(255,212,110,.8)}
.dir-compass{flex:none;width:46px;height:46px;overflow:visible}
.dir-ring{fill:rgba(2,12,8,.35);stroke:var(--edge,#2e5040);stroke-width:1}
.dir-sector{fill:rgba(105,185,165,.28);stroke:rgba(105,185,165,.6);stroke-width:.8}
.dir-needle{stroke:#f3fbf7;stroke-width:1.8;stroke-linecap:round}
.dir-hub{fill:#f3fbf7}
.dir-letter{fill:var(--muted-ui,#adbfaf);font-size:6.5px;font-weight:700;text-anchor:middle;dominant-baseline:central}
.dir-letter.is-north{fill:var(--rose,#ff9f91)}
.dir-fav{height:30px;padding:0 10px;border:1px solid var(--edge,#2e5040);border-radius:9px;background:var(--surface,#10231a);color:var(--muted-ui,#adbfaf);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.dir-fav:hover:not(:disabled){border-color:#ffd46e;color:var(--ink-ui,#f0f7f1)}
.dir-fav.is-saved{border-color:rgba(255,212,110,.6);color:#ffe3a3}
.dir-fav:disabled{opacity:.45;cursor:default}
.obj-reset{margin-left:auto;padding:7px 12px;border:1px solid transparent;border-radius:10px;background:none;color:var(--mint,#69b9a5);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.obj-reset:hover{border-color:var(--edge,#2e5040)}

.obj-body{margin-top:14px}
.obj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px;align-content:start}

.obj-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:3px;min-width:0;height:66px;padding:8px 10px 0 12px;border:1px solid var(--edge,#2e5040);border-radius:12px;background:var(--surface,#10231a);color:var(--ink-ui,#f0f7f1);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .12s,background .12s,transform .12s}
.obj-tile-top{display:flex;align-items:center;gap:6px;min-width:0}
.obj-tile strong{font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obj-tile small{font-size:12px;color:var(--muted-ui,#adbfaf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.obj-glyph{flex:none;width:16px;text-align:center;font-size:13px;color:var(--mint,#69b9a5)}
.obj-strip{position:absolute;left:12px;right:10px;bottom:7px;height:3px;border-radius:2px}
.obj-tile:hover,.obj-tile.is-hover{border-color:var(--mint,#69b9a5);transform:translateY(-1px)}
.obj-tile:focus-visible{outline:2px solid var(--mint,#69b9a5);outline-offset:2px}
.obj-tile.is-pinned{border-color:var(--mint,#69b9a5);background:linear-gradient(135deg,#69b9a538,#69b9a514);box-shadow:inset 0 0 0 1px var(--mint,#69b9a5)}
.obj-tile.on-chart::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.obj-tile.is-out{opacity:.6}
.obj-add-tile{align-items:center;justify-content:center;gap:0;border-style:dashed;color:var(--mint,#69b9a5);padding:6px}
.obj-add-tile span{font-size:20px;line-height:1}
.obj-add-tile small{color:inherit;font-weight:700}
.obj-empty{grid-column:1/-1;margin:8px 2px;font-size:14px;color:var(--muted-ui,#adbfaf)}
.obj-empty button{border:0;background:none;padding:0;color:var(--mint,#69b9a5);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}

/* Objects and chart on the left, the object viewer in its own column on the right. The viewer
   travels down beside both; with the chart widened, only beside the objects. */
/* Grid areas come from js/layout.js (panel order, folded panels, widened chart). */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);column-gap:16px;align-items:start}
.workspace > .panel{margin-bottom:16px}
.viewer-col{grid-area:viewer;align-self:stretch;padding-bottom:16px}
.obj-viewer{position:sticky;top:calc(var(--bar-offset, 0px) + 16px);display:flex;flex-direction:column;gap:10px;height:556px;overflow:hidden;padding:16px;border:1px solid var(--edge,#2e5040);border-radius:24px;background:var(--surface-high,#13261b);transition:border-color .15s}
/* Named so the widen/narrow switch animates the moving panels. */
.obj-viewer{view-transition-name:obj-viewer}
::view-transition-group(*){animation-duration:.35s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.obj-viewer.is-pinned{border-color:var(--mint,#69b9a5);box-shadow:0 0 0 1px #69b9a540}
.ov-empty{margin:auto;max-width:28ch;text-align:center;color:var(--muted-ui,#adbfaf);font-size:14px}
.ov-empty strong{display:block;color:var(--ink-ui,#f0f7f1);margin-bottom:4px}
.ov-empty p{margin:0;line-height:1.5}
.ov-empty-glyph{font-size:26px;color:var(--mint,#69b9a5);margin-bottom:6px}
.ov-head{display:flex;align-items:flex-start;gap:10px}
.ov-glyph{flex:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid #69b9a566;border-radius:50%;background:#69b9a51c;color:var(--mint,#69b9a5)}
.ov-titles{flex:1;min-width:0}
.ov-titles h3{margin:0;font-size:17px;letter-spacing:-.02em;color:var(--ink-ui,#f0f7f1)}
.ov-sub{font-size:13px;color:var(--muted-ui,#adbfaf)}
.ov-icon{flex:none;width:30px;height:30px;border:1px solid var(--edge,#2e5040);border-radius:9px;background:none;color:var(--muted-ui,#adbfaf);font-size:18px;line-height:1;cursor:pointer}
.ov-icon:hover{color:var(--ink-ui,#f0f7f1);border-color:var(--mint,#69b9a5)}
.ov-photo{position:relative;flex:none;display:grid;place-items:center;height:140px;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#16302566,#050a07);overflow:hidden}
.ov-phase{position:absolute;z-index:1;top:8px;right:8px;display:grid;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(240,236,220,.25))}
.ov-phase-inline{display:inline-grid;vertical-align:-2px;margin-right:6px}
.obj-glyph .phase-icon,.ov-glyph .phase-icon{display:block}
.ov-photo-glyph{font-size:34px;color:#69b9a566}
.ov-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.ov-photo.has-photo img{opacity:1}
.ov-credit{position:absolute;left:6px;right:6px;bottom:5px;font-size:10px;color:#ffffffcc;text-shadow:0 1px 3px #000;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0}
.ov-photo.has-photo .ov-credit{opacity:1}
.ov-stats{flex:none;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:13px;font-variant-numeric:tabular-nums}
.ov-stats dt{color:var(--muted-ui,#adbfaf)}
.ov-stats dd{margin:0;color:var(--ink-ui,#f0f7f1);font-weight:650;text-align:right}
.ov-rig,.ov-note{margin:0;font-size:12px;line-height:1.45;color:var(--muted-ui,#adbfaf)}
.ov-rig{color:var(--ink-ui,#f0f7f1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-note{height:2.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ov-actions{flex:none;display:flex;gap:7px;height:38px;margin-top:auto}
.ov-hint{flex:1;display:grid;place-items:center;border:1px dashed var(--edge,#2e5040);border-radius:10px;font-size:13px;font-weight:700;color:var(--mint,#69b9a5)}
.ov-toast{position:absolute;left:14px;right:14px;bottom:60px;margin:0;padding:8px 10px;border-radius:10px;background:rgba(40,12,10,.85);color:#ffd3cb;font-size:12px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.ov-toast.show{opacity:1;transform:none}
.ov-btn{display:inline-flex;align-items:center;justify-content:center;flex:1;white-space:nowrap;padding:8px 11px;border:1px solid var(--mint,#69b9a5);border-radius:10px;background:#69b9a51f;color:var(--ink-ui,#f0f7f1);font:inherit;font-size:13px;font-weight:750;text-decoration:none;cursor:pointer;transition:background .15s}
.ov-btn:hover{background:#69b9a53d}
.ov-btn.active{background:linear-gradient(135deg,#69b9a55c,#69b9a52a)}
.ov-icon.danger{font-size:14px}
.ov-icon.danger:hover{border-color:#ff9f91;background:#ff9f911f}

.obj-dialog{width:min(460px,calc(100% - 32px));padding:20px;border:1px solid var(--edge,#2e5040);border-radius:18px;background:var(--page,#06110c);color:var(--ink-ui,#f0f7f1);box-shadow:0 30px 80px #0009}
.obj-dialog::backdrop{background:#020806b3;backdrop-filter:blur(3px)}
.obj-dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.obj-dialog-head h2{margin:0;font-size:18px}
.obj-dialog .add-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:end;padding:0}
.obj-dialog .add-form .field{min-width:0}
.obj-dialog .add-form .field input{width:100%}
.obj-dialog .add-button{margin:0;height:42px}
.obj-dialog .add-help,.obj-dialog .resolver-status{grid-column:1/-1;margin:0}
.obj-foot{margin-top:10px;text-align:center}

/* Phones: the viewer is a bottom sheet for the pinned object. */
@media(max-width:900px){
  .workspace{display:flex;flex-direction:column}
  .viewer-col{display:none}
  .obj-viewer{position:fixed;z-index:20;left:8px;right:8px;bottom:8px;top:auto;height:auto;max-height:78vh;overflow:auto;display:none;box-shadow:0 -10px 40px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
  .obj-viewer.is-pinned{display:flex}
  .ov-actions{margin-top:4px}
  .obj-reset{margin-left:0}
}

/* Typed azimuth and "forget all" in the direction controls. */
.dir-value{display:inline-flex;align-items:center;gap:1px;font-size:13px;font-weight:700;color:var(--ink-ui,#f0f7f1)}
.dir-value input{width:52px;height:30px;padding:0 4px 0 8px;border:1px solid var(--edge,#2e5040);border-radius:9px;background:var(--control,#0b1911);color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right;-moz-appearance:textfield}
.dir-value input::-webkit-inner-spin-button{opacity:.4}
.dir-value input:focus{outline:none;border-color:var(--mint,#69b9a5)}
.dir-control.is-all .dir-value{opacity:.55}
.dir-forget[hidden]{display:none}
/* Distance from the Moon (js/moon-zone.js): a warning on tiles, the distance in the viewer. */
.obj-moon{flex:none;margin-left:auto;padding:0 6px;border-radius:999px;font-size:11px;font-weight:700;line-height:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.obj-moon.is-close{background:#ff7a6629;color:#ff9d8e}
.obj-moon.is-near{background:#ffd25e24;color:#ffd77a}
.obj-moon.is-clear{background:#69b9a524;color:#8fd6c0}
dd .obj-moon{margin-left:0}