/* PDE resources: shared screen chrome, based on Nouveau livre.
 * Keep tool layouts, pedagogical colours and print/export styles local. */
@media screen {
  .pde-resource-ui {
    color-scheme: light;
    --pde-ui-ink: #17324d;
    --pde-ui-muted: #71839b;
    --pde-ui-line: #e4edf5;
    --pde-ui-accent: #0798b3;
    --pde-ui-pale: #edf8fb;
    --pde-ui-background: #fff;
    color: var(--pde-ui-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
    background: var(--pde-ui-background);
  }
  .pde-resource-ui.pde-resource-white,
  .pde-resource-ui.is-embed { background: #fff; }
  .pde-resource-ui :where(input, textarea, select, button) { font-family: inherit; }
  .pde-resource-ui :where(h1, h2, h3) { line-height: 1.4; }
  .pde-resource-ui :where(h1) { font-weight: 650; letter-spacing: -.025em; }
  .pde-resource-ui :where(h2, h3) { font-weight: 650; }
  .pde-resource-ui :where(a) { color: var(--pde-ui-accent); text-underline-offset: 3px; }
  .pde-resource-ui :is(.card, .panel, .box, .section-card, .tool-card, .form-card,
    .result-card, .modal-content, .dialog-card) {
    background: #fff;
    border-color: var(--pde-ui-line);
    border-radius: 20px;
    box-shadow: 0 6px 24px #17324d05;
  }
  .pde-resource-ui :is(.hint, .help, .description, .subtitle, .muted) { color: var(--pde-ui-muted); }
  .pde-resource-ui :is(input:not([type]), input[type="text"], input[type="email"],
    input[type="url"], input[type="search"], input[type="number"], input[type="password"],
    input[type="date"], input[type="time"], textarea, select) {
    color: var(--pde-ui-ink);
    background-color: #fcfdff;
    border-color: #cddfe8;
    border-radius: 9px;
  }
  .pde-resource-ui :is(input, textarea, select):focus-visible {
    outline: 2px solid #0798b340;
    outline-offset: 2px;
    border-color: var(--pde-ui-accent);
  }
  .pde-resource-ui :is(.btn-primary, .button-primary, .primary-button, .button.primary,
    .btn.primary, button.primary, input[type="submit"]):not(.danger):not(.error):not(.warning) {
    color: #fff;
    background: #0798b3;
    border-color: var(--pde-ui-accent);
    border-radius: 9px;
    box-shadow: none;
    font-weight: 650;
  }
  .pde-resource-ui :is(.btn-primary, .button-primary, .primary-button, .button.primary,
    .btn.primary, button.primary, input[type="submit"]):not(:disabled):hover {
    background: #078ca6;
  }
  .pde-resource-ui :is(.btn-secondary, .button-secondary, .secondary-button,
    .button.secondary, .btn.secondary) {
    color: var(--pde-ui-accent);
    background: #fff;
    border-color: var(--pde-ui-line);
    border-radius: 9px;
    box-shadow: none;
  }
  .pde-resource-ui :is(.btn-secondary, .button-secondary, .secondary-button,
    .button.secondary, .btn.secondary):not(:disabled):hover { background: var(--pde-ui-pale); }
  .pde-resource-ui :is(button, a, summary):focus-visible {
    outline: 3px solid #10a4bd;
    outline-offset: 4px;
  }
  .pde-resource-ui :where(button:disabled, input:disabled, select:disabled) { cursor: default; }
  .pde-resource-ui :where(table) { border-color: var(--pde-ui-line); }
  .pde-resource-ui :where(th) { color: var(--pde-ui-ink); background-color: var(--pde-ui-pale); }
  .pde-resource-ui :where(hr) { border-color: var(--pde-ui-line); }
  .pde-resource-ui :is(.pde-bulletins-app, .pde-dictees-app, .pde-voyage,
    .pde-ex, .pde-aesh, .pde-fiche, .pde-mot-familles, .pde-pm, .pde-read, .peda) {
    font-family: inherit;
  }
  .pde-resource-ui :is(.rd-hero > .rd-icon, .pm-hero > .pm-icon,
    .peda-hero > .peda-icon, .ex-hero > .ex-icon, .aesh-hero > .aesh-icon,
    .hero-icon, .pde-bulletins-hero-icon, .pde-dictees-hero-icon, .voyage-hero-icon) {
    color: #fff;
    background: #0798b3;
    box-shadow: none;
  }
  .pde-resource-ui :is(.rd-secondary, .pm-secondary, .peda-secondary,
    .ex-secondary, .aesh-secondary) { background: var(--pde-ui-pale); color: var(--pde-ui-accent); }
  #pde-quiz-page.pde-resource-ui .pde-santa-card {
    color: var(--pde-ui-ink);
    background: #fff;
    border: 1px solid var(--pde-ui-line);
    border-radius: 20px;
    box-shadow: 0 6px 24px #17324d05;
  }
  #pde-quiz-page.pde-resource-ui :is(.pde-santa-title, .pde-santa-subtitle) { color: var(--pde-ui-ink); }
  #pde-quiz-page.pde-resource-ui .pde-santa-text { color: var(--pde-ui-muted); }
  #pde-quiz-page.pde-resource-ui .pde-santa-btn {
    background: #0798b3;
    color: #fff;
    border-radius: 9px;
    box-shadow: none;
  }
  .pde-resource-ui :is(.rd-primary, .pm-primary, .peda-primary, .ex-primary,
    .aesh-primary, .pde-bulletins-primary, .pde-dictees-primary):not(:disabled):hover {
    background: #078ca6 !important;
  }
  @media (max-width: 600px) {
    .pde-resource-ui :is(.card, .panel, .box, .section-card, .tool-card, .form-card,
      .result-card, .modal-content, .dialog-card) { border-radius: 15px; }
    .pde-resource-ui :is(.btn-primary, .button-primary, .primary-button,
      .btn-secondary, .button-secondary, .secondary-button) { min-height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pde-resource-ui :is(button, input, select, textarea) { transition: none; }
  }
}

/* White canvas for standalone tools and embedded tool roots. */
@media screen {
  html:has(> body.pde-resource-ui),
  html body.pde-resource-ui,
  .pde-resource-ui:not(body) {
    background: #fff !important;
  }
}

/* Resource introductions: one reusable card, matching the dictée calculator. */
@media screen {
  .pde-resource-ui .pde-intro-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-width: 0;
    width: 100%;
    margin: 5px 0 14px;
    padding: 12px 16px;
    border: 1px solid #cce9f4;
    border-radius: 16px;
    background: #f2fbff;
    box-shadow: 0 2px 5px rgba(15,74,110,.12);
    color: #17324d;
    text-align: left;
  }
  .pde-resource-ui .pde-intro-card > div:not([aria-hidden]) { min-width: 0; }
  .pde-resource-ui .pde-intro-card :is(h1,h2) {
    display: block;
    margin: 0 0 4px;
    color: #17324d;
    font-size: clamp(16px,2vw,20px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
  }
  .pde-resource-ui .pde-intro-card p {
    margin: 0;
    color: #526779;
    font-size: 14px;
    line-height: 1.45;
  }
  .pde-resource-ui .pde-intro-card > :is(.rd-icon,.pm-icon,.peda-icon,.ex-icon,
    .aesh-icon,.hero-icon,.pde-dictees-hero-icon,.tap-intro__icon) {
    display: grid;
    order: -1;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: #25a9bd;
    color: #fff;
    box-shadow: none;
    font-size: 24px;
  }
  .pde-resource-ui .pde-intro-card > :is(.hero-icon,.tap-intro__icon) svg {
    width: 27px;
    height: 27px;
  }
  .pde-resource-ui .pde-intro-card > .cj-heading-notebook {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }
  .pde-resource-ui .pde-intro-card > a { flex: 0 0 48px; }
  .pde-resource-ui .pde-intro-card .intro-img {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
  }
  .pde-resource-ui .pde-intro-card--plain {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    column-gap: 14px;
    row-gap: 0;
  }
  .pde-resource-ui .pde-intro-card--plain::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #25a9bd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h9l4 4v14H7zM16 3v5h4M10 12h7M10 16h7M4 6h3M4 11h3M4 16h3'/%3E%3C/svg%3E") center / 27px 27px no-repeat;
  }
  .pde-resource-ui .pde-intro-card--plain > :is(h1,h2,p) { grid-column: 2; }
  @media (max-width: 600px) {
    .pde-resource-ui .pde-intro-card { padding: 12px; gap: 12px; }
    .pde-resource-ui .pde-intro-card--plain { column-gap: 12px; row-gap: 0; }
  }
}