/* OwnYourAI — learner and trainer screens.
   Loaded AFTER assets/site.css, so every token, .card, .btn, .field and table.data here matches
   the public site exactly. External file on purpose: the site's Content-Security-Policy allows no
   inline styles (style-src 'self'), so a style attribute would simply be dropped by the browser. */

.oya-app { background: var(--paper-2, #f5f7fa); }

.oya-wrap { max-width: 920px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s9); }
.oya-wrap > h1 { font-size: clamp(1.45rem, 4vw, 2rem); margin-bottom: var(--s3); }
.oya-wrap > h2 { margin-top: var(--s6); }

.oya-meta { color: var(--ink-2, #475467); font-size: .92rem; margin: var(--s2) 0; line-height: 1.5; }
.oya-warn { color: #7f1d1d; font-weight: 650; background: #fdecec; border-left: 4px solid #b91c1c;
            padding: var(--s3) var(--s4); border-radius: var(--r, 8px); }
.oya-ok { color: var(--ok, #0e7c5a); font-weight: 650; }

/* ---------- sign-in / forms ---------- */
.oya-field { margin-bottom: var(--s4); }
.oya-field label { display: block; font-weight: 650; font-size: .94rem; margin-bottom: 6px; }
.oya-field input { font: inherit; width: 100%; max-width: 30rem; padding: 11px var(--s3);
  border: 1px solid var(--line-2, #cfd8e3); border-radius: var(--r, 8px); background: #fff;
  color: var(--ink, #101828); }
.oya-field input:focus { border-color: var(--navy, #0f2a4a); outline: 3px solid rgba(29, 111, 209, .25); }
.oya-hint { font-size: .85rem; color: var(--ink-3, #667085); margin: 0 0 6px; }

/* ---------- record facts ---------- */
.oya-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s3); }
.oya-fact { background: #fff; border: 1px solid var(--line, #e2e8ef); border-radius: var(--r-lg, 14px);
  padding: var(--s4); }
.oya-fact b { display: block; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3, #667085); font-weight: 750; margin-bottom: var(--s2); }
.oya-fact span { font-size: 1rem; color: var(--ink, #101828); }

/* ---------- status pills ---------- */
.oya-pill { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--r-pill, 999px); border: 1px solid transparent; }
.oya-pill--done { background: var(--ok-100, #e7f5f0); color: var(--ok, #0e7c5a); border-color: #a7e0cd; }
.oya-pill--todo { background: var(--accent-100, #fdf3e7); color: var(--accent-600, #92400e); border-color: #f2d5ac; }
.oya-pill--wait { background: #eef2f6; color: var(--ink-2, #475467); border-color: var(--line-2, #cfd8e3); }

/* ---------- sessions ---------- */
.oya-session { background: #fff; border: 1px solid var(--line, #e2e8ef); border-radius: var(--r-lg, 14px);
  padding: var(--s5); margin-bottom: var(--s4); }
.oya-session-head { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.oya-session-no { font-weight: 800; color: var(--accent, #b45309); font-variant-numeric: tabular-nums; }
.oya-session h3 { font-size: 1.08rem; margin: 0; }
.oya-session dl { margin: var(--s3) 0 var(--s4); }
.oya-session dt { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3, #667085); font-weight: 750; margin-top: var(--s3); }
.oya-session dd { margin: 2px 0 0; color: var(--ink-2, #475467); font-size: .95rem; }
.oya-rowform { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.oya-rowform .oya-field { margin-bottom: 0; flex: 1 1 18rem; }

/* ---------- buttons ---------- */
.oya-btn { font: inherit; font-weight: 650; padding: 9px 14px; border-radius: var(--r, 8px);
  border: 1px solid var(--navy, #0f2a4a); background: var(--navy, #0f2a4a); color: #fff; cursor: pointer; }
.oya-btn--ghost { background: #fff; color: var(--navy, #0f2a4a); }
.oya-btn:disabled { opacity: .55; cursor: default; }
.oya-btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }

/* ---------- trainer marking screen ---------- */
.oya-s { display: inline-block; margin: 2px 4px 2px 0; }
.oya-s b { display: block; font-size: 11px; color: var(--ink-3, #667085); text-align: center; font-weight: 650; }
.oya-mark { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid #94a3b8;
  background: #fff; cursor: pointer; }
.oya-mark--p { background: var(--ok, #0e7c5a); color: #fff; border-color: var(--ok, #0e7c5a); }
.oya-mark--a { background: #7f1d1d; color: #fff; border-color: #7f1d1d; }
.oya-mark--go { background: #065f46; color: #fff; border-color: #065f46; margin-right: var(--s3); }
.oya-mark--go2 { background: #fff; color: #065f46; border-color: #065f46; }
.oya-checks { display: flex; gap: var(--s5); flex-wrap: wrap; }
.oya-checks label { font-size: .95rem; }
.oya-date, .oya-art, .oya-learner input[type=text] { font: inherit; padding: 5px 7px;
  border: 1px solid var(--line-2, #cfd8e3); border-radius: 7px; }
.oya-learner h3 { margin-top: var(--s5); }
.card.oya-learner { background: #fff; }
.card.who { background: var(--ok-100, #e7f5f0); border-color: #a7f3d0; }
.oya-wrap pre { background: #0f172a; color: #e2e8f0; padding: var(--s3); border-radius: var(--r, 8px);
  overflow-x: auto; font-size: .82rem; }

/* signed-out state: the page keeps its promise and shows nothing that is not the learner's */
.oya-signedout .oya-locked { display: none; }
.oya-signin-cta { display: none; }
.oya-signedout .oya-signin-cta { display: block; }