/* Task-67: the app's older vocabulary on the PCG UI library (vendor/pcg-ui@1.0.0).
   Loaded after tokens/app/screens/live, so where they disagree the library values win.
   1) the old variables point at the library roles; 2) shared components get library metrics. */
.pcg-root h1, .pcg-root h2, .pcg-root h3, .pcg-root h4 { margin: 0; }
.pcg-root p { margin: 0; }
.pcg-root kbd { background: var(--pcg-raised); border-color: var(--pcg-border); color: var(--pcg-muted); }

/* Buttons: the library has two, solid (one main action) and outline (supporting). */
.pcg-root .pcg-button { font-family: var(--pcg-font-body); white-space: nowrap; }
.pcg-root .pcg-button.sm { padding: 6px 12px; font-size: 13px; }
.pcg-root .btn { min-height: 44px; padding: 10px 16px; border-color: var(--pcg-border); background: transparent; color: var(--pcg-ink); font-weight: 500; line-height: 1.5; }
.pcg-root .btn:hover { background: var(--pcg-inset); border-color: var(--pcg-border); }
.pcg-root .btn.primary { background: var(--pcg-red); border-color: transparent; color: var(--on-accent); }
.pcg-root .btn.primary:hover { background: var(--pcg-red-deep); }
/* .btn.ink is a supporting action (the only one left is «reanalyze» on the card): the library outline button. */
.pcg-root .btn.ink { background: transparent; border-color: var(--pcg-border); color: var(--pcg-ink); }
.pcg-root .btn.ink:hover { background: var(--pcg-inset); }
.pcg-root .btn.ghost:not(.pcg-button-outline) { border-color: transparent; color: var(--pcg-muted); }
.pcg-root .btn.ghost:not(.pcg-button-outline):hover { color: var(--pcg-ink); background: var(--pcg-inset); }
.pcg-root .btn.sm { min-height: 44px; padding: 6px 12px; font-size: 13px; }
.pcg-root .btn.lg { min-height: 48px; padding: 10px 24px; font-size: 16px; }
.pcg-root .linkbtn { min-height: 44px; color: var(--pcg-ink); text-decoration-color: var(--pcg-border); }
.pcg-root .linkbtn:hover { text-decoration-color: var(--pcg-red); }

/* Fields: outlined, on the inset surface, with a permanent label. Native <select> takes the library select-trigger look
   (raised, control border): compact in rows and filters, comfortable in forms (task-112). */
.pcg-root .select { background: var(--pcg-raised); }
.pcg-root .select.compact { min-height: 44px; padding: 8px 12px; }
.pcg-root .select.comfortable { min-height: 56px; padding: 14px 16px; }
.pcg-root .field label, .pcg-root .label, .pcg-root .pcg-field label { font-size: 13px; color: var(--pcg-muted); }
.pcg-root .input, .pcg-root .textarea, .pcg-root .select { min-height: 48px; padding: 12px 16px; border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-control); background: var(--pcg-inset); }
.pcg-root .input:focus, .pcg-root .textarea:focus, .pcg-root .select:focus, .pcg-root .pcg-field input:focus { outline: 2px solid var(--pcg-focus); outline-offset: 3px; border-color: var(--pcg-border); }

/* Surfaces (task-112, library roles): sections are panel on the canvas, panel radius, a quiet separator edge. Raised is
   kept for menus, dialogs and the one key verdict (.pcg-depth-shadow). */
.pcg-root .pcg-surface, .pcg-root .block, .pcg-root .card, .pcg-root .rows, .pcg-root .cand, .pcg-root .table { background: var(--pcg-panel); border: 1px solid var(--pcg-separator); border-radius: var(--pcg-radius-panel); }
.pcg-root .rows.pcg-surface { padding: 0; overflow: hidden; }
.pcg-root .section-list { border: 1px solid var(--pcg-separator); border-radius: var(--pcg-radius-panel); }
.pcg-root .cand:first-child { border-color: var(--pcg-active-border); box-shadow: var(--pcg-active-shadow); }

/* Headings: Sakkal for titles only (never on controls). */
.pcg-root .head h1, .pcg-root .new-entity h1 { font: 700 clamp(30px, 4vw, 40px)/1.2 var(--pcg-font-heading); }
.pcg-root .h2, .pcg-root .card-head h2 { font: 700 26px/1.3 var(--pcg-font-heading); }
.pcg-root .section-list h3, .pcg-root .section-list > summary { font: 700 17px/1.5 var(--pcg-font-body); }

/* Tabs (links, so no ARIA tab roles): library metrics, red underline on the current one. */
.pcg-root .tabs { gap: 4px; border-bottom: 1px solid var(--pcg-border); }
.pcg-root .tabs a, .pcg-root .tabs button { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 12px; font: 16px/24px var(--pcg-font-body); color: var(--pcg-muted); border-bottom: 2px solid transparent; }
.pcg-root .tabs [aria-selected="true"], .pcg-root .tabs [aria-current="page"] { color: var(--pcg-ink); font-weight: 700; border-bottom-color: var(--pcg-red); }

/* Top bar: the panel surface. */
.pcg-root .appbar { background: var(--pcg-panel); border-bottom: 1px solid var(--pcg-separator); }
.pcg-root .appbar-in { height: 64px; }
.pcg-root .nav a { font: 16px/24px var(--pcg-font-body); color: var(--pcg-muted); min-height: 44px; }
.pcg-root .nav a[aria-current="page"] { color: var(--pcg-ink); font-weight: 700; border-bottom-color: var(--pcg-red); }
.pcg-root .switch-btn { min-height: 44px; padding: 8px 14px; border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-control); background: var(--pcg-raised); }
.pcg-root .switch-pop { background: var(--pcg-raised); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-control); box-shadow: var(--pcg-elevation); }
.pcg-root .switch-pop li a { min-height: 44px; padding: 8px 14px; }
.pcg-root .switch-pop li a:hover, .pcg-root .switch-pop li a:focus-visible { background: var(--pcg-inset); }
.pcg-root .appbar .running { min-height: 44px; padding: 6px 12px; border-color: var(--pcg-border); border-radius: var(--pcg-radius-control); color: var(--pcg-ink); align-self: center; }
.pcg-root .appbar .running .pulse { background: var(--pcg-red); }

/* Home rows */
.pcg-root .row .nm { font: 700 22px/1.3 var(--pcg-font-heading); }
.pcg-root .row .meta, .pcg-root .home-foot, .pcg-root .crumb, .pcg-root .crumb a, .pcg-root .faint { color: var(--pcg-muted); }
.pcg-root .crumb a { min-height: 24px; display: inline-flex; align-items: center; }
.pcg-root .home-foot { margin-top: var(--pcg-space-3); }
/* Stage line: the success colour on the canvas is 3.85:1 at 12px, so it marks the edge and the text stays ink. */
.pcg-root .stages li.done .s { color: var(--pcg-ink); }

/* Login */
.pcg-root .login .new-entity { padding: var(--pcg-space-8); }
.pcg-root .login form { display: grid; gap: var(--pcg-space-4); max-width: none; }
.pcg-root .login form.stack > * + * { margin-top: 0; }
.pcg-root .login .submit { justify-self: stretch; }

/* Task-69: monogram tones = the library categorical palette (a–f), a small accent. Light text on a, b, c, e; ink on d and f. */
.pcg-root .mono[data-tone]{color:var(--on-accent)}
.mono[data-tone="1"]{background:var(--pcg-category-a)}.mono[data-tone="2"]{background:var(--pcg-category-b)}.mono[data-tone="3"]{background:var(--pcg-category-c)}
.mono[data-tone="4"]{background:var(--pcg-category-d)}.mono[data-tone="5"]{background:var(--pcg-category-e)}.mono[data-tone="6"]{background:var(--pcg-category-f)}
.pcg-root .mono[data-tone="4"], .pcg-root .mono[data-tone="6"]{color:var(--pcg-ink)}

/* Task-69: the stage line as one library surface; the surfaces on the remaining pages. */
.pcg-root .stages ol.pcg-surface { padding: var(--pcg-space-2); margin-bottom: var(--pcg-space-3); }
.pcg-root .stages li.here a { background: var(--pcg-inset); border-radius: var(--pcg-radius-control); }
.pcg-root .new-entity.pcg-surface { padding: var(--pcg-space-8); }
.pcg-root .new-entity h1 { margin-bottom: var(--pcg-space-6); }
.pcg-root .new-entity .crumb { margin-bottom: var(--pcg-space-2); }
.pcg-root .occ.pcg-surface, .pcg-root .emp-work.pcg-surface, .pcg-root .add-user.pcg-surface { padding: var(--pcg-space-6); }
.pcg-root .flash.pcg-surface, .pcg-root .need.pcg-surface { padding: var(--pcg-space-3) var(--pcg-space-4); }
.pcg-root .table.pcg-surface { border-collapse: separate; border-spacing: 0; overflow: hidden; }
.pcg-root .new-entity .submit { justify-self: start; }
.pcg-root .soon .appbar-in { display: flex; align-items: center; gap: var(--pcg-space-4); min-height: 64px; height: auto; padding: var(--pcg-space-2) var(--pcg-space-4); }
.pcg-root .soon .new-entity h1 { margin-bottom: var(--pcg-space-2); }
.pcg-root .soon .appbar-in b { margin-inline-end: auto; }
.pcg-root .soon .new-entity { margin-inline: var(--pcg-space-4); }
.pcg-root .soon .new-entity p { color: var(--pcg-muted); }
/* task-119: assignments are library switch-radix rows (name, then the switch with «مفعّل/متوقف» beside it). The native
   checkbox sits over the track at 44px tall, so the form posts without JS and the tap target is the library height. */
.pcg-root .assign { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 var(--pcg-space-6); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.pcg-root .assign .pcg-switch-copy strong { font-weight: 400; }
.pcg-root .assign .pcg-switch-control { position: relative; padding-inline-start: 56px; }
.pcg-root .assign .pcg-switch-control input { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }
.pcg-root .assign .pcg-switch-control input:focus-visible + .pcg-radix-switch { outline: 2px solid var(--pcg-focus); outline-offset: 3px; }
/* task-119: the account's post lists share one panel, separated by lines (no card per list) */
.pcg-root .lists.pcg-surface { padding: 0; }
.pcg-root .lists .section-list { border: 0; border-radius: 0; background: none; }
.pcg-root .lists .section-list + .section-list { border-top: 1px solid var(--pcg-separator); }
/* task-119: the login's one action spans the form */
.pcg-root .login .submit.wide { justify-self: stretch; width: 100%; }

@media (max-width: 720px) {
  .pcg-root .new-entity.pcg-surface { padding: var(--pcg-space-6) var(--pcg-space-4); }
  .pcg-root .appbar-in { height: auto; }
  .pcg-root .appbar .running { min-width: 44px; justify-content: center; padding: 6px; }
  .pcg-root .nav { height: 48px; }
  .pcg-root .login .new-entity { padding: var(--pcg-space-6) var(--pcg-space-4); margin-top: var(--pcg-space-6); }
  .pcg-root .card { padding: var(--pcg-space-4); }
}

/* task-79 (journey check task-76): narrow screens. Admin tabs and the quality table scroll inside their own box with a
   visible hint; the stage strip keeps letter, name and state together; the «الآن» note keeps its padding on both sides. */
.pcg-root .tabs-wrap { position: relative; }
.pcg-root .scroll-hint { display: none; margin: 4px 0 var(--pcg-space-3); }
.pcg-root .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--pcg-radius-panel); }
.pcg-root .tbl-scroll:focus-visible { outline: 2px solid var(--pcg-focus); outline-offset: 3px; }
@media (max-width: 720px) {
  .pcg-root .scroll-hint { display: block; }
  .pcg-root .tabs-wrap .tabs { overflow-x: auto; scrollbar-width: thin; margin-bottom: 0; }
  .pcg-root .tbl-scroll .table { min-width: 560px; }
  .pcg-root .tbl-scroll .table th, .pcg-root .tbl-scroll .table td { display: table-cell; }
  .pcg-root .stages ol.pcg-surface { gap: 4px; padding: 4px; }
  .pcg-root .stages a, .pcg-root .stages .lk { grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; padding: 8px 6px; align-items: start; }
  .pcg-root .stages .n { grid-row: 1 / 3; font-size: 16px; line-height: 1.3; }
  .pcg-root .stages .t { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
  .pcg-root .stages .s { font-size: 11px; white-space: nowrap; }
  .pcg-root p.now-step { padding-inline: 14px; overflow-wrap: anywhere; }
}
/* task-79: the account page's «آخر بحث / حدّث البحث»: one baseline, same metrics, aligned with the card's edge above
   (moving the pair inside the card needs account.php, which another task owns; listed in the task-79 report) */
.pcg-root .research-again { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-4, 16px); margin-top: var(--pcg-space-3, 12px); padding-inline: var(--pcg-space-4, 16px); }
.pcg-root .research-again .linkbtn { display: inline-flex; align-items: center; min-height: 44px; font: 400 14px/1.5 var(--pcg-font-body); }
.pcg-root .scroll-hint.tbl-hint { margin-top: var(--pcg-space-4); }
/* task-182 (B7): the entity's logo as its avatar (same box as the letter) */
img.mono.logo{display:inline-block;object-fit:contain;background:var(--pcg-panel);border:1px solid var(--pcg-separator);padding:1px;box-sizing:border-box}

/* task-237: the profile identity action is a control, not an inline prose link. */
.pcg-root .idn-link { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 720px) {
  /* PCG touch targets: keep the compact desktop metrics above. */
  .pcg-root .nav a:not(.pcg-button) { min-width: 44px; flex-shrink: 0; justify-content: center; }
  .pcg-root .row a.nm,
  .pcg-root .crumb a,
  .pcg-root .idn-link,
  .pcg-root .section-list .post > div > a:not(.pcg-button) {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
}