/* ORIVON Sightline — framing preview (Capture mode of Plan a Session and of Tonight).
   Loaded only by sightline.html, in its own file so the shared stylesheet (1-year immutable cache) does not need a new
   edition. It uses the site's existing custom properties with fallbacks, so it works with the active visual system and can
   be moved to a newer token set later. No inline styles, no !important, no motion. */

.mc-framing-config {
  margin: 1.1rem 0 0;
  padding: 1rem 1.1rem 1.1rem;
  min-inline-size: 0;
  border: 1px solid var(--line, rgba(212, 208, 199, 0.12));
  border-radius: var(--radius-md, 6px);
}
.mc-framing-config[hidden] { display: none; }
.mc-framing-legend {
  padding: 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver-2, #8a8b8c);
}
.mc-framing-optional { color: var(--polar-white-dim, #d4d0c7); }
.mc-framing-intro { margin: 0.3rem 0 0.9rem; font-size: 0.85rem; line-height: 1.55; color: var(--silver, #a8a8a6); }
.mc-framing-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.9rem; }
.mc-framing-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.mc-framing-label { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--polar-white-dim, #d4d0c7); }
.mc-framing-unit { color: var(--silver-2, #8a8b8c); }
.mc-framing-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--orv-control-border, rgba(212, 208, 199, 0.62));
  border-radius: var(--radius-sm, 3px);
  background: rgba(255, 255, 255, 0.03);
  color: var(--polar-white, #f2efe8);
  font: inherit;
  font-size: 1rem;
}
.mc-framing-input:focus-visible,
.mc-framing-range:focus-visible,
.mc-framing-toggle:focus-visible,
.mc-framing-compact-toggle:focus-visible,
.mc-framing-suggest:focus-visible,
.mc-framing-reset:focus-visible,
.mc-framing-clear:focus-visible,
.mc-framing-link:focus-visible { outline: 2px solid var(--polar-white, #f2efe8); outline-offset: 2px; }
.mc-framing-input[aria-invalid="true"] { border-style: dashed; border-color: var(--orv-error, #e8806f); }
.mc-framing-error { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--orv-error, #e8806f); }
.mc-framing-error[hidden] { display: none; }
.mc-framing-help { margin: 0.8rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--silver-2, #8a8b8c); }
.mc-framing-result { margin: 0.8rem 0 0; font-size: 0.95rem; color: var(--polar-white, #f2efe8); }
.mc-framing-result.is-empty { display: none; }
.mc-framing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.8rem; }
.mc-framing-clear,
.mc-framing-link {
  min-height: 44px;
  padding: 0.4rem 0.2rem;
  border: 0;
  background: none;
  color: var(--polar-white-dim, #d4d0c7);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mc-framing-link { display: inline; min-height: 44px; padding: 0.6rem 0; }
.mc-framing-privacy { font-size: 0.74rem; color: var(--silver-2, #8a8b8c); }

/* one result: the button and its closed panel */
.mc-framing { margin-top: 1.1rem; }
.mc-framing[hidden] { display: none; }
.mc-framing-toggle { min-height: 44px; border-color: var(--orv-control-border, rgba(212, 208, 199, 0.62)); transition: none; }
.mc-framing-toggle::after { content: "+"; margin-left: 0.6rem; font-weight: 400; }
.mc-framing-toggle[aria-expanded="true"]::after { content: "\2212"; }
.mc-framing-panel { margin-top: 0.9rem; padding: 1rem 1.1rem; border: 1px solid var(--line, rgba(212, 208, 199, 0.12)); border-radius: var(--radius-md, 6px); }
.mc-framing-panel[hidden] { display: none; }
.mc-framing-empty { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--silver, #a8a8a6); }

.mc-framing-status {
  margin: 0 0 0.8rem;
  padding: 0.2rem 0 0.2rem 0.8rem;
  border-left: 3px solid var(--silver, #a8a8a6);
  font-size: 0.95rem;
  color: var(--polar-white, #f2efe8);
}
.mc-framing-status-label { color: var(--silver-2, #8a8b8c); }
/* the state is always spelled out; the left rule only adds a second, non-colour cue */
.mc-framing-status--comfortable { border-left-style: solid; }
.mc-framing-status--tight { border-left-style: double; border-left-width: 5px; }
.mc-framing-status--cropped { border-left-style: dashed; }
.mc-framing-status--small { border-left-style: dotted; }
.mc-framing-status--point { border-left-width: 1px; }
.mc-framing-status--unavailable { border-left-style: dashed; border-left-width: 1px; }

.mc-framing-figure { margin: 0 0 0.9rem; }
.mc-framing-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.mc-framing-svg-bg { fill: rgba(255, 255, 255, 0.02); }
.mc-framing-frame { fill: none; stroke: var(--polar-white, #f2efe8); stroke-width: 1.5; }
.mc-framing-object-fill { fill: rgba(236, 232, 222, 0.44); stroke: none; }
.mc-framing-object-outline { fill: none; stroke: var(--polar-white-dim, #d4d0c7); stroke-width: 1; stroke-dasharray: 4 3; }
.mc-framing-object-outline.is-approximate { stroke-dasharray: 2 3; }
.mc-framing-point { fill: var(--polar-white, #f2efe8); stroke: none; }
.mc-framing-point-tick { stroke: var(--polar-white-dim, #d4d0c7); stroke-width: 1; }
.mc-framing-scalebar { stroke: var(--polar-white-dim, #d4d0c7); stroke-width: 2; }
.mc-framing-caption { margin-top: 0.5rem; font-size: 0.74rem; line-height: 1.5; color: var(--silver-2, #8a8b8c); }

.mc-framing-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem 1rem; margin: 0 0 0.9rem; }
.mc-framing-fact--wide { grid-column: 1 / -1; }
.mc-framing-fact { min-width: 0; }
.mc-framing-fact dt { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--silver-2, #8a8b8c); }
.mc-framing-fact dd { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--polar-white, #f2efe8); overflow-wrap: anywhere; }
.mc-framing-approx-note { margin: 0 0 0.8rem; font-size: 0.85rem; line-height: 1.5; color: var(--polar-white-dim, #d4d0c7); }
.mc-framing-more { margin: 0; }
.mc-framing-more-summary { min-height: 44px; display: flex; align-items: center; padding: 0.2rem 0; color: var(--polar-white, #f2efe8); font-size: 0.85rem; cursor: pointer; }
.mc-framing-more-summary { list-style: none; }
.mc-framing-more-summary::-webkit-details-marker { display: none; }
.mc-framing-more-summary::after { content: "+"; margin-left: 0.6rem; }
.mc-framing-more[open] > .mc-framing-more-summary::after { content: "\2212"; }
.mc-framing-more-summary:focus-visible { outline: 2px solid var(--polar-white, #f2efe8); outline-offset: 2px; }
.mc-framing-summary { margin: 0 0 0.6rem; font-size: 0.85rem; line-height: 1.65; color: var(--polar-white-dim, #d4d0c7); }
.mc-framing-note { margin: 0; font-size: 0.74rem; line-height: 1.55; color: var(--silver-2, #8a8b8c); }

/* Tonight: one compact line, the fields open behind a button */
.mc-framing-config--tonight { margin: 0 0 1.1rem; padding: 0.7rem 1rem 0.9rem; }
.mc-framing-compact-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.mc-framing-compact-summary { flex: 1 1 14rem; margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--polar-white-dim, #d4d0c7); overflow-wrap: anywhere; }
.mc-framing-compact-toggle {
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--orv-control-border, rgba(212, 208, 199, 0.62));
  border-radius: var(--radius-sm, 3px);
  background: none;
  color: var(--polar-white, #f2efe8);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.mc-framing-compact-toggle::after { content: "+"; margin-left: 0.6rem; }
.mc-framing-compact-toggle[aria-expanded="true"]::after { content: "\2212"; }
.mc-framing-compact-body { margin-top: 0.7rem; }
.mc-framing-compact-body[hidden] { display: none; }

/* "Approximate fit": a word and a border style, never colour alone */
.mc-framing-badge {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.5rem;
  border: 1px dashed var(--polar-white-dim, #d4d0c7);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--polar-white-dim, #d4d0c7);
  white-space: nowrap;
}
.mc-framing-badge[hidden] { display: none; }

/* frame rotation */
.mc-framing-rotation { margin: 0 0 0.9rem; padding: 0.8rem 0 0; border-top: 1px solid var(--line, rgba(212, 208, 199, 0.12)); }
.mc-framing-rotation-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.4rem; }
.mc-framing-rotation-input { width: 6.5rem; flex: 0 0 auto; }
.mc-framing-range { flex: 1 1 10rem; min-width: 8rem; min-height: 44px; accent-color: var(--polar-white, #f2efe8); background: none; }
.mc-framing-rotation-buttons { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-top: 0.2rem; }
.mc-framing-suggest,
.mc-framing-reset {
  min-height: 44px;
  padding: 0.4rem 0.2rem;
  border: 0;
  background: none;
  color: var(--polar-white, #f2efe8);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mc-framing-suggest[hidden] { display: none; }
.mc-framing-rotation-note { margin: 0 0 0.9rem; font-size: 0.8rem; line-height: 1.55; color: var(--silver, #a8a8a6); }
.mc-framing-compass-line { stroke: var(--polar-white-dim, #d4d0c7); stroke-width: 1.2; }
.mc-framing-compass-text { fill: var(--polar-white-dim, #d4d0c7); font-size: 7px; font-family: inherit; }
.mc-framing-svg-host { line-height: 0; }
.mc-framing-object-fill.is-approximate { fill: rgba(236, 232, 222, 0.44); }

/* announcements for assistive technology only */
.mc-framing-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 559px) {
  .mc-framing-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-framing-fact dd { font-size: 0.85rem; }
  .mc-framing-caption { font-size: 0.72rem; }
  .mc-framing-help { font-size: 0.75rem; }
}
@media (max-width: 420px) {
  .mc-framing-config { padding: 0.9rem 0.8rem 1rem; }
  .mc-framing-panel { padding: 0.8rem 0.7rem; }
  .mc-framing-config--tonight { padding: 0.6rem 0.8rem 0.8rem; }
}