/* ============================================================
oria.tools — additions on top of arpia-v2.css (2026-09-08)
arpia-v2.css carries the tokens, header, footer, buttons and the
.dp-* deep-page vocabulary. This file adds only what oria.tools
needs and arpia.ai does not: the Oria wordmark, inline SVG icons
in place of the ionicons CDN, and the auth pages.
============================================================ */
/* ---------- wordmark ----------
arpia.ai's header logo is an sprite
in the page. These rules stand in for arpia-v2.css's `ion-icon` ones. */
.oi { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dp-mode .oi { color: var(--gold); margin-bottom: 1rem; }
.oi-sm { width: 1.15rem; height: 1.15rem; stroke-width: 1.8; }
/* The play badge and the surface icons: arpia-v2.css sizes those with
font-size, which does nothing to an . Same sizes, as geometry. */
.media-ph-video.is-live .oi { width: 3.4rem; height: 3.4rem; color: var(--white); filter: drop-shadow(0 2px 14px rgba(0,0,0,0.7)); transition: transform 0.35s var(--ease); }
.media-ph-video.is-live:hover .oi { transform: scale(1.08); }
.surface .media-ph-video.is-live .oi { width: 2.4rem; height: 2.4rem; }
.surface-body .oi { width: 1.4rem; height: 1.4rem; color: var(--gold); margin-bottom: 0.6rem; }
/* ---------- landing extras ---------- */
/* dp-modes auto-fit resolved to three columns at 1100px, which left the fourth
card alone on a second row looking like a mistake. Two-up also reads better
for cards this wordy. (The surfaces strip below uses arpia-v2.css's own
.surfaces grid, which is already 4/2/1.) */
.dp-modes.ot-2up { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .dp-modes.ot-2up { grid-template-columns: 1fr; } }
.ot-shot { border: 1px solid var(--line-dark); border-radius: 14px; overflow: hidden; background: #0F0F0F; }
.ot-shot img { width: 100%; height: auto; display: block; }
.ot-note { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.6; margin-top: 1.2rem; }
/* ---------- the daily-work block ----------
Sits in the same dark run as the four surfaces. Ten compact chips: the point
is the breadth, so each one gets a name and a single line, never a card. */
.ot-daily { margin-top: 5.5rem; padding-top: 4.5rem; border-top: 1px solid var(--line-dark); scroll-margin-top: 5.5rem; } /* the fixed header must not cover the anchor */
.ot-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
.ot-tool { background: #101010; border: 1px solid #262626; border-radius: 10px; padding: 1.4rem 1.2rem; }
.ot-tool .oi { width: 1.3rem; height: 1.3rem; color: var(--gold); margin-bottom: 0.8rem; }
.ot-tool h3 { color: var(--white); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.45rem; }
.ot-tool p { color: var(--mist); font-size: 0.85rem; line-height: 1.55; }
@media (max-width: 1180px) { .ot-tools { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .ot-tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ot-tools { grid-template-columns: 1fr; } }
.ot-daily-split { margin-top: 4rem; }
.ot-daily-h3 { color: var(--white); font-size: 1.75rem; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 1.2rem; }
.ot-daily-h3.is-ink { color: var(--ink); }
/* the film that closes the memory section: centred to match .dp-film above it */
.ot-film-lead { max-width: 900px; margin: 4.5rem auto 1.8rem; text-align: center; }
.ot-film-lead p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
/* on paper the dashed placeholder border of .media-ph reads as a mistake */
.dp-content .media-ph-video.is-live { border-color: var(--line-light); }
/* The Cerebro poster opens on its own headline, so the component's label and hint
landed on top of it. The lead above the film already says both things, so the
badge carries the affordance alone. The aria-label keeps it named. */
.dp-film .media-ph-label, .dp-film .media-ph-hint { display: none; }
/* Two tiers, not three: arpia-v2.css's .tiers is auto-fit, which stretched two
cards across the whole wrap and made the pair look like a leftover from a
third. Fixed at two and centred so it reads as the whole set. */
.tiers.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two, not auto-fit; full wrap width so the cards line up with the wallet panel below */
@media (max-width: 720px) { .tiers.is-two { grid-template-columns: 1fr; } }
.ot-apps-split { margin-top: 4.5rem; }
/* ---------- the AI Wallet panel ----------
A dark inset on the paper section. The wallet is half of what a customer
pays, and as a two-column paragraph under the cards it read like a
disclaimer. */
.ot-fuel { background: var(--black); border-radius: 16px; padding: 3.2rem 3rem; margin-top: 3.4rem; }
.ot-fuel-head { max-width: 820px; }
.ot-fuel-head h3 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: -0.015em; margin-bottom: 1.1rem; }
.ot-fuel-head p { color: var(--mist); font-size: 1.05rem; line-height: 1.75; }
.ot-fuel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2.6rem; margin-top: 2.6rem; padding-top: 2.4rem; border-top: 1px solid var(--line-dark); }
/* Two by two rather than four across: at this wrap four columns are 194px and
every point wraps to six lines. */
.ot-fuel-grid .oi { width: 1.4rem; height: 1.4rem; color: var(--gold); margin-bottom: 0.9rem; }
.ot-fuel-grid h4 { color: var(--white); font-size: 0.98rem; font-weight: 600; margin-bottom: 0.5rem; }
.ot-fuel-grid p { color: var(--mist); font-size: 0.9rem; line-height: 1.6; }
.ot-fuel-note { color: #8a8a8a; font-size: 0.9rem; line-height: 1.65; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark); }
.ot-fuel-note a { color: var(--mist); text-decoration: underline; }
@media (max-width: 620px) { .ot-fuel { padding: 2.2rem 1.6rem; } .ot-fuel-grid { grid-template-columns: 1fr; } }
/* ============================================================
AUTH PAGES (/signin, /signup)
Dark, single column, no marketing chrome competing with the form.
============================================================ */
.auth-body { background: var(--black); min-height: 100vh; display: flex; flex-direction: column; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 7rem 1.5rem 4rem; }
.auth-card { width: 100%; max-width: 470px; }
.auth-card.is-wide { max-width: 720px; }
.auth-head { text-align: center; margin-bottom: 2.4rem; }
.auth-head h1 { color: var(--white); font-size: 1.95rem; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 0.7rem; }
.auth-head p { color: var(--mist); font-size: 1rem; line-height: 1.65; }
.auth-panel { background: var(--coal); border: 1px solid var(--line-dark); border-radius: 14px; padding: 2.2rem 2rem; }
.auth-field { margin-bottom: 1.2rem; }
.auth-field label { display: block; color: #cfcfcf; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.5rem; }
.auth-input { width: 100%; padding: 0.9rem 1rem; background: #0E0E0E; border: 1px solid #2f2f2f; border-radius: 8px; color: var(--white); font-family: var(--font); font-size: 1rem; transition: border-color 0.25s; }
.auth-input::placeholder { color: #5c5c5c; }
.auth-input:focus { outline: none; border-color: var(--gold); }
.auth-input:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn { display: block; width: 100%; padding: 0.95rem 1.5rem; background: var(--white); color: var(--ink); border-radius: 8px; font-family: var(--font); font-size: 1rem; font-weight: 500; text-align: center; transition: background 0.25s, opacity 0.25s; }
.auth-btn:hover { background: var(--paper); }
.auth-btn[disabled] { opacity: 0.4; cursor: not-allowed; background: var(--white); }
.auth-btn-ghost { display: block; width: 100%; padding: 0.95rem 1.5rem; background: transparent; border: 1px solid #2f2f2f; color: #cfcfcf; border-radius: 8px; font-family: var(--font); font-size: 1rem; font-weight: 500; text-align: center; transition: border-color 0.25s, color 0.25s; }
.auth-btn-ghost:hover { border-color: #4a4a4a; color: var(--white); }
/* inline feedback under the email field. Three states, one element. */
.auth-msg { font-size: 0.86rem; line-height: 1.55; margin-top: 0.6rem; display: none; }
.auth-msg.is-on { display: block; }
.auth-msg.is-info { color: var(--mist); }
.auth-msg.is-warn { color: var(--gold); }
.auth-msg.is-err { color: var(--red); }
.auth-sep { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0; color: #5c5c5c; font-size: 0.78rem; letter-spacing: 0.12em; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--line-dark); }
.auth-foot { text-align: center; margin-top: 1.8rem; color: var(--mist); font-size: 0.92rem; }
.auth-foot a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.auth-legal { text-align: center; margin-top: 1.6rem; color: #6e6e6e; font-size: 0.8rem; line-height: 1.6; }
.auth-legal a { color: #9a9a9a; text-decoration: underline; text-underline-offset: 2px; }
/* ---------- region choice ----------
Data residency is a selling point on this product, so it gets real
estate rather than a hidden field. */
.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.region-card { display: block; text-align: left; background: #0E0E0E; border: 1px solid #2f2f2f; border-radius: 12px; padding: 1.6rem 1.5rem; transition: border-color 0.25s, background 0.25s; cursor: pointer; }
.region-card:hover { border-color: #4a4a4a; background: #131313; }
.region-card.is-picked { border-color: var(--gold); background: #14120c; }
.region-card .oi { color: var(--mist); margin-bottom: 0.9rem; }
.region-card.is-picked .oi { color: var(--gold); }
.region-card h3 { color: var(--white); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; }
.region-card .region-where { color: var(--mist); font-size: 0.86rem; line-height: 1.5; }
.region-card .region-host { color: #6e6e6e; font-size: 0.78rem; margin-top: 0.7rem; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .region-grid { grid-template-columns: 1fr; } }
/* ---------- signup steps ---------- */
.auth-steps { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 2rem; }
.auth-step-dot { width: 7px; height: 7px; border-radius: 50%; background: #2f2f2f; transition: background 0.3s, transform 0.3s; }
.auth-step-dot.is-on { background: var(--gold); transform: scale(1.25); }
.auth-step-dot.is-done { background: #6e6e6e; }
.auth-pane { display: none; }
.auth-pane.is-on { display: block; animation: authIn 0.45s var(--ease) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--mist); font-size: 0.85rem; margin-bottom: 1.4rem; transition: color 0.25s; }
.auth-back:hover { color: var(--white); }
.auth-back .oi { width: 0.95rem; height: 0.95rem; transform: rotate(180deg); }
.auth-review { border: 1px solid var(--line-dark); border-radius: 10px; padding: 1.2rem 1.3rem; margin-bottom: 1.5rem; }
.auth-review-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.auth-review-row dt { color: #6e6e6e; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.auth-review-row dd { color: var(--white); font-size: 0.95rem; text-align: right; word-break: break-all; }
/* the auth pages keep the site header but never the marketing nav links */
.auth-body header nav { padding: 0.9rem 2rem; }