/* Ohara - the app's own dialog, tooltip and selection rules (run 10: J1, J18, J19).
   Goes with web/ui.js; shared by the storefront and the back office. Built on the
   design tokens in app.css (with fallbacks, so it still reads right without it).
   Motion is transform/opacity only; reduced motion keeps a plain fade. */

/* ============================== J1 - THE DIALOG ============================== */
.ui-dialog{box-sizing:border-box;width:min(468px,calc(100vw - 28px));max-width:none;max-height:calc(100vh - 28px);margin:auto;padding:0;border:0;
  background:transparent;color:var(--text,#f2f3ff);overflow:visible}
.ui-dialog::backdrop{background:rgba(3,4,9,.8);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.ui-dialog.is-fallback{position:fixed;inset:0;z-index:1000}
.ui-dialog-panel{position:relative;display:grid;gap:16px;max-height:calc(100vh - 28px);overflow:auto;padding:28px 26px 24px;border-radius:var(--r-l,20px);
  background:radial-gradient(130% 90% at 0% 0%,rgba(255,70,54,.15),transparent 52%),linear-gradient(180deg,#121531,#0a0c19);
  border:1px solid var(--line-2,rgba(150,160,255,.24));box-shadow:0 44px 120px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
/* the signal edge along the top: the same red->amber as the shop's one action colour */
.ui-dialog-panel::before{content:'';position:absolute;left:26px;right:26px;top:-1px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--signal,#ff4636),var(--signal-2,#ff9a1f))}
.ui-dialog[data-tone="danger"] .ui-dialog-panel{background:radial-gradient(130% 90% at 0% 0%,rgba(255,107,107,.17),transparent 52%),linear-gradient(180deg,#151227,#0b0a17);border-color:rgba(255,107,107,.42)}
.ui-dialog[data-tone="danger"] .ui-dialog-panel::before{background:linear-gradient(90deg,#ff3b4e,var(--bad,#ff6b6b))}
.ui-dialog-title{margin:0;padding-right:8px;font:700 clamp(23px,3.2vw,28px)/1.02 var(--display,system-ui);letter-spacing:.01em;text-transform:uppercase;color:var(--text,#f2f3ff)}
.ui-dialog-body{display:grid;gap:12px;color:var(--text-2,#b4b8d8);font:400 var(--fs-m,15px)/1.55 var(--sans,system-ui);overflow-wrap:anywhere}
.ui-dialog-body p{margin:0}
.ui-dialog-body>div{display:grid;gap:12px} /* a Node body keeps the same rhythm as paragraphs */
.ui-dialog-body b,.ui-dialog-body strong{color:var(--text,#f2f3ff)}
.ui-dialog-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.ui-dialog [hidden],.ui-tip[hidden]{display:none!important}

/* a figure the decision turns on - e.g. what a sale pays - at the weight of the card view's own */
.ui-dialog .ui-figure{display:grid;gap:6px;margin:0;padding:14px 16px;border-radius:var(--r-m,12px);border:1px solid rgba(255,197,58,.36);
  background:linear-gradient(160deg,rgba(255,197,58,.12),rgba(255,197,58,.03))}
.ui-dialog .ui-figure>span{font:700 10px/1 var(--display,system-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3,#7b80a6)}
.ui-dialog .ui-figure>b{display:flex;align-items:center;gap:10px;font:700 clamp(28px,4.4vw,36px)/1.05 var(--display,system-ui);color:var(--chase,#ffc53a);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ui-dialog .ui-figure>b .berry-mark{width:.8em;height:.8em}
.ui-dialog .ui-figure>small{font:600 var(--fs-s,13px)/1.4 var(--sans,system-ui);color:var(--text-2,#b4b8d8)}
.ui-dialog .ui-note{font-size:var(--fs-s,13px);color:var(--text-3,#7b80a6)}

/* the two buttons: the shop's call-to-action and its ghost */
.ui-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;cursor:pointer;
  transition:transform var(--t-2,220ms) var(--ease-out,ease-out),box-shadow var(--t-2,220ms),background var(--t-2,220ms),border-color var(--t-2,220ms),color var(--t-2,220ms)}
.ui-btn-primary{padding:14px 24px;border:0;border-radius:var(--r-m,12px);font:700 17px/1 var(--display,system-ui);letter-spacing:.07em;text-transform:uppercase;
  color:var(--signal-ink,#1d0703);background:linear-gradient(100deg,var(--signal,#ff4636) 0%,#ff6a2b 55%,var(--signal-2,#ff9a1f) 100%);
  box-shadow:0 10px 30px rgba(255,70,54,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.ui-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(255,70,54,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.ui-btn-primary:active{transform:translateY(1px) scale(.99)}
.ui-dialog[data-tone="danger"] .ui-btn-primary{color:#22050a;background:linear-gradient(100deg,#ff3b4e,var(--bad,#ff6b6b));box-shadow:0 10px 30px rgba(255,59,78,.36),inset 0 1px 0 rgba(255,255,255,.32)}
.ui-dialog[data-tone="danger"] .ui-btn-primary:hover{box-shadow:0 14px 36px rgba(255,59,78,.5),inset 0 1px 0 rgba(255,255,255,.32)}
.ui-btn-ghost{padding:12px 20px;border:1px solid var(--line-2,rgba(150,160,255,.24));border-radius:999px;background:transparent;color:var(--text,#f2f3ff);font:600 var(--fs-m,15px)/1 var(--sans,system-ui)}
.ui-btn-ghost:hover{border-color:var(--text-2,#b4b8d8);background:rgba(255,255,255,.05)}
.ui-btn:focus-visible{outline:2px solid var(--plus,#35d0ff);outline-offset:3px}
@media(max-width:480px){
  .ui-dialog-panel{padding:24px 18px 18px}
  .ui-dialog-panel::before{left:18px;right:18px}
  .ui-dialog-actions{flex-direction:column;align-items:stretch}
}

/* ============================== J18 - THE TOOLTIP ============================== */
.ui-tip{position:fixed;left:0;top:0;z-index:900;box-sizing:border-box;max-width:min(320px,calc(100vw - 16px));padding:8px 12px 9px;border-radius:10px;
  background:linear-gradient(180deg,#1d2140,#141730);border:1px solid var(--line-2,rgba(150,160,255,.24));
  box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.45);color:var(--text,#f2f3ff);font:600 12.5px/1.45 var(--sans,system-ui);letter-spacing:.005em;
  text-align:left;white-space:normal;overflow-wrap:break-word;pointer-events:none;opacity:0;transform:translateY(4px) scale(.98);
  transition:opacity 140ms var(--ease-out,ease-out),transform 140ms var(--ease-out,ease-out)}
.ui-tip[data-side="bottom"]{transform:translateY(-4px) scale(.98)}
.ui-tip.is-on{opacity:1;transform:none}
.ui-tip::before{content:'';position:absolute;left:var(--ui-tip-x,50%);width:9px;height:9px;border:1px solid var(--line-2,rgba(150,160,255,.24));transform:translateX(-50%) rotate(45deg)}
.ui-tip[data-side="top"]::before{bottom:-5.5px;border-top:0;border-left:0;background:#141730}
.ui-tip[data-side="bottom"]::before{top:-5.5px;border-bottom:0;border-right:0;background:#1d2140}

/* ============================== J19 - AN APP, NOT A DOCUMENT ============================== */
html{-webkit-tap-highlight-color:transparent}
/* a selection the customer makes on purpose wears the shop's signal, never the OS blue */
::selection{background:rgba(255,70,54,.55);color:#fff}

/* chrome - controls, tiles, cards, rails, stat blocks, the reveal stage: a click, a
   double-click or a drag across them never paints a highlight */
button,[role="button"],[role="tab"],[role="tablist"],summary,label,
.topbar,.co-alerts,.preview-bar,.crumbs,
.open-button,.ghost-link,.chip-btn,.toggle,.qty-chip,.fam-tab,.pool-tab,.buy-inline,.sell-btn,.link-btn,
.chip,.tag,.demo-pill,.tier-chip,.state,.pt-badge,.kicker,.eyebrow,
.tcg-card,.pack-object,.pack-tile,.rail-card,.rail-viewport,.pool-card,.vault-card,.run-row,.ob-best,.rb-tiers,.showcase-fan,.hero-fan,.hero-art,.pack-stage,
.hero-stats,.shop-strip,.spec-strip>div,.proof-chips,.vault-headline,.price-line,.odds-total,.waffle,.rung,.shape-bar,.bulk-bar,.vault-tools,.pool-tabs,.family-tabs,.qty,.portal-nav,
.page-title,.stage-title,.hero-title,.section-head h2,.ladder-head h2,
.theatre,.card-view .cv-art,.card-view .cv-worth,
.ui-dialog-title,.ui-dialog-actions,.ui-tip{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* real text a person may copy keeps selection (and the browser's own menu, for Copy):
   fields, ledger rows, ids and card numbers, receipts, results and error strings.
   Mark anything else with class="ui-selectable". */
input,textarea,select,[contenteditable]:not([contenteditable="false"]),.ui-selectable,[data-selectable],
.data-table td,code,pre,samp,.kv dd,.result,.single-sale-result,.paused-banner,.stock-change,
.vc-meta,.pc-meta,.withdrawal-row,.timeline,
.t-info h2,.t-printing,.t-share-note,.rb-sale-note,
.card-view .cv-kicker,.card-view .cv-printing,.card-view .cv-facts dd,
.ui-dialog-body,#topup-result,#box-message,#sell-blocked,#acceptance-history{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* a pull is not a file: card art (and the tiles around it) cannot be dragged out of the page */
img,.pack-tile,.rail-card,.run-row,.hero-art,.rb-grid a,.tcg-card{-webkit-user-drag:none}

@media(prefers-reduced-motion:reduce){
  .ui-tip,.ui-tip[data-side="bottom"]{transform:none;transition:opacity 80ms linear}
  .ui-btn,.ui-btn:hover,.ui-btn:active{transform:none;transition:none}
}