/* Shared visual refresh for tools, guides, and Ryla editorial pages.
   Page architecture stays role-specific; the brand language now matches the
   bold bordered system used by the AnmolApps product pages. */

:root {
  --aa-ink: #111528;
  --aa-ink-soft: #383d53;
  --aa-paper: #fffdf7;
  --aa-paper-2: #f4f1e8;
  --aa-yellow: #ffd84d;
  --aa-violet: #7765ed;
  --aa-violet-dark: #5140c8;
  --aa-mint: #84e6c3;
  --aa-coral: #ff7b6f;
  --aa-line: rgba(17, 21, 40, 0.14);
  --aa-shadow: 7px 7px 0 #111528;
  --aa-radius: 24px;
}

/* Ryla originally shipped with dark-theme semantic tokens. Its refreshed
   editorial surfaces are light, so reset the entire token family at the page
   root to keep every legacy article variant readable. */
.ryla-light {
  --ink: #111528;
  --ink-2: #2f354a;
  --sub: #4f566b;
  --sub-2: #686f82;
  --bg: #fffdf7;
  --bg-off: #f4f1e8;
  --bg-2: #f8f6ef;
  --surface: #ffffff;
  --border: rgba(17, 21, 40, 0.16);
  --border-2: #858a99;
  --brand: #5140c8;
  --brand-hover: #3d2db7;
  --brand-light: #edeaff;
  --brand-muted: #c9c1ff;
  --brand-text: #382aa0;
  --safe: #137344;
  --safe-bg: #e7fff6;
  --safe-border: #2d7c5b;
  --safe-text: #125b3c;
  --danger: #b42318;
  --danger-bg: #fff0ec;
  --danger-border: #cf594c;
  --danger-text: #7a1c17;
  --shadow-xs: 0 1px 3px rgba(17,21,40,.08);
  --shadow-sm: 0 3px 8px rgba(17,21,40,.09);
  --shadow-md: 0 8px 20px rgba(17,21,40,.1);
  --shadow-lg: 0 16px 36px rgba(17,21,40,.12);
  --shadow-xl: 0 24px 54px rgba(17,21,40,.15);
  background: var(--aa-paper-2);
  color: var(--aa-ink);
}

.ryla-light .stat-box {
  border-color: var(--safe-border);
  background: rgba(255,255,255,.72);
}

/* Ryla answers should never depend on an observer firing before they can be
   read. This also prevents tall mobile link panels from sitting transparent
   until more than ten percent of the panel enters the viewport. */
.ryla-light .animate-fade-up {
  opacity: 1;
  transform: none;
}

/* Shared brand shell */
.nav {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 76px;
  border-bottom: 1px solid var(--aa-line);
  background: rgba(255, 253, 247, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav__inner {
  width: min(calc(100% - 40px), 1180px);
  max-width: none;
  height: 100%;
  margin-inline: auto;
  padding: 0;
  gap: 28px;
}

.nav__brand {
  gap: 11px;
  color: var(--aa-ink);
  font-size: 1rem;
  font-weight: 900;
}

.nav__brand::before {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 2px solid var(--aa-ink);
  border-radius: 12px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  content: "A";
  font-size: 0.92rem;
  font-weight: 950;
}

.nav__dot { display: none; }
.nav__links { justify-content: flex-end; gap: 20px; }

.nav__link {
  padding: 7px 0;
  border-radius: 0;
  color: var(--aa-ink-soft);
  font-size: 0.9rem;
  font-weight: 750;
}

.nav__link:hover { background: transparent; color: var(--aa-violet-dark); }

.nav__actions .btn-store {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 17px;
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
}

.footer {
  border-top: 0;
  background: var(--aa-ink);
  color: #fff;
}

.footer__tools {
  max-width: 1180px;
  border-color: rgba(255,255,255,.14);
}

.footer__tools-label { color: var(--aa-yellow); }
.footer__tools-link { color: rgba(255,255,255,.72); }
.footer__tools-link:hover { color: var(--aa-yellow); }
.footer__inner { max-width: 1180px; }
.footer__brand { color: #fff; }
.footer__copy { color: rgba(255,255,255,.55); }
.footer .btn-store { border-color: rgba(255,255,255,.28); color: #fff; }

/* Tools: preserve immediate utility, change the visual system. */
.tools-page,
.tool-page {
  --tool-bg: var(--aa-paper-2);
  --tool-surface: #fff;
  --tool-soft: var(--aa-paper);
  --tool-soft-2: #efece3;
  --tool-border: var(--aa-line);
  --tool-border-strong: var(--aa-ink);
  --tool-ink: var(--aa-ink);
  --tool-body: var(--aa-ink-soft);
  --tool-muted: #666b7d;
  --tool-dark: var(--aa-ink);
  --tool-teal: var(--aa-violet);
  --tool-teal-dark: var(--aa-violet-dark);
  --tool-teal-soft: #e9e5ff;
  background: var(--aa-paper-2);
  color: var(--aa-ink-soft);
}

.tools-hero,
.tool-detail-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: var(--aa-paper);
  color: var(--aa-ink);
}

.tools-hero::before,
.tool-detail-hero::before {
  position: absolute;
  z-index: 0;
  top: -260px;
  right: -160px;
  width: 720px;
  height: 720px;
  border: 100px solid rgba(119,101,237,.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.tools-hero__inner,
.tool-detail-hero__inner { position: relative; z-index: 1; }

.tool-breadcrumb--dark,
.tool-breadcrumb--dark a { color: var(--aa-ink-soft); }
.tool-breadcrumb--dark a:hover { color: var(--aa-violet-dark); }

.tool-kicker {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
}

.tool-kicker__dot { background: var(--aa-violet); box-shadow: none; }

.tools-hero h1,
.tool-detail-hero h1 {
  max-width: 900px;
  color: var(--aa-ink);
  font-weight: 950;
  letter-spacing: -.055em;
}

.tools-hero__summary,
.tool-detail-hero__summary { color: var(--aa-ink-soft); }

.tool-chips span {
  border: 1px solid var(--aa-line);
  background: #fff;
  color: var(--aa-ink-soft);
}

.tools-hero__panel,
.tool-app-card {
  padding: 24px;
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: var(--aa-shadow);
  color: var(--aa-ink);
}

.tools-hero__panel-label,
.tool-app-card__eyebrow { color: var(--aa-violet-dark); }

.tools-hero__quick a {
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  background: var(--aa-paper-2);
}

.tools-hero__quick a:hover {
  border-color: var(--aa-ink);
  background: var(--aa-yellow);
}

.tools-hero__quick strong,
.tool-app-card h2 { color: var(--aa-ink); }
.tools-hero__quick span,
.tool-app-card__copy { color: var(--aa-ink-soft); }
.tool-app-card__link { color: var(--aa-violet-dark); }

.tool-cluster,
.tool-panel,
.tool-related,
.tool-faq {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: var(--aa-shadow);
}

.tool-cluster { padding: clamp(22px, 4vw, 34px); }

.tool-card {
  border: 2px solid var(--aa-ink);
  border-radius: 20px;
  background: var(--aa-paper);
  box-shadow: 4px 4px 0 var(--aa-ink);
}

.tool-card:hover {
  border-color: var(--aa-ink);
  box-shadow: 7px 7px 0 var(--aa-ink);
  transform: translate(-3px, -3px);
}

.tool-card__media,
.tool-related__media {
  border: 2px solid var(--aa-ink);
  border-radius: 13px;
  background: var(--aa-yellow);
}

.tool-card__app,
.tool-card__label,
.tool-section-eyebrow { color: var(--aa-violet-dark); }
.tool-card__action,
.tool-card__go { color: var(--aa-ink); }

.tool-workspace { padding-top: 44px; }

.tool-panel__header {
  border-bottom: 2px solid var(--aa-ink);
  background: var(--aa-yellow);
}

.tool-panel__body { background: #fff; }

.tool-cta {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: var(--aa-ink);
  box-shadow: 7px 7px 0 var(--aa-violet);
}

.tool-btn {
  min-height: 46px;
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  font-weight: 850;
}

.tool-btn--primary,
.tool-btn--appstore {
  background: var(--aa-yellow);
  color: var(--aa-ink);
}

.tool-btn--primary:hover,
.tool-btn--appstore:hover { background: #ffe577; color: var(--aa-ink); }

.tool-btn--ghost { background: #fff; }

.tool-related__item,
.tool-faq details,
.sn-card,
.rewrite-card,
.grammar-issue,
.correction-output,
.tool-hub,
.grocery-card,
.allergen-fieldset {
  border-color: var(--aa-line);
  border-radius: 16px;
  background: var(--aa-paper);
}

.tool-related__item:hover,
.tool-hub__grid a:hover { border-color: var(--aa-ink); box-shadow: 4px 4px 0 var(--aa-ink); }

.tool-input,
.tool-textarea,
.tool-select {
  border: 2px solid var(--aa-ink);
  border-radius: 14px;
  background: #fff;
}

.tool-input:focus,
.tool-textarea:focus,
.tool-select:focus {
  border-color: var(--aa-violet);
  box-shadow: 0 0 0 4px rgba(119,101,237,.16);
}

.tool-copy h2,
.tool-hub h2 { letter-spacing: -.035em; }

/* Published guide hub and article pages. */
.guide-index,
.guide-page {
  background: var(--aa-paper-2);
  color: var(--aa-ink);
}

.guide-index__hero,
.guide-page .guide-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: var(--aa-paper);
  color: var(--aa-ink);
}

.guide-index__hero::after,
.guide-page .guide-hero::after {
  position: absolute;
  right: -100px;
  bottom: -230px;
  width: 440px;
  height: 440px;
  border: 70px solid rgba(119,101,237,.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.guide-index__eyebrow,
.guide-page .guide-kicker {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
}

.guide-index h1,
.guide-page .guide-hero h1 {
  color: var(--aa-ink);
  font-weight: 950;
  letter-spacing: -.055em;
}

.guide-index__sub,
.guide-page .guide-hero__summary { color: var(--aa-ink-soft); }

.guide-index__stats,
.guide-page .guide-product {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: var(--aa-shadow);
}

.guide-index__stats strong,
.guide-page .guide-product__name { color: var(--aa-ink); }
.guide-index__stats span,
.guide-page .guide-product__copy,
.guide-page .guide-product__label { color: var(--aa-ink-soft); }

.guide-page .guide-button--primary {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
}

.guide-page .guide-button--secondary {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--aa-ink);
}

.guide-index__cluster,
.guide-page .guide-article,
.guide-page .toc,
.guide-page .sidebar-cta {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: var(--aa-shadow);
}

.guide-index__card {
  border: 1px solid var(--aa-line);
  border-radius: 16px;
  background: var(--aa-paper);
}

.guide-index__card:hover {
  border-color: var(--aa-ink);
  box-shadow: 4px 4px 0 var(--aa-ink);
}

.guide-index__icon,
.guide-page .guide-product__icon { border: 2px solid var(--aa-ink); box-shadow: 3px 3px 0 var(--aa-ink); }

.guide-page .guide-article h2 { border-color: var(--aa-line); letter-spacing: -.035em; }
.guide-page .guide-article a { color: var(--aa-violet-dark); }

.guide-page .answer-box,
.guide-page .note-box,
.guide-page .warning-box,
.guide-page .source-box,
.guide-page .guide-faq details {
  border: 2px solid var(--aa-ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--aa-ink);
}

.guide-page .answer-box { background: #fff6c9; }
.guide-page .note-box { background: #e7fff6; }
.guide-page .warning-box { background: #fff0ec; }

/* Ryla hub */
.list-hero {
  padding-block: clamp(64px, 9vw, 110px);
  border-bottom: 0;
  background: var(--aa-paper);
}

.list-hero::before {
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(119,101,237,.14) 0%, transparent 62%);
}

.list-hero__eyebrow {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
}

.list-hero__title { color: var(--aa-ink); font-weight: 950; }
.list-hero__sub { color: var(--aa-ink-soft); }
.articles-section { max-width: 1180px; }

.article-card {
  min-height: 180px;
  padding: 24px;
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: 5px 5px 0 var(--aa-ink);
}

.article-card:hover {
  border-color: var(--aa-ink);
  box-shadow: 8px 8px 0 var(--aa-ink);
  transform: translate(-3px, -3px);
}

.article-card .badge { align-self: flex-start; background: var(--aa-mint); color: var(--aa-ink); }

.list-hero .btn-store {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 4px 4px 0 var(--aa-ink);
  color: var(--aa-ink);
  font-weight: 850;
}

/* Ryla label-check and category-guide details */
.article-header {
  position: relative;
  overflow: hidden;
  padding-block: clamp(54px, 8vw, 90px);
  border-bottom: 0;
  background: var(--aa-paper);
  color: var(--aa-ink);
}

.article-header::after {
  position: absolute;
  z-index: 0;
  right: -80px;
  bottom: -210px;
  width: 400px;
  height: 400px;
  border: 62px solid rgba(119,101,237,.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.article-header > * { position: relative; z-index: 1; }
.article-breadcrumb { color: var(--aa-ink-soft); }
.article-breadcrumb a { color: var(--aa-violet-dark); }
.article-header .ryla-title { color: var(--aa-ink); font-weight: 950; letter-spacing: -.05em; }

.art-wrap,
.article-layout,
.guide-wrap { background: var(--aa-paper-2); }

.art-wrap .verdict,
.art-wrap .panel,
.article-layout .ryla-alert,
.article-layout .ryla-content,
.article-layout .ryla-faq-item,
.guide-wrap .guide-hero,
.guide-wrap .guide-toc,
.guide-wrap .guide-method,
.guide-wrap .guide-panel,
.guide-wrap .guide-cta,
.aside-cta,
.aside-nav,
.ryla-app-banner {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  box-shadow: 5px 5px 0 var(--aa-ink);
  background: #fff;
}

.art-wrap .verdict,
.article-layout .ryla-alert-safe { background: #e7fff6; }
.article-layout .ryla-alert-danger { background: #fff0ec; }

.art-wrap .panel h2,
.guide-wrap .guide-panel h2 { border-color: var(--aa-line); }

.guide-wrap .guide-hero::before,
.aside-cta::before { background: radial-gradient(circle, rgba(119,101,237,.12), transparent 70%); }

.guide-wrap .guide-hero__label,
.guide-wrap .guide-method__eyebrow,
.guide-wrap .guide-toc a,
.art-wrap .link-list a { color: var(--aa-violet-dark); }

.ryla-app-banner__button {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
}

.ryla-app-banner__features span { border-color: var(--aa-line); background: var(--aa-paper-2); }

/* The legacy download banner was designed for a navy panel. The refresh makes
   the panel white, so give every piece of its copy an explicit light-theme
   color instead of retaining the former pale-on-dark values. */
.ryla-light .ryla-app-banner__eyebrow { color: var(--aa-violet-dark); }
.ryla-light .ryla-app-banner__title { color: var(--aa-ink); }
.ryla-light .ryla-app-banner__copy { color: #3f465b; }
.ryla-light .ryla-app-banner__features span { color: #263044; }
.ryla-light .ryla-app-banner__note { color: #5f6679; }

.ryla-link-panel {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: 5px 5px 0 var(--aa-ink);
}

.ryla-link-card {
  border-color: var(--aa-line);
  border-radius: 14px;
  background: var(--aa-paper);
}

.ryla-link-card:hover { border-color: var(--aa-ink); background: var(--aa-yellow); }
.ryla-link-card__label,
.ryla-link-panel__eyebrow { color: var(--aa-violet-dark); }

@media (max-width: 760px) {
  .nav { height: 68px; }
  .nav__inner { width: min(calc(100% - 28px), 1180px); }
  .nav__links { display: none; }
  .nav__brand::before { width: 36px; height: 36px; }
  .nav__actions .btn-store { min-height: 40px; padding: 8px 13px; }
  .tools-hero__inner,
  .tool-detail-hero__inner { padding-top: 34px; }
  .tool-cluster,
  .tool-panel,
  .tool-related,
  .tool-faq,
  .guide-index__cluster,
  .guide-page .guide-article { box-shadow: 5px 5px 0 var(--aa-ink); }

  /* A one-column CSS grid still uses an automatic minimum track size. Long
     article copy could therefore make the safe/risk layouts wider than an
     iPhone viewport even after their sidebar stacked. */
  .ryla-light .art-wrap,
  .ryla-light .ra-wrap,
  .ryla-light .article-layout {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .ryla-light .art-wrap > *,
  .ryla-light .ra-wrap > *,
  .ryla-light .article-layout > * {
    min-width: 0;
    max-width: 100%;
  }

  .ryla-light .article-header .ryla-title,
  .ryla-light .list-hero__title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Imported editorial tables can have an intrinsic width wider than the
     article column. Keep that width inside a local horizontal scroller rather
     than allowing it to crop the entire page. */
  .ryla-light .ryla-content {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ryla-light .ryla-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .nav__actions { display: none; }
  .tools-hero h1,
  .tool-detail-hero h1,
  .guide-index h1,
  .guide-page .guide-hero h1 { font-size: 2.65rem; }
  .tools-hero__panel,
  .tool-app-card { box-shadow: 5px 5px 0 var(--aa-ink); }
}