/*
  Ajyal component layer (Canva layout identity, owner decision 2026-10-10).
  Reference: docs/design/canva-reference-documents-DAHXbtYDikg.png, docs/design/CANVA-REFERENCE.md.
  Catalogue with HTML snippets: docs/design/COMPONENTS.md.

  Rules:
  - RTL-first: logical properties only (inline-start = right in Arabic).
  - CSP-safe: no inline styles needed; icons are CSS masks (data: images, allowed by img-src).
  - Colours, radii and shadows come from design-tokens.css (--ajyal-*). The only additions are the
    three pastel icon-tile pairs below; they are component tokens, proposed for promotion into
    design-tokens.css once the owner approves the pilot.
  - Every class is prefixed "ajc-" so it never collides with page stylesheets.
*/
:root{
  --ajc-tile-blue-bg:#e8f1fb;
  --ajc-tile-blue-ink:var(--ajyal-document-primary);
  --ajc-tile-amber-bg:#fdf3e1;
  --ajc-tile-amber-ink:var(--ajyal-warning);
  --ajc-tile-lavender-bg:#f0ebfb;
  --ajc-tile-lavender-ink:#6f55c4;
  --ajc-card-pad:20px;
  --ajc-gap:16px;
}

/* ---------- Icons (mask images; colour follows currentColor) ---------- */
.ajc-icon{display:inline-block;flex:0 0 auto;width:18px;height:18px;background-color:currentColor;-webkit-mask:var(--ajc-icon) center/contain no-repeat;mask:var(--ajc-icon) center/contain no-repeat;vertical-align:middle}
.ajc-icon--sm{width:14px;height:14px}
.ajc-icon--lg{width:22px;height:22px}
.ajc-icon--plus{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.ajc-icon--save{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l3 3v15H5z'/%3E%3Cpath d='M8 3v5h7V3M8 21v-7h8v7'/%3E%3C/svg%3E")}
.ajc-icon--send{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10 14'/%3E%3Cpath d='M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E")}
.ajc-icon--doc{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.ajc-icon--doc-edit{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H6v18h12v-7'/%3E%3Cpath d='M18.5 3.5a2.1 2.1 0 0 1 3 3L13 15l-4 1 1-4z'/%3E%3C/svg%3E")}
.ajc-icon--check{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
.ajc-icon--check-circle{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E")}
.ajc-icon--clock{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.ajc-icon--activity{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'/%3E%3C/svg%3E")}
.ajc-icon--arrow{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")}
.ajc-icon--shield{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.6-3.4 7.9-8 9-4.6-1.1-8-4.4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.ajc-icon--alert{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E")}
.ajc-icon--inbox{--ajc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l2 3h4l2-3h5'/%3E%3Cpath d='M5.5 5h13L21 13v6H3v-6z'/%3E%3C/svg%3E")}

/* ---------- Buttons ---------- */
.ajc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid transparent;border-radius:var(--ajyal-radius-button);font:inherit;font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.ajc-btn--primary{background:var(--ajyal-primary);border-color:var(--ajyal-primary);color:var(--ajyal-surface)}
.ajc-btn--primary:hover{background:var(--ajyal-primary-hover);border-color:var(--ajyal-primary-hover)}
.ajc-btn--secondary{background:var(--ajyal-surface);border-color:var(--ajyal-line);color:var(--ajyal-ink)}
.ajc-btn--secondary:hover{background:var(--ajyal-surface-alt);border-color:var(--ajyal-line-strong)}
.ajc-btn:focus-visible,.ajc-icon-btn:focus-visible{outline:2px solid var(--ajyal-document-primary);outline-offset:2px}
.ajc-btn:disabled,.ajc-btn[aria-disabled="true"],.ajc-icon-btn:disabled{opacity:.55;cursor:not-allowed}
/* Square icon button (Canva: navy "+" and outlined "save"). Always give it an aria-label. */
.ajc-icon-btn{display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:40px;padding:0;border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-button);background:var(--ajyal-surface);color:var(--ajyal-ink);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.ajc-icon-btn:hover{background:var(--ajyal-surface-alt);border-color:var(--ajyal-line-strong)}
.ajc-icon-btn--primary{background:var(--ajyal-primary);border-color:var(--ajyal-primary);color:var(--ajyal-surface)}
.ajc-icon-btn--primary:hover{background:var(--ajyal-primary-hover);border-color:var(--ajyal-primary-hover)}

/* ---------- Page header ---------- */
.ajc-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:0 0 20px}
.ajc-page-header__text{min-width:0;flex:1 1 320px}
.ajc-page-header__eyebrow{margin:0 0 4px;color:var(--ajyal-muted);font-size:12px;font-weight:600;line-height:1.6}
.ajc-page-header__title{margin:0;color:var(--ajyal-ink);font-size:26px;font-weight:700;line-height:1.35}
.ajc-page-header__subtitle{margin:6px 0 0;max-width:72ch;color:var(--ajyal-muted);font-size:14px;line-height:1.75}
.ajc-page-header__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- Cards ---------- */
.ajc-card{min-width:0;background:var(--ajyal-surface);border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-card);color:var(--ajyal-ink)}
.ajc-card--padded{padding:var(--ajc-card-pad)}
.ajc-card.is-selected{border-color:var(--ajyal-primary);box-shadow:var(--ajyal-shadow-card)}
.ajc-card__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px var(--ajc-card-pad);border-bottom:1px solid var(--ajyal-line-soft)}
.ajc-card--padded>.ajc-card__header{margin:calc(var(--ajc-card-pad) * -1) calc(var(--ajc-card-pad) * -1) var(--ajc-card-pad)}
.ajc-card__heading{display:flex;align-items:center;gap:12px;min-width:0}
.ajc-card__title{margin:0;color:var(--ajyal-ink);font-size:16px;font-weight:700;line-height:1.5}
.ajc-card__subtitle{margin:2px 0 0;color:var(--ajyal-muted);font-size:12px;line-height:1.7}
.ajc-card__body{padding:var(--ajc-card-pad)}

/* ---------- Pastel icon tile ---------- */
.ajc-icon-tile{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--ajyal-radius-button);background:var(--ajc-tile-blue-bg);color:var(--ajc-tile-blue-ink)}
.ajc-icon-tile--sm{width:32px;height:32px}
.ajc-icon-tile--blue{background:var(--ajc-tile-blue-bg);color:var(--ajc-tile-blue-ink)}
.ajc-icon-tile--amber{background:var(--ajc-tile-amber-bg);color:var(--ajc-tile-amber-ink)}
.ajc-icon-tile--lavender{background:var(--ajc-tile-lavender-bg);color:var(--ajc-tile-lavender-ink)}

/* ---------- KPI / summary cards ---------- */
.ajc-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ajc-gap);margin:0 0 var(--ajc-gap)}
.ajc-kpi-card{display:grid;align-content:start;justify-items:start;gap:14px;min-width:0;min-height:108px;padding:16px 18px;background:var(--ajyal-surface);border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-card);color:var(--ajyal-ink);transition:border-color .15s ease,box-shadow .15s ease}
.ajc-kpi-card.is-selected{border-color:var(--ajyal-primary);box-shadow:var(--ajyal-shadow-card)}
.ajc-kpi-card__body{display:grid;gap:4px;min-width:0}
.ajc-kpi-card__value{color:var(--ajyal-ink);font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.ajc-kpi-card__label{color:var(--ajyal-muted);font-size:13px;line-height:1.5}

/* ---------- Horizontal RTL stepper ---------- */
.ajc-stepper-card{margin:0 0 var(--ajc-gap);padding:18px var(--ajc-card-pad) 14px}
.ajc-stepper{display:flex;margin:0;padding:0;list-style:none;counter-reset:none}
.ajc-step{position:relative;flex:1 1 0;display:grid;justify-items:center;gap:8px;min-width:0;text-align:center}
/* The connector runs from this dot towards the next step (inline-end, i.e. leftwards in RTL). */
.ajc-step:not(:last-child)::after{content:"";position:absolute;top:15px;inset-inline-start:calc(50% + 20px);inset-inline-end:calc(-50% + 20px);height:1px;background:var(--ajyal-line)}
.ajc-step__dot{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ajyal-primary-soft);border:1px solid var(--ajyal-line);color:var(--ajyal-muted);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.ajc-step__label{color:var(--ajyal-muted);font-size:12px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.ajc-step.is-active .ajc-step__dot{background:var(--ajyal-primary);border-color:var(--ajyal-primary);color:var(--ajyal-surface);box-shadow:0 0 0 4px var(--ajyal-primary-soft)}
.ajc-step.is-active .ajc-step__label{color:var(--ajyal-ink);font-weight:700}
.ajc-step.is-done .ajc-step__dot{background:var(--ajyal-surface);border-color:var(--ajyal-primary);color:var(--ajyal-primary)}
.ajc-step.is-done .ajc-step__label{color:var(--ajyal-ink)}
.ajc-step.is-done:not(:last-child)::after{background:var(--ajyal-primary)}

/* ---------- Two-column work layout (main form + side timeline) ---------- */
.ajc-work-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:var(--ajc-gap) 20px;align-items:start}
.ajc-work-main{min-width:0}
.ajc-work-side{min-width:0;position:sticky;top:16px}

/* ---------- Activity timeline ---------- */
.ajc-timeline{display:grid;margin:0;padding:var(--ajc-card-pad);list-style:none}
.ajc-timeline__item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding-bottom:18px}
.ajc-timeline__item:last-child{padding-bottom:0}
.ajc-timeline__item:not(:last-child)::before{content:"";position:absolute;top:32px;bottom:4px;inset-inline-start:13.5px;width:1px;background:var(--ajyal-line)}
.ajc-timeline__icon{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--ajyal-radius-button);background:var(--ajc-tile-blue-bg);color:var(--ajc-tile-blue-ink)}
.ajc-timeline__icon--check{background:color-mix(in srgb,var(--ajyal-success) 12%,var(--ajyal-surface));color:var(--ajyal-success)}
.ajc-timeline__icon--pending{background:var(--ajc-tile-amber-bg);color:var(--ajc-tile-amber-ink)}
.ajc-timeline__icon--send{background:var(--ajyal-primary-soft);color:var(--ajyal-muted)}
.ajc-timeline__text{display:grid;gap:2px;min-width:0;padding-top:3px}
.ajc-timeline__title{color:var(--ajyal-ink);font-size:13px;font-weight:700;line-height:1.5}
.ajc-timeline__meta{color:var(--ajyal-muted);font-size:12px;line-height:1.65}

/* ---------- Form fields ---------- */
.ajc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ajc-form-grid>.wide,.ajc-form-grid>.ajc-field--wide{grid-column:1/-1}
.ajc-field,.ajc-form-grid>label{position:relative;display:grid;align-content:start;gap:6px;min-width:0;color:var(--ajyal-ink);font-size:13px;font-weight:600;line-height:1.5}
.ajc-input,.ajc-form-grid>label>input:not([type=checkbox]):not([type=radio]),.ajc-form-grid>label>select,.ajc-form-grid>label>textarea{box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-button);background:var(--ajyal-surface);color:var(--ajyal-ink);font:inherit;font-size:14px;font-weight:400;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.ajc-input::placeholder,.ajc-form-grid>label>input::placeholder,.ajc-form-grid>label>textarea::placeholder{color:var(--ajyal-muted);opacity:.8}
.ajc-input:focus,.ajc-form-grid>label>input:focus,.ajc-form-grid>label>select:focus,.ajc-form-grid>label>textarea:focus{border-color:var(--ajyal-document-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ajyal-document-primary) 14%,transparent)}
.ajc-input:disabled,.ajc-form-grid>label>select:disabled,.ajc-form-grid>label>input:disabled{background:var(--ajyal-surface-alt);color:var(--ajyal-muted);cursor:not-allowed}
.ajc-field__hint{margin:0;color:var(--ajyal-muted);font-size:12px;font-weight:400;line-height:1.6}
.ajc-field__error{margin:0;color:var(--ajyal-error);font-size:12px;font-weight:600;line-height:1.6}
/* Validated: explicit .is-valid, or automatically when a text-like input is filled and passes native validation. */
.ajc-field.is-valid>.ajc-input,
.ajc-form-grid>label:has(>input:is([type=text],[type=email],[type=tel],:not([type])):not(:placeholder-shown):valid)>input{border-color:color-mix(in srgb,var(--ajyal-success) 45%,var(--ajyal-line));background-color:color-mix(in srgb,var(--ajyal-success) 4%,var(--ajyal-surface));padding-inline-end:40px}
.ajc-field.is-valid::after,
.ajc-form-grid>label:has(>input:is([type=text],[type=email],[type=tel],:not([type])):not(:placeholder-shown):valid)::after{content:"";position:absolute;bottom:13px;inset-inline-end:14px;width:18px;height:18px;background-color:var(--ajyal-success);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
/* Error: explicit .is-invalid, or a filled input that fails native validation (e.g. a malformed e-mail). */
.ajc-field.is-invalid>.ajc-input,
.ajc-form-grid>label>input:not(:placeholder-shown):invalid{border-color:var(--ajyal-error);background-color:color-mix(in srgb,var(--ajyal-error) 4%,var(--ajyal-surface))}
.ajc-field.is-invalid>.ajc-input:focus,.ajc-form-grid>label>input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ajyal-error) 14%,transparent)}

/* ---------- Section dividers ---------- */
.ajc-divider{height:1px;margin:var(--ajc-card-pad) 0;border:0;background:var(--ajyal-line-soft)}
.ajc-section{margin-top:var(--ajc-card-pad);padding-top:var(--ajc-card-pad);border-top:1px solid var(--ajyal-line-soft)}
.ajc-section__title{margin:0 0 4px;color:var(--ajyal-ink);font-size:14px;font-weight:700;line-height:1.5}
.ajc-section__hint{margin:0 0 14px;color:var(--ajyal-muted);font-size:12px;line-height:1.7}

/* ---------- Notes ---------- */
.ajc-note{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-button);background:var(--ajyal-surface-alt);color:var(--ajyal-ink);font-size:12px;line-height:1.7}
.ajc-note--warning{border-color:color-mix(in srgb,var(--ajyal-warning) 35%,var(--ajyal-line));background:var(--ajc-tile-amber-bg)}

/* ---------- Compact tables and rows ---------- */
.ajc-table{width:100%;border-collapse:collapse;font-size:13px}
.ajc-table th{padding:10px 12px;border-bottom:1px solid var(--ajyal-line);color:var(--ajyal-muted);font-size:12px;font-weight:600;text-align:start;white-space:nowrap}
.ajc-table td{padding:10px 12px;border-bottom:1px solid var(--ajyal-line-soft);color:var(--ajyal-ink);vertical-align:middle}
.ajc-table tbody tr:hover{background:var(--ajyal-surface-alt)}
.ajc-row-list{display:grid;border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-card);overflow:hidden;background:var(--ajyal-surface)}
.ajc-row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;min-height:52px;padding:10px 16px;border-bottom:1px solid var(--ajyal-line-soft);color:var(--ajyal-ink);font-size:13px}
.ajc-row:last-child{border-bottom:0}
.ajc-row small{color:var(--ajyal-muted);font-size:12px}
.ajc-row>i,.ajc-badge{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:999px;background:var(--ajyal-primary-soft);color:var(--ajyal-ink);font-size:12px;font-style:normal;font-weight:600}

/* ---------- Empty state ---------- */
.ajc-empty{display:grid;justify-items:center;gap:8px;padding:32px 16px;border:1px dashed var(--ajyal-line-strong);border-radius:var(--ajyal-radius-card);background:var(--ajyal-surface-alt);color:var(--ajyal-muted);font-size:13px;line-height:1.7;text-align:center}
.ajc-empty__title{margin:0;color:var(--ajyal-ink);font-size:15px;font-weight:700}
.ajc-empty__text{margin:0;max-width:52ch}

/* ---------- Sticky bottom action bar ---------- */
.ajc-action-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px var(--ajc-card-pad);background:color-mix(in srgb,var(--ajyal-surface) 96%,transparent);border-top:1px solid var(--ajyal-line);backdrop-filter:blur(6px)}
.ajc-card--padded>.ajc-action-bar:last-child{margin:var(--ajc-card-pad) calc(var(--ajc-card-pad) * -1) calc(var(--ajc-card-pad) * -1);border-radius:0 0 var(--ajyal-radius-card) var(--ajyal-radius-card)}
.ajc-action-bar__meta{color:var(--ajyal-muted);font-size:12px;line-height:1.6}
.ajc-action-bar__spacer{flex:1 1 auto}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ajc-work-layout{grid-template-columns:minmax(0,1fr)}
  .ajc-work-side{position:static}
}
@media (max-width:760px){
  :root{--ajc-card-pad:16px}
  .ajc-page-header__title{font-size:22px}
  .ajc-page-header__actions{width:100%}
  .ajc-page-header__actions>.ajc-btn{flex:1 1 auto}
  .ajc-kpi-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .ajc-kpi-card{grid-template-columns:auto minmax(0,1fr);align-items:center;min-height:0;padding:14px 16px}
  .ajc-form-grid{grid-template-columns:minmax(0,1fr)}
  .ajc-form-grid>.wide,.ajc-form-grid>.ajc-field--wide{grid-column:auto}
  .ajc-step__dot{width:28px;height:28px;font-size:12px}
  .ajc-step:not(:last-child)::after{top:14px;inset-inline-start:calc(50% + 18px);inset-inline-end:calc(-50% + 18px)}
  .ajc-step__label{font-size:11px}
  .ajc-action-bar{padding-block:10px}
  .ajc-action-bar>.ajc-btn{flex:1 1 140px;white-space:normal;min-height:40px;padding-inline:10px;font-size:13px}
}

/* =====================================================================
   Motion, elevation and feedback layer (owner requirements 2026-10-10)
   Durations 150-320ms; everything non-essential is disabled for reduced motion.
   ===================================================================== */
:root{
  --ajc-ease:cubic-bezier(.2,.7,.2,1);
  --ajc-ease-out:cubic-bezier(.16,1,.3,1);
  --ajc-dur-fast:150ms;
  --ajc-dur:220ms;
  --ajc-dur-slow:320ms;
  --ajc-shadow-hover:0 10px 24px rgba(22,34,58,.07);
  --ajc-glass:color-mix(in srgb,var(--ajyal-surface) 82%,transparent);
}

/* Typography refinements */
.ajc-page-header__title{letter-spacing:-.01em}
.ajc-kpi-card__value{letter-spacing:-.02em}

/* Soft, sparing gradients inside the Canva palette */
.ajc-page-header--hero{padding:20px 24px;border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-card);background:linear-gradient(135deg,var(--ajyal-surface) 0%,var(--ajyal-surface) 55%,var(--ajc-tile-blue-bg) 130%)}
.ajc-kpi-card.is-selected{background:linear-gradient(180deg,var(--ajyal-surface) 60%,color-mix(in srgb,var(--ajc-tile-blue-bg) 55%,var(--ajyal-surface)))}
/* Glass layer for floating surfaces (action bar, sticky headers) */
.ajc-glass{background:var(--ajc-glass);backdrop-filter:blur(10px) saturate(1.2)}

/* Micro-interactions */
.ajc-btn{transition:background-color var(--ajc-dur-fast) var(--ajc-ease),border-color var(--ajc-dur-fast) var(--ajc-ease),box-shadow var(--ajc-dur-fast) var(--ajc-ease),transform var(--ajc-dur-fast) var(--ajc-ease)}
.ajc-btn--primary:hover{box-shadow:0 6px 14px color-mix(in srgb,var(--ajyal-primary) 22%,transparent)}
.ajc-btn:active:not(:disabled),.ajc-icon-btn:active:not(:disabled){transform:translateY(1px) scale(.98)}
.ajc-kpi-card,.ajc-card--interactive{transition:transform var(--ajc-dur) var(--ajc-ease),box-shadow var(--ajc-dur) var(--ajc-ease),border-color var(--ajc-dur) var(--ajc-ease)}
.ajc-kpi-card:hover,.ajc-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--ajc-shadow-hover);border-color:var(--ajyal-line-strong)}
.ajc-kpi-card.is-selected:hover{border-color:var(--ajyal-primary);box-shadow:var(--ajyal-shadow-card)}
.ajc-icon-tile{transition:transform var(--ajc-dur) var(--ajc-ease)}
.ajc-kpi-card:hover .ajc-icon-tile{transform:scale(1.06)}
.ajc-row{transition:background-color var(--ajc-dur-fast) var(--ajc-ease)}
.ajc-row:hover{background:var(--ajyal-surface-alt)}

/* Clear focus states */
.ajc-row:focus-within,.ajc-kpi-card:focus-within{outline:2px solid color-mix(in srgb,var(--ajyal-document-primary) 40%,transparent);outline-offset:2px}

/* Entrance: sections, panels and staggered lists */
@keyframes ajc-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ajc-fade{from{opacity:0}to{opacity:1}}
.ajc-reveal,.ajc-kpi-grid>.ajc-kpi-card,.ajc-row-list>.ajc-row,.ajc-timeline>.ajc-timeline__item{animation:ajc-rise var(--ajc-dur-slow) var(--ajc-ease-out) both}
.ajc-kpi-grid>.ajc-kpi-card:nth-child(2),.ajc-row-list>.ajc-row:nth-child(2),.ajc-timeline>.ajc-timeline__item:nth-child(2){animation-delay:40ms}
.ajc-kpi-grid>.ajc-kpi-card:nth-child(3),.ajc-row-list>.ajc-row:nth-child(3),.ajc-timeline>.ajc-timeline__item:nth-child(3){animation-delay:80ms}
.ajc-row-list>.ajc-row:nth-child(4),.ajc-timeline>.ajc-timeline__item:nth-child(4){animation-delay:120ms}
.ajc-row-list>.ajc-row:nth-child(5){animation-delay:160ms}
.ajc-row-list>.ajc-row:nth-child(6){animation-delay:200ms}
.ajc-row-list>.ajc-row:nth-child(n+7){animation-delay:240ms}
.ajc-panel-enter{animation:ajc-rise var(--ajc-dur) var(--ajc-ease-out) both}

/* Stepper progress animation: connectors draw in, the active dot pulses once */
@keyframes ajc-line-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ajc-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ajyal-primary) 35%,transparent)}100%{box-shadow:0 0 0 4px var(--ajyal-primary-soft)}}
.ajc-step:not(:last-child)::after{transform-origin:right center;animation:ajc-line-draw var(--ajc-dur-slow) var(--ajc-ease-out) both}
[dir="ltr"] .ajc-step:not(:last-child)::after{transform-origin:left center}
.ajc-step:nth-child(2)::after{animation-delay:60ms}
.ajc-step:nth-child(3)::after{animation-delay:120ms}
.ajc-step__dot{transition:background-color var(--ajc-dur) var(--ajc-ease),border-color var(--ajc-dur) var(--ajc-ease),color var(--ajc-dur) var(--ajc-ease)}
.ajc-step.is-active .ajc-step__dot{animation:ajc-pulse 600ms var(--ajc-ease-out) 1 both}

/* Skeleton loaders (use instead of spinners) */
@keyframes ajc-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
.ajc-skeleton{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--ajyal-line-soft) 0%,var(--ajyal-surface-alt) 45%,var(--ajyal-line-soft) 90%);background-size:200% 100%;animation:ajc-shimmer 1.2s linear infinite}
.ajc-skeleton--title{height:18px;width:42%}
.ajc-skeleton--text{width:72%}
.ajc-skeleton--short{width:30%}
.ajc-skeleton--field{height:44px;border-radius:var(--ajyal-radius-button)}
.ajc-skeleton--block{height:96px;border-radius:var(--ajyal-radius-card)}
.ajc-skeleton-stack{display:grid;gap:12px}
.ajc-skeleton-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.ajc-skeleton-grid{grid-template-columns:minmax(0,1fr)}}

/* Smart empty state: icon + title + text + next-step CTA */
.ajc-empty__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ajc-tile-blue-bg);color:var(--ajc-tile-blue-ink)}
.ajc-empty__cta{margin-top:6px}

.ajc-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =====================================================================
   Global operation-result modal (ajyal-result-modal.js). Replaces the former
   .ajyal-operation-result rules in design-tokens.css and operation-result-modal.css.
   ===================================================================== */
.ajc-result{width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:28px 24px 22px;overflow:auto;border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-card);background:var(--ajyal-surface);color:var(--ajyal-ink);box-shadow:0 24px 60px rgba(16,42,67,.18);font-family:var(--ajyal-font-family);text-align:center;direction:rtl}
.ajc-result::backdrop{background:rgba(16,42,67,.36);backdrop-filter:blur(3px)}
.ajc-result[open]{animation:ajc-modal-in var(--ajc-dur) var(--ajc-ease-out) both}
.ajc-result[open]::backdrop{animation:ajc-fade var(--ajc-dur) var(--ajc-ease) both}
.ajc-result.is-closing{animation:ajc-modal-out 180ms var(--ajc-ease) both}
.ajc-result.is-closing::backdrop{animation:ajc-fade 180ms var(--ajc-ease) reverse both}
@keyframes ajc-modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ajc-modal-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.98)}}
.ajc-result__icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:color-mix(in srgb,var(--ajyal-success) 10%,var(--ajyal-surface));color:var(--ajyal-success)}
.ajc-result.is-error .ajc-result__icon{background:color-mix(in srgb,var(--ajyal-error) 10%,var(--ajyal-surface));color:var(--ajyal-error)}
.ajc-result__icon svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ajc-result__ring{stroke-width:2.5;opacity:.35;stroke-dasharray:145;stroke-dashoffset:0}
.ajc-result__mark{stroke-dasharray:48;stroke-dashoffset:0}
.ajc-result.is-success .ajc-result__mark--x,.ajc-result.is-error .ajc-result__mark--check{display:none}
.ajc-result__icon.is-animating .ajc-result__ring{animation:ajc-draw-ring 320ms var(--ajc-ease-out) both}
.ajc-result__icon.is-animating .ajc-result__mark{stroke-dashoffset:48;animation:ajc-draw-mark 300ms var(--ajc-ease-out) 200ms forwards}
.ajc-result.is-error .ajc-result__icon.is-animating{animation:ajc-shake 320ms var(--ajc-ease) 420ms 1}
@keyframes ajc-draw-ring{from{stroke-dashoffset:145}to{stroke-dashoffset:0}}
@keyframes ajc-draw-mark{to{stroke-dashoffset:0}}
@keyframes ajc-shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ajc-result__title{margin:0 0 6px;color:var(--ajyal-ink);font-size:20px;font-weight:700;line-height:1.45}
.ajc-result__message{margin:0 auto;max-width:36ch;color:var(--ajyal-muted);font-size:14px;line-height:1.8}
.ajc-result__details{margin:14px 0 0;padding:10px 12px;border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-button);background:var(--ajyal-surface-alt);font-size:12px;text-align:start}
.ajc-result__details summary{cursor:pointer;color:var(--ajyal-ink);font-weight:600}
.ajc-result__details-body{margin-top:8px;color:var(--ajyal-muted);line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.ajc-result__code{margin:10px 0 0;color:var(--ajyal-muted);font-size:11px}
.ajc-result__code bdi{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;unicode-bidi:isolate}
.ajc-result__actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:20px}
.ajc-result__actions .ajc-btn{min-width:120px}
.ajc-result [hidden]{display:none!important}

/* Legacy alias so old markup (operation-result-qa-preview.html) still renders the same card. */
.ajyal-operation-result{width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid var(--ajyal-line);border-radius:var(--ajyal-radius-card);background:var(--ajyal-surface);color:var(--ajyal-ink);box-shadow:var(--ajyal-shadow-card);font-family:var(--ajyal-font-family);direction:rtl}
.ajyal-operation-result__title{margin:0 0 10px;font-size:20px}
.ajyal-operation-result__message{margin:0 0 18px;color:var(--ajyal-muted);line-height:1.7}
.ajyal-operation-result.success,.ajyal-operation-result.is-success{border-color:var(--ajyal-success)}
.ajyal-operation-result.error,.ajyal-operation-result.is-error{border-color:var(--ajyal-error)}

@media (max-width:480px){
  .ajc-result{padding:24px 18px 18px}
  .ajc-result__actions .ajc-btn{flex:1 1 100%}
}

/* Reduced motion: keep state changes, drop movement. The result icon is shown fully drawn. */
@media (prefers-reduced-motion:reduce){
  .ajc-btn,.ajc-icon-btn,.ajc-kpi-card,.ajc-card--interactive,.ajc-input,.ajc-icon-tile,.ajc-row,.ajc-step__dot{transition:none}
  .ajc-kpi-card:hover,.ajc-card--interactive:hover,.ajc-kpi-card:hover .ajc-icon-tile,.ajc-btn:active:not(:disabled),.ajc-icon-btn:active:not(:disabled){transform:none}
  .ajc-reveal,.ajc-panel-enter,.ajc-kpi-grid>.ajc-kpi-card,.ajc-row-list>.ajc-row,.ajc-timeline>.ajc-timeline__item,.ajc-step:not(:last-child)::after,.ajc-step.is-active .ajc-step__dot,.ajc-result[open],.ajc-result[open]::backdrop,.ajc-result.is-closing,.ajc-result.is-closing::backdrop,.ajc-result__icon.is-animating,.ajc-result__icon.is-animating .ajc-result__ring,.ajc-result__icon.is-animating .ajc-result__mark{animation:none}
  .ajc-result__icon.is-animating .ajc-result__mark{stroke-dashoffset:0}
  .ajc-skeleton{animation:none}
}