/* Velrae Method website: pieces drawn the way the app draws them.
   Grade colors and gradients are the app's own (styles.css) and never change with a theme. */
:root{
  --ga:linear-gradient(135deg,#2d8662,#1a5d44);
  --gb:linear-gradient(135deg,#84cc16,#2d8662);
  --gc:linear-gradient(135deg,#b8860b,#6b4a07);
  --gd:linear-gradient(135deg,#ea580c,#9a3412);
  --gf:linear-gradient(135deg,#dc2626,#991b1b);
  --app-cream:#f6f0e6; --app-cream-50:#fdfaf5; --app-line:rgba(75,36,107,.12);
  --app-teal:#70cbd0; --app-teal-ink:#2a8a8e; --app-purple:#4b246b; --app-ink:#33263f; --app-soft:#6a5a7c;
}

/* ---- grade tile: the letter square from the Log and Day Overview ---- */
.g-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:14px;
  color:#fff;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:1.6rem;line-height:1;box-shadow:0 4px 10px rgba(43,28,58,.16)}
.g-a{background:var(--ga)} .g-b{background:var(--gb)} .g-c{background:var(--gc)} .g-d{background:var(--gd)} .g-f{background:var(--gf)}

/* ---- the A to F scale ---- */
.g-scale{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.g-scale li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--app-line);border-radius:16px;padding:8px 14px 8px 8px}
.g-scale .g-tile{width:44px;height:44px;font-size:1.35rem;border-radius:12px}
.g-scale b{display:block;color:var(--app-ink);font-size:1rem;line-height:1.25}
.g-scale div span{display:block;color:var(--app-soft);font-size:.86rem;line-height:1.35;font-variant-numeric:tabular-nums}
.g-scale.row{grid-template-columns:repeat(5,1fr)}
.g-scale.row li{flex-direction:column;text-align:center;padding:12px 8px;gap:8px}
@media(max-width:720px){.g-scale.row{grid-template-columns:1fr}.g-scale.row li{flex-direction:row;text-align:left;padding:8px 14px 8px 8px}}

/* ---- mini verdict card: the top of the app's Verdict screen ---- */
.g-card{color:#fff;border-radius:20px;padding:16px 16px 14px;text-align:center;box-shadow:0 10px 24px rgba(43,28,58,.18)}
.g-card .kind{font-size:.66rem;letter-spacing:.16em;font-weight:800;opacity:.9;margin:0}
.g-card .ring{width:92px;height:92px;margin:6px auto 8px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:6px solid rgba(255,255,255,.95);border-right-color:rgba(255,255,255,.28)}
.g-card .num{font-family:Georgia,serif;font-weight:700;font-size:1.9rem;line-height:1}
.g-card .of{font-size:.6rem;letter-spacing:.1em;opacity:.9}
.g-card .gpill{display:inline-block;background:#fff;color:#1d1524;border-radius:999px;padding:2px 12px;font-weight:700;font-size:.8rem;margin:0 0 6px}
.g-card .tag{font-family:Georgia,serif;font-weight:700;font-size:1.15rem;margin:0}

/* ---- chips: "Grading for Dana · High Blood Pressure" ---- */
.a-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.a-chip{display:inline-flex;align-items:center;gap:6px;background:var(--app-cream);border:1px solid var(--app-line);border-radius:999px;
  padding:5px 12px;font-size:.86rem;font-weight:600;color:var(--app-ink);line-height:1.3}
.a-chip.on{background:rgba(112,203,208,.2);border-color:rgba(42,138,142,.35)}
.a-chip.more{background:transparent;border-style:dashed;color:var(--app-soft)}

/* ---- 1 to 5 check-in buttons ---- */
.a-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.a-steps span{display:flex;align-items:center;justify-content:center;height:40px;border-radius:12px;background:#fff;border:1.5px solid #ece3d3;
  font-weight:700;color:var(--app-ink)}
.a-steps span.on{background:#2a8a8e;border-color:#2a8a8e;color:#fff}
.a-steprow{display:grid;gap:6px}
.a-steprow .lab{display:flex;justify-content:space-between;font-weight:700;color:var(--app-ink);font-size:.95rem}
.a-steprow .lab em{font-style:normal;color:var(--app-teal-ink);background:rgba(112,203,208,.18);border-radius:999px;padding:0 9px;font-size:.82rem;line-height:1.7}
.a-steprow .ends{display:flex;justify-content:space-between;color:var(--app-soft);font-size:.78rem}

/* ---- scan mode tiles ---- */
.a-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.a-modes span{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1.5px solid rgba(112,203,208,.65);border-radius:14px;padding:10px 4px;
  font-weight:700;color:var(--app-ink);font-size:.9rem;text-align:center}
.a-modes small{font-weight:400;color:var(--app-soft);font-size:.72rem;line-height:1.25}
.a-seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--app-cream);border-radius:999px;padding:4px;margin:0 0 10px}
.a-seg span{flex:1 1 auto;text-align:center;border-radius:999px;padding:5px 8px;font-size:.82rem;font-weight:600;color:var(--app-ink)}
.a-seg span.on{background:#fff;box-shadow:0 1px 4px rgba(43,28,58,.12)}

/* ---- phone: every screenshot the same size (600x1298 images) ---- */
.a-phone{width:var(--pw,250px);max-width:100%;flex:none;background:#1d1524;border-radius:34px;padding:10px;box-shadow:0 20px 44px rgba(43,28,58,.26);margin:0 auto}
.a-phone img{display:block;width:100%;height:auto;aspect-ratio:600/1298;border-radius:25px;background:var(--app-cream-50)}
.a-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.a-fig figcaption{text-align:center;color:var(--app-soft);font-size:.88rem;line-height:1.4;max-width:var(--pw,250px)}
.a-fig figcaption b{color:var(--app-ink)}
.a-sheet{background:#fff;border-radius:14px;padding:8px;box-shadow:0 14px 34px rgba(43,28,58,.18);border:1px solid var(--app-line)}
.a-sheet img{display:block;width:100%;height:auto;border-radius:8px}

/* ---- tabs: the app's segmented control ---- */
.a-tabs{display:none}
.a-panel[hidden]{display:none !important}
.js-tabs .a-tabs{display:flex;gap:4px;background:var(--app-cream);border-radius:999px;padding:5px;margin:0 auto 24px;max-width:max-content;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.a-tabs::-webkit-scrollbar{display:none}
.a-tabs button{flex:none;border:0;background:transparent;font:inherit;font-weight:700;font-size:.95rem;color:var(--app-ink);
  padding:9px 18px;border-radius:999px;cursor:pointer;white-space:nowrap}
.a-tabs button[aria-selected="true"]{background:#fff;color:var(--app-purple);box-shadow:0 2px 6px rgba(43,28,58,.14)}
.a-tabs button:focus-visible{outline:3px solid var(--app-teal);outline-offset:2px}
.a-tabs button:hover{color:var(--app-purple)}
@media(max-width:720px){.js-tabs .a-tabs{flex-wrap:wrap;justify-content:center;max-width:100%;border-radius:20px;overflow:visible}.a-tabs button{padding:8px 13px;font-size:.9rem}}
@media(prefers-reduced-motion:no-preference){.a-panel{animation:a-in .25s ease}}
@keyframes a-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}