/* /create-your-orbi — claim-flow states (SELECTED → HELD → VERIFIED → IDENTITY → PIXEL → CONFIRM → CLAIMED).
   Adds to create-orbi-field.css without changing it; same modal language: near-black, caption font, thin rules, one orange. */
.ogf-note { font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: rgba(240,237,230,.62); margin: 0 0 14px; }
.ogf-opt { color: rgba(240,237,230,.38); font-size: 12px; letter-spacing: .1em; margin-left: 6px; }
.ogf-field-note.is-bad { color: #ff8a7a; } .ogf-field-note.is-ok { color: #2ecc71; }
.ogf-field-err { margin: 0 0 12px; padding: 8px 12px; border-left: 2px solid #ff5a4f; font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; color: #ff9a8f; }
.ogf-field-err[hidden] { display: none; }

/* hold banner: temporary, never ownership */
.ogf-hold { display: grid; gap: 4px; margin: 0 0 16px; padding: 10px 12px; border: 1px dashed rgba(250,180,60,.45); background: rgba(250,180,60,.05); }
.ogf-hold__t { font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .14em; color: rgba(250,180,60,.95); }
.ogf-hold__d { font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .04em; color: rgba(240,237,230,.65); }
.ogf-hold__d b { font-weight: 400; color: rgba(240,237,230,.95); }
.ogf-hold--expired { border-color: rgba(255,90,79,.5); background: rgba(255,90,79,.05); } .ogf-hold--expired .ogf-hold__t { color: #ff8a7a; }
.ogf-hold__btn { justify-self: start; margin-top: 6px; }
.ogf-stateline { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 14px; padding: 8px 0; border-top: 1px solid rgba(240,237,230,.08); border-bottom: 1px solid rgba(240,237,230,.08);
  font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .14em; color: rgba(240,237,230,.4); }
.ogf-stateline b { font-weight: 400; color: rgba(240,237,230,.85); }
.ogf-state { display: grid; gap: 6px; padding: 8px 0 12px; }
.ogf-state__ok { font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .14em; color: #2ecc71; }
.ogf-state__t { font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 18px; letter-spacing: .06em; color: #f0ede6; margin-bottom: 4px; }

/* identity visibility */
.ogf-vis { display: grid; gap: 0; margin: 4px 0 14px; }
.ogf-vis__h { font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .14em; color: rgba(240,237,230,.55); margin: 0 0 10px; }
.ogf-vis__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ogf-vis__m { display: grid; gap: 4px; text-align: left; padding: 10px 12px; background: transparent; border: 1px solid rgba(240,237,230,.14); cursor: var(--cursor-hover); color: rgba(240,237,230,.6); }
.ogf-vis__m b { font-weight: 400; font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .12em; }
.ogf-vis__m span { font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .03em; color: rgba(240,237,230,.45); line-height: 1.45; }
.ogf-vis__m[aria-checked="true"] { border-color: #fa680c; color: #f0ede6; } .ogf-vis__m[aria-checked="true"] b { color: #fa680c; }
.ogf-vis__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(240,237,230,.07);
  font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .1em; color: rgba(240,237,230,.75); }
.ogf-vis__row em { font-style: normal; font-size: 12px; color: rgba(240,237,230,.4); text-align: right; }
.ogf-vis__row--fixed span { color: rgba(240,237,230,.5); }
.ogf-vis__t { min-width: 72px; padding: 4px 8px; background: none; border: 1px solid rgba(240,237,230,.18); cursor: var(--cursor-hover); font-family: var(--font-caption, "Pixelify Sans", monospace);
  font-size: 12px; letter-spacing: .12em; color: rgba(240,237,230,.5); }
.ogf-vis__t[aria-pressed="true"] { border-color: #fa680c; color: #fa680c; }
.ogf-vis__t:disabled { opacity: .45; cursor: var(--cursor-default); }
.ogf-vis .ogf-note { margin-top: 10px; }

/* pixel palette + preview */
.ogf-pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 14px; }
.ogf-pal { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: none; border: 1px solid rgba(240,237,230,.12); cursor: var(--cursor-hover);
  font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .1em; color: rgba(240,237,230,.6); text-align: left; }
.ogf-pal i { width: 14px; height: 14px; flex: none; box-shadow: inset 0 0 0 1px rgba(240,237,230,.22); }   /* light ring: the BLACK swatch stays visible */
.ogf-pals--mono { grid-template-columns: repeat(2, minmax(0, 150px)); }
.ogf-pal[aria-checked="true"] { border-color: #fa680c; color: #f0ede6; }
.ogf-pv { display: flex; align-items: center; gap: 16px; padding: 12px; margin-bottom: 14px; border: 1px solid rgba(240,237,230,.08); }
.ogf-pv__g { display: grid; grid-template-columns: repeat(5, 14px); gap: 2px; flex: none; }
.ogf-pv__g i { position: relative; width: 14px; height: 14px; background: rgba(240,237,230,.05); display: grid; place-items: center; }
.ogf-pv__g i.ogf-pv__f { background: rgba(250,180,60,.12); }
.ogf-pv__g i.ogf-pv__me svg { width: 9px; height: auto; }
.ogf-pv__g i.ogf-pv__me--mono { box-shadow: inset 0 0 0 1px rgba(240,237,230,.55); }   /* owned-standard outline, as on the field */
.ogf-pv__g i.ogf-pv__me svg rect { fill: #050200; }
.ogf-pv__t { display: grid; gap: 5px; font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .04em; line-height: 1.5; color: rgba(240,237,230,.55); }
.ogf-pv__t b { font-weight: 400; font-size: 12px; letter-spacing: .12em; color: #f0ede6; }

/* success */
.ogf-success__pixel { display: inline-flex; align-items: center; gap: 8px; margin: 8px auto 4px; font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .12em; color: rgba(240,237,230,.7); }
.ogf-success__pixel i { width: 18px; height: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.ogf-success__done { font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .1em; color: rgba(240,237,230,.6); margin-top: 8px; }
.ogf-modal :is(button, a, input, textarea):focus-visible { outline: 2px solid #fa680c; outline-offset: 2px; }
@media (max-width: 480px) { .ogf-vis__modes { grid-template-columns: 1fr; } }
/* action row: the primary button used to be width:100% + flex:none, which pushed BACK / CANCEL outside the modal (clipped, unreachable) */
.ogf-modal-actions > .ogf-btn-primary { width: auto; flex: 1 1 auto !important; }
.ogf-modal-actions > .ogf-btn-secondary { width: auto; flex: none; }

/* network-error box inside the confirm step: neutral, not an alarm stripe */
.ogf-field-err.ogf-field-err--box { border-left-color: rgba(240,237,230,.25); color: inherit; padding: 4px 0 0 12px; }

/* The field is a full-screen surface: the page never scrolls away from it (keyboard focus or touch overscroll used to
   reveal the hidden footer below the 100dvh field). Legal/help links stay reachable via the nav and the help chip. */
html:has(body.ogf-active) { overflow: hidden; overscroll-behavior: none; }
body.ogf-active > footer.ob-footer { display: none !important; }   /* shell.css forces .ob-footer display:block !important */

/* touch: practical hit areas for field controls without changing their visual size on desktop */
@media (pointer: coarse), (max-width: 767px) {
  .ogf-zbtn { min-height: 40px; min-width: 40px; padding-inline: 10px; }
  .ogf-inspector__close { min-width: 44px; min-height: 44px; }
  .ogf-inspector__actions .ogf-btn-primary, .ogf-inspector__actions .ogf-btn-secondary { min-height: 44px; }
  .ogf-modal-actions button, .ogf-modal-actions a { min-height: 44px; }
  .ogf-help summary, .ogf-support { min-height: 40px; }
  .ogf-inspector { padding-bottom: env(safe-area-inset-bottom); }
}
.ogf-inspector__actions a.ogf-btn-primary, .ogf-inspector__actions a.ogf-btn-secondary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* account / identity flow — review sections, step tabs on small screens, success type line */
.ogf-step-tab b { font-weight: 400; }
@media (max-width: 560px) { .ogf-step-tab span { display: none; } .ogf-step-tab.active span { display: inline; } .ogf-step-tab.active { flex: 2.6; } }
.ogf-confirm-sec { padding: 10px 0 4px; font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .14em; color: #fa680c; border-bottom: 1px solid rgba(250,104,12,.12); }
.ogf-confirm-sec:first-child { padding-top: 2px; }
.ogf-success__type { margin: 10px auto; font-family: var(--font-caption, "Pixelify Sans", monospace); font-size: 12px; letter-spacing: .14em; color: #cecdc9; }
.ogf-vis__row .ogf-opt { font-style: normal; margin-left: 6px; }
.ogf-modal .ob-ferr { margin-top: 4px; }
.ogf-btn-primary[disabled], .ogf-btn-primary:disabled { opacity: .45; cursor: var(--cursor-default); }
/* the step's primary action stays reachable on short screens: the action row sticks to the bottom of the scrolling dialog */
.ogf-modal__body > .ogf-modal-actions { position: sticky; bottom: 0; z-index: 2; padding-bottom: 14px; background: #080710; box-shadow: 0 -12px 14px -6px #080710; }
/* position class label: the Crown sits inline with its text */
.ogf-confirm-val svg, .ogf-hold__d svg, .ogf-hold__t svg { display: inline-block; vertical-align: -1px; margin-right: 5px; }