/* PHF HR — Chương trình thi đua · Batch A visual skeleton.
   Scoped entirely under .phf-comp (rendered inside #phfHrRoot / HR shell).
   No global-selector bleed. Luxury-but-operational: PHF green structural,
   ivory/cream surfaces, champagne-gold hairline accents, thin borders,
   one restrained soft-shadow token. Arial-first. */

.phf-comp{
  --comp-green:#1f6f43;
  --comp-green-deep:#164f30;
  --comp-green-soft:#e8f2eb;
  --comp-ink:#243027;
  --comp-ink-soft:#5b6b60;
  --comp-surface:#fffdf8;      /* warm white */
  --comp-surface-cream:#fbf6ec; /* cream */
  --comp-surface-ivory:#f7f1e4; /* ivory */
  --comp-gold:#c8a86a;          /* champagne gold — hairlines / marks only */
  --comp-gold-soft:#efe4cd;
  --comp-border:#e7e0d0;
  --comp-border-strong:#d9cfb8;
  --comp-shadow:0 1px 2px rgba(36,48,39,.05), 0 8px 24px -12px rgba(36,48,39,.14);
  --comp-radius:14px;
  font-family:Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  color:var(--comp-ink);
  background:
    radial-gradient(1200px 340px at 12% -8%, rgba(200,168,106,.10), transparent 60%),
    linear-gradient(180deg,#fffefb 0%, #fbf6ec 100%);
  min-height:100%;
  display:block;
}
/* V1.5.1 — shared modal backdrops (showInputModal/showConfirmModal/
   showSimilarityWarning/bulk-upload/adjust-score) are appended as siblings
   of .phf-comp via document.body.appendChild, so they never inherit the
   --comp-* custom properties declared only on .phf-comp above (custom
   properties cascade to descendants only). This class re-declares ONLY the
   tokens (exact values copied from .phf-comp) so every var(--comp-*) inside
   a dynamically-created modal resolves correctly, without scattering
   var(--comp-x, fallback) across every consuming rule. */
.phf-comp-modal-scope{
  --comp-green:#1f6f43;
  --comp-green-deep:#164f30;
  --comp-green-soft:#e8f2eb;
  --comp-ink:#243027;
  --comp-ink-soft:#5b6b60;
  --comp-surface:#fffdf8;
  --comp-surface-cream:#fbf6ec;
  --comp-surface-ivory:#f7f1e4;
  --comp-gold:#c8a86a;
  --comp-gold-soft:#efe4cd;
  --comp-border:#e7e0d0;
  --comp-border-strong:#d9cfb8;
  --comp-shadow:0 1px 2px rgba(36,48,39,.05), 0 8px 24px -12px rgba(36,48,39,.14);
  --comp-radius:14px;
  font-family:Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
}
.phf-comp *{box-sizing:border-box;}
.phf-comp a{color:var(--comp-green-deep);text-decoration:none;}

/* ---- shell layout ---- */
.phf-comp-shell{max-width:1240px;margin:0 auto;padding:22px clamp(14px,3vw,32px) 56px;}
.phf-comp-top{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--comp-border);
}
.phf-comp-home-btn{
  display:inline-flex;align-items:center;gap:6px;order:-1;
  font:600 12.5px "Segoe UI",Arial,sans-serif;color:var(--comp-green-deep);
  border:1px solid var(--comp-border);border-radius:999px;padding:6px 12px;
  background:var(--comp-surface);cursor:pointer;
}
.phf-comp-home-btn:hover{background:var(--comp-surface-cream);border-color:var(--comp-border-strong);}
.phf-comp-home-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;}
.phf-comp-top .phf-comp-logo{height:32px;width:auto;}
.phf-comp-brand{display:flex;flex-direction:column;line-height:1.2;}
.phf-comp-brand b{font-size:14px;letter-spacing:.02em;}
.phf-comp-brand small{font-size:11px;color:var(--comp-ink-soft);letter-spacing:.06em;text-transform:uppercase;}
.phf-comp-brand-rule{width:1px;height:26px;background:linear-gradient(var(--comp-gold),transparent);}

/* ---- V1.4 notification bell ---- */
.phf-comp-notif-wrap{position:relative;margin-left:auto;}
.phf-comp-notif-bell{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--comp-border);border-radius:999px;
  background:var(--comp-surface);cursor:pointer;color:var(--comp-ink);
}
.phf-comp-notif-bell:hover{background:var(--comp-surface-cream);border-color:var(--comp-border-strong);}
.phf-comp-notif-bell svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;}
.phf-comp-notif-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:#b5502f;color:#fff;font:700 10px/16px "Segoe UI",Arial,sans-serif;
  text-align:center;
}
.phf-comp-notif-panel{
  position:absolute;top:calc(100% + 8px);right:0;width:min(360px,86vw);max-height:420px;overflow:auto;
  border:1px solid var(--comp-border);border-radius:var(--comp-radius);background:var(--comp-surface);
  box-shadow:var(--comp-shadow);z-index:40;
}
.phf-comp-notif-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-bottom:1px solid var(--comp-border);position:sticky;top:0;background:var(--comp-surface);
}
.phf-comp-notif-head b{font-size:13px;}
.phf-comp-notif-list{padding:4px;}
.phf-comp-notif-item{padding:9px 10px;border-radius:10px;cursor:pointer;}
.phf-comp-notif-item:hover{background:var(--comp-surface-cream);}
.phf-comp-notif-item.is-unread{background:var(--comp-green-soft);}
.phf-comp-notif-item.is-unread:hover{background:#dcecdf;}
.phf-comp-notif-title{font-size:12.5px;font-weight:700;color:var(--comp-ink);}
.phf-comp-notif-msg{font-size:12px;color:var(--comp-ink-soft);margin-top:2px;}
.phf-comp-notif-when{font-size:10.5px;color:var(--comp-ink-soft);margin-top:4px;}
.phf-comp-notif-panel .phf-comp-empty{padding:22px 14px;}

.phf-comp-identity{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  padding:10px 2px;border-bottom:1px dashed var(--comp-border);
  font-size:12.5px;color:var(--comp-ink-soft);
}
.phf-comp-identity-line{font-size:13px;color:var(--comp-ink);}
.phf-comp-identity-line b{font-weight:700;}
.phf-comp-identity-sub{color:var(--comp-ink-soft);}
.phf-comp-identity-chips{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto;}
.phf-comp-identity-chip{
  font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--comp-ink-soft);
  border:1px solid var(--comp-border);border-radius:999px;padding:2px 9px;
  background:var(--comp-surface-cream);white-space:nowrap;
}

.phf-comp-body{display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(16px,2.4vw,30px);margin-top:22px;}

/* ---- module menu — each group (Tham gia / Xét duyệt / Quản trị) is its own
   light, bordered surface: a stronger PHF-green group title clearly separated
   from a softly-inset item list. Very light depth only — a hairline border, a
   soft shadow and a faint inset seam, no glass/gloss/gradient. */
.phf-comp-nav{display:flex;flex-direction:column;gap:10px;position:sticky;top:14px;align-self:start;}
.phf-comp-nav-group-wrap{
  border:1px solid var(--comp-border);border-radius:14px;background:var(--comp-surface);
  padding:10px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 6px 16px -12px rgba(22,79,48,.22);
}
.phf-comp-nav-group{
  display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--comp-green-deep);padding:2px 8px 8px;
}
.phf-comp-nav-group-items{
  display:flex;flex-direction:column;gap:2px;
  background:var(--comp-surface-cream);border-radius:10px;padding:4px;
  box-shadow:inset 0 1px 3px rgba(22,79,48,.06);
}
.phf-comp-nav a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  font-size:13.5px;color:var(--comp-ink);border:1px solid transparent;
}
.phf-comp-nav a svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.8;}
.phf-comp-nav a:hover{background:var(--comp-surface);border-color:var(--comp-border);}
.phf-comp-nav a.is-active{
  background:var(--comp-green-soft);border-color:#cfe3d6;color:var(--comp-green-deep);font-weight:700;
  box-shadow:0 1px 2px rgba(22,79,48,.10);
}
.phf-comp-nav a.is-active svg{opacity:1;}
/* light CTA treatment for "+ Gửi bài dự thi" — still a nav item, not a
   separate button, but visually invites the action */
.phf-comp-nav a.is-cta{color:var(--comp-green-deep);font-weight:700;border-color:#cfe3d6;}
.phf-comp-nav a.is-cta svg{opacity:1;stroke:var(--comp-green);}

/* ---- content ---- */
.phf-comp-main{min-width:0;}
.phf-comp-hero{
  border:1px solid var(--comp-border);border-radius:var(--comp-radius);
  background:linear-gradient(135deg,#ffffff 0%, var(--comp-surface-cream) 100%);
  box-shadow:var(--comp-shadow);padding:clamp(18px,2.6vw,30px);position:relative;overflow:hidden;
}
.phf-comp-hero::after{content:"";position:absolute;inset:0 0 auto auto;width:180px;height:180px;
  background:radial-gradient(circle at 70% 30%, rgba(200,168,106,.16), transparent 70%);pointer-events:none;}
.phf-comp-hero .phf-comp-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--comp-gold);}
.phf-comp-hero h1{margin:.35em 0 .25em;font-size:clamp(20px,2.6vw,27px);color:var(--comp-green-deep);}
.phf-comp-hero p{margin:0;color:var(--comp-ink-soft);font-size:14px;max-width:62ch;}

/* admin tools — operational surface, deliberately plainer than the
   participant hero (no gold-fleck decoration, no gradient, no "recognition"
   framing) so Quản lý/Phân quyền/Chốt read as work tools, not the Feed. */
.phf-comp-admin-hero{
  border-left:3px solid var(--comp-green);padding:4px 0 14px 16px;margin-bottom:2px;
}
.phf-comp-admin-hero .phf-comp-eyebrow{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--comp-ink-soft);}
.phf-comp-admin-hero h1{margin:.3em 0 .2em;font-size:clamp(18px,2vw,23px);color:var(--comp-green-deep);}
.phf-comp-admin-hero p{margin:0;color:var(--comp-ink-soft);font-size:13px;max-width:62ch;}

.phf-comp-section{margin-top:22px;}
.phf-comp-section > h2{font-size:15px;margin:0 0 12px;color:var(--comp-ink);display:flex;align-items:center;gap:8px;}
.phf-comp-section > h2 svg{width:18px;height:18px;stroke:var(--comp-gold);fill:none;stroke-width:1.6;}

/* section header with a right-aligned CTA (e.g. "Bài của tôi" + "Gửi bài mới") */
.phf-comp-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.phf-comp-section-head h2{margin:0;}

/* quiet filter tabs — not status pills, not a full tab-bar chrome */
.phf-comp-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.phf-comp-filter{
  font:inherit;font-size:12.5px;font-weight:600;color:var(--comp-ink-soft);
  border:1px solid transparent;background:none;border-radius:8px;padding:6px 10px;cursor:pointer;
}
.phf-comp-filter:hover{background:var(--comp-surface-cream);}
.phf-comp-filter.is-active{color:var(--comp-green-deep);background:var(--comp-green-soft);border-color:#cfe3d6;}
.phf-comp-filter-count{font-variant-numeric:tabular-nums;opacity:.75;}

/* Filter V1 — active-filter chip row, shared by the admin submissions list
   and the reviewer queue filter bars ("Bộ lọc" shows its count inline as
   "· N" text, not a separate badge element — see .phf-comp-filter-toggle). */
.phf-comp-chip{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:var(--comp-green-deep);background:var(--comp-green-soft);border:1px solid #cfe3d6;
  border-radius:999px;padding:4px 6px 4px 10px;
}
.phf-comp-chip button{
  font:inherit;border:none;background:none;color:inherit;cursor:pointer;line-height:1;padding:0 2px;opacity:.75;
}
.phf-comp-chip button:hover{opacity:1;}

/* Filter V1 polish — "Bộ lọc"/"Xóa lọc" as a quiet secondary toolbar control,
   sized to match the status chips it sits next to (.phf-comp-filter), never
   a CTA. Small icon, light border, neutral surface — a control, not a
   headline action. */
.phf-comp-filter-toggle{
  display:inline-flex;align-items:center;gap:5px;
  font:inherit;font-weight:600;font-size:12.5px;line-height:1.2;
  color:var(--comp-ink-soft);background:var(--comp-surface);
  border:1px solid var(--comp-border);border-radius:8px;
  padding:6px 10px;cursor:pointer;
}
.phf-comp-filter-toggle:hover{background:var(--comp-surface-cream);color:var(--comp-green-deep);}
.phf-comp-filter-toggle svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;}
.phf-comp-filter-toggle[disabled]{opacity:.6;cursor:progress;}

/* Chờ duyệt — compact "Tìm mã bài..." box, same height/border as the
   .phf-comp-filter-toggle controls beside it. */
.phf-comp-ref-search{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--comp-border);border-radius:8px;background:var(--comp-surface);
  padding:0 8px;color:var(--comp-ink-soft);
}
.phf-comp-ref-search:focus-within{border-color:var(--comp-green-deep);color:var(--comp-green-deep);}
.phf-comp-ref-search svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;}
.phf-comp-ref-search input{
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border:none;outline:none;background:none;color:var(--comp-ink);
  width:120px;padding:6px 0;
}
.phf-comp-ref-search input::placeholder{text-transform:none;letter-spacing:0;font-weight:500;color:var(--comp-ink-soft);}

.phf-comp-card{
  border:1px solid var(--comp-border);border-radius:var(--comp-radius);background:var(--comp-surface);
  box-shadow:var(--comp-shadow);padding:clamp(16px,2.2vw,24px);
}
.phf-comp-card + .phf-comp-card{margin-top:14px;}

.phf-comp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.phf-comp-fact{border:1px solid var(--comp-border);border-radius:12px;background:var(--comp-surface);padding:14px 16px;}
.phf-comp-fact b{display:block;font-size:12px;color:var(--comp-ink-soft);font-weight:600;letter-spacing:.02em;}
.phf-comp-fact span{display:block;margin-top:4px;font-size:15px;color:var(--comp-ink);}

/* ---- Round 2: "Thể lệ chương trình" (Tổng quan) ---- */
.phf-comp-rules-summary{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.phf-comp-rules-fact{
  border:1px solid var(--comp-border);border-radius:12px;background:var(--comp-surface-cream);
  padding:12px 14px;text-align:center;
}
.phf-comp-rules-fact b{display:block;font-size:19px;color:var(--comp-green-deep);}
.phf-comp-rules-fact span{display:block;margin-top:3px;font-size:11.5px;color:var(--comp-ink-soft);}
.phf-comp-rules-fact.is-high{border-color:var(--comp-gold);background:var(--comp-gold-soft);}
.phf-comp-rules-fact.is-high b{color:#8a6a2c;}
.phf-comp-rules-fact.is-warn b{color:#a5573b;font-size:15px;}

.phf-comp-steps{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.phf-comp-step{display:flex;gap:12px;align-items:flex-start;}
.phf-comp-step-no{
  flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;color:var(--comp-green-deep);background:var(--comp-green-soft);border:1px solid #cfe3d6;
}
.phf-comp-step b{display:block;font-size:13.5px;color:var(--comp-ink);}
.phf-comp-step p{margin:2px 0 0;font-size:12.5px;color:var(--comp-ink-soft);}

.phf-comp-rules-spirit{
  margin:18px 0 0;padding:12px 14px;font-size:13px;font-style:italic;color:var(--comp-ink-soft);
  border-left:3px solid var(--comp-gold);background:var(--comp-surface-cream);border-radius:0 10px 10px 0;
}

.phf-comp-disclosure{margin-top:18px;border-top:1px solid var(--comp-border);padding-top:14px;}
.phf-comp-disclosure summary{
  cursor:pointer;font-size:13px;font-weight:700;color:var(--comp-green-deep);list-style:none;
  display:inline-flex;align-items:center;gap:6px;
}
.phf-comp-disclosure summary::before{content:'▸';font-size:11px;transition:transform .12s ease;}
.phf-comp-disclosure[open] summary::before{transform:rotate(90deg);}
.phf-comp-disclosure summary::-webkit-details-marker{display:none;}
.phf-comp-disclosure-body{margin-top:14px;}
.phf-comp-disclosure-h{display:block;font-size:12px;letter-spacing:.03em;color:var(--comp-ink-soft);text-transform:uppercase;margin:16px 0 8px;}
.phf-comp-disclosure-h:first-child{margin-top:0;}
.phf-comp-rules-list{margin:0;padding-left:18px;font-size:13px;color:var(--comp-ink);line-height:1.7;}

.phf-comp-checklist-table{display:flex;flex-direction:column;gap:2px;max-width:280px;}
.phf-comp-checklist-row{display:flex;justify-content:space-between;font-size:13px;padding:5px 2px;border-bottom:1px dashed var(--comp-border);}
.phf-comp-checklist-row b{color:var(--comp-ink-soft);font-weight:700;}
.phf-comp-checklist-row:first-child b{color:var(--comp-green-deep);}

/* level chips — campaign configuration display (not runtime data) */
.phf-comp-levels{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.phf-comp-level{
  display:flex;align-items:center;gap:10px;border:1px solid var(--comp-border-strong);
  border-left:3px solid var(--comp-gold);border-radius:10px;padding:10px 14px;background:var(--comp-surface-cream);
}
.phf-comp-level .lv-name{font-weight:700;font-size:13.5px;}
.phf-comp-level .lv-score{font-size:12.5px;color:var(--comp-green-deep);border:1px solid #cfe3d6;background:var(--comp-green-soft);
  border-radius:999px;padding:2px 9px;}
.phf-comp-level .lv-order{font-size:11px;color:var(--comp-ink-soft);}

.phf-comp-note{
  display:flex;gap:10px;font-size:12.5px;color:var(--comp-ink-soft);
  background:var(--comp-surface-ivory);border:1px solid var(--comp-border);border-radius:10px;
  padding:11px 13px;margin-top:12px;
}
.phf-comp-note svg{width:16px;height:16px;flex:none;stroke:var(--comp-gold);fill:none;stroke-width:1.6;margin-top:1px;}

/* ---- empty state ---- */
.phf-comp-empty{
  text-align:center;padding:44px 20px;border:1px dashed var(--comp-border-strong);
  border-radius:var(--comp-radius);background:var(--comp-surface);
}
.phf-comp-empty svg{width:34px;height:34px;stroke:var(--comp-gold);fill:none;stroke-width:1.3;opacity:.8;}
.phf-comp-empty p{margin:12px 0 0;color:var(--comp-ink-soft);font-size:13.5px;}
.phf-comp-empty .phf-comp-em-sub{font-size:12px;margin-top:4px;}

/* ---- status legend / pills (visual language only, no rows) ---- */
.phf-comp-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.phf-comp-pill{font-size:11.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--comp-border);background:var(--comp-surface-cream);color:var(--comp-ink-soft);}
.phf-comp-pill[data-s="draft"]{border-color:#d9cfb8;}
.phf-comp-pill[data-s="submitted"]{border-color:#cfd8e6;color:#3a5478;background:#eef3f9;}
.phf-comp-pill[data-s="needs_revision"]{border-color:#e6d3b3;color:#8a6a2c;background:#fbf2e0;}
.phf-comp-pill[data-s="approved"]{border-color:#cfe3d6;color:var(--comp-green-deep);background:var(--comp-green-soft);}
.phf-comp-pill[data-s="rejected"]{border-color:#e6cccc;color:#8a3b3b;background:#f8ecec;}
.phf-comp-pill[data-s="finalized"]{border-color:var(--comp-gold);color:var(--comp-green-deep);background:var(--comp-gold-soft);}

/* ---- toolbar (filters, disabled in Batch A) ---- */
.phf-comp-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.phf-comp-toolbar select,.phf-comp-field input,.phf-comp-field textarea,.phf-comp-field select{
  font:inherit;color:var(--comp-ink);background:var(--comp-surface);
  border:1px solid var(--comp-border-strong);border-radius:9px;padding:9px 11px;width:100%;
}
.phf-comp-toolbar select{width:auto;min-width:170px;}
.phf-comp-toolbar select:disabled,.phf-comp-field :disabled{background:var(--comp-surface-ivory);color:var(--comp-ink-soft);cursor:not-allowed;}

/* ---- form ---- */
.phf-comp-field{margin-bottom:16px;}
.phf-comp-field > label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;}
.phf-comp-field > label .req{color:#b5502f;margin-left:3px;}
.phf-comp-field .hint{font-size:11.5px;color:var(--comp-ink-soft);margin-top:5px;}
.phf-comp-field textarea{min-height:120px;line-height:1.6;resize:vertical;}

.phf-comp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--comp-border);}
.phf-comp-btn{
  font:inherit;font-weight:700;font-size:13.5px;border-radius:10px;padding:10px 18px;cursor:pointer;
  border:1px solid var(--comp-green);background:var(--comp-green);color:#fff;
}
.phf-comp-btn.is-ghost{background:var(--comp-surface);color:var(--comp-green-deep);border-color:var(--comp-border-strong);}
.phf-comp-btn.is-danger{background:#a5573b;border-color:#a5573b;}
.phf-comp-btn:disabled{background:var(--comp-surface-ivory);border-color:var(--comp-border-strong);color:var(--comp-ink-soft);cursor:not-allowed;}
.phf-comp-disabled-hint{font-size:12px;color:var(--comp-ink-soft);align-self:center;}

/* ---- reviewer queue — focused work surface (quiet, no social/gold
   treatment; deliberately looks like a task to act on, not a feed post). */
.phf-comp-review-item{
  border:1px solid var(--comp-border);border-left:3px solid var(--comp-green);
  border-radius:12px;background:var(--comp-surface);padding:16px;
}
.phf-comp-review-item .rq-ref{font-size:11.5px;letter-spacing:.06em;color:var(--comp-ink-soft);text-transform:uppercase;}
.phf-comp-review-resp-tag{color:var(--comp-green-deep);text-transform:none;letter-spacing:normal;font-weight:600;}
.phf-comp-review-item h3{margin:6px 0;font-size:14.5px;}
.phf-comp-review-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--comp-border);}
.phf-comp-review-level-static{
  font-size:12.5px;font-weight:600;color:var(--comp-green-deep);
  border:1px solid var(--comp-border);border-radius:8px;padding:6px 10px;background:var(--comp-surface-cream);
}

/* ---- admin tables → responsive stack ---- */
.phf-comp-table{width:100%;border-collapse:collapse;font-size:13px;}
.phf-comp-table th,.phf-comp-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--comp-border);}
.phf-comp-table th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--comp-ink-soft);}
.phf-comp-table-wrap{overflow-x:auto;}

.phf-comp-freeze{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#8a6a2c;
  border:1px solid #e6d3b3;background:#fbf2e0;border-radius:999px;padding:3px 10px;}
.phf-comp-freeze svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;}

/* ---- V1.1 — reviewer "Có nội dung tương tự" (quiet, expand-on-demand) ---- */
.phf-comp-similar-disclosure{margin-top:12px;border-top:1px solid var(--comp-border);padding-top:10px;}
.phf-comp-similar-disclosure summary{
  cursor:pointer;font-size:12.5px;font-weight:700;color:#8a6a2c;list-style:none;
  display:inline-flex;align-items:center;gap:6px;
}
.phf-comp-similar-disclosure summary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;}
.phf-comp-similar-disclosure summary::-webkit-details-marker{display:none;}
.phf-comp-similar-body{margin-top:10px;display:flex;flex-direction:column;gap:10px;}
.phf-comp-similar-item{border:1px solid var(--comp-border);border-left:3px solid var(--comp-gold);
  border-radius:10px;background:var(--comp-surface-cream);padding:12px 14px;}
.phf-comp-similar-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--comp-ink-soft);}
.phf-comp-similar-verdict{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}

/* ---- V1.1 — sender pre-submit similarity warning (modal, never blocks) ---- */
.phf-comp-simwarn-backdrop{
  position:fixed;inset:0;background:rgba(36,48,39,.45);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.phf-comp-simwarn{
  width:100%;max-width:520px;max-height:85vh;overflow-y:auto;
  background:var(--comp-surface);border:1px solid var(--comp-border);border-radius:var(--comp-radius);
  box-shadow:0 20px 50px rgba(36,48,39,.28);padding:clamp(18px,2.4vw,26px);
}
.phf-comp-simwarn h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:16px;color:var(--comp-ink);}
.phf-comp-simwarn h3 svg{width:18px;height:18px;stroke:#a5573b;fill:none;stroke-width:1.6;}
.phf-comp-simwarn-list{display:flex;flex-direction:column;gap:10px;}
.phf-comp-simwarn-cand{border:1px solid var(--comp-border);border-radius:10px;background:var(--comp-surface-cream);padding:12px 14px;}
.phf-comp-simwarn-meta{display:block;font-size:11px;color:var(--comp-ink-soft);}
.phf-comp-simwarn-q{margin:6px 0 10px;font-size:13.5px;color:var(--comp-ink);line-height:1.5;}

/* ---- V1.5 — bulk upload ("Nhập nhiều bài") preview/result modal -------- */
.phf-comp-bulk-modal{max-width:720px;}
.phf-comp-bulk-table-wrap{margin-top:12px;max-height:320px;overflow:auto;border:1px solid var(--comp-border);border-radius:10px;}
.phf-comp-bulk-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.phf-comp-bulk-table th,.phf-comp-bulk-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--comp-border);vertical-align:top;}
.phf-comp-bulk-table th{background:var(--comp-surface-cream);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--comp-ink-soft);position:sticky;top:0;}
.phf-comp-bulk-status{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;}
.phf-comp-bulk-status-ok{background:#e4f1e6;color:var(--comp-green-deep);}
.phf-comp-bulk-status-dup{background:#fdf1e0;color:#9a6a1f;}
.phf-comp-bulk-status-invalid{background:#fbe6e0;color:#a5573b;}

@media (max-width:1024px){
  .phf-comp-body{grid-template-columns:1fr;}
  .phf-comp-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;}
  .phf-comp-nav-group-wrap{flex:1 1 auto;padding:8px;}
  .phf-comp-nav-group{padding:2px 4px 6px;}
  .phf-comp-nav-group-items{flex-direction:row;flex-wrap:wrap;}
  .phf-comp-nav a{flex:1 1 auto;}
}
@media (max-width:768px){
  .phf-comp-shell{padding:16px 12px 44px;}
  .phf-comp-table thead{display:none;}
  .phf-comp-table,.phf-comp-table tbody,.phf-comp-table tr,.phf-comp-table td{display:block;width:100%;}
  .phf-comp-table tr{border:1px solid var(--comp-border);border-radius:10px;margin-bottom:10px;padding:6px 4px;}
  .phf-comp-table td{border:0;padding:6px 12px;}
  .phf-comp-table td::before{content:attr(data-th);display:block;font-size:11px;text-transform:uppercase;color:var(--comp-ink-soft);}
}
@media (max-width:390px){
  .phf-comp-hero h1{font-size:19px;}
  .phf-comp-actions{flex-direction:column;align-items:stretch;}
}

/* ==========================================================================
   BATCH A1 — VISUAL BASELINE FIX (scoped to .phf-comp, no global bleed)
   1) Logo: phf-training-hub.css has  img[src*="assets/logo/phf-logo"]{
      height:auto!important; max-width:100%!important }  — an !important global
      "logo tamer" that overrode the non-important .phf-comp-top .phf-comp-logo
      rule, letting the flex row stretch the 2048×485 logo to ~1200×280.
      Fix: a 3-class scoped selector + !important on the box metrics.
   2) Scale/width: the module sat in a 1240px centred band while the rest of
      PHF HR (Employee Master, Home) runs near full-width. Widen the shell,
      widen the sidebar, and lift typography ~1–2px to real reading size.
      No colour / border / radius / shadow / IA / route / menu change.
   ========================================================================== */
.phf-comp .phf-comp-top .phf-comp-logo{
  height:34px!important;width:auto!important;max-width:200px!important;
  object-fit:contain;object-position:left center;display:block;flex:0 0 auto;
}

.phf-comp-shell{max-width:1560px;padding:26px clamp(18px,3vw,40px) 64px;}
.phf-comp-body{grid-template-columns:256px minmax(0,1fr);gap:clamp(20px,2.4vw,34px);margin-top:24px;}
.phf-comp{font-size:14px;}

.phf-comp-nav-group{font-size:11.5px;}
.phf-comp-nav a{font-size:14.5px;padding:10px 13px;}
.phf-comp-nav a svg{width:18px;height:18px;}

.phf-comp-top .phf-comp-brand b{font-size:15px;}
.phf-comp-top .phf-comp-brand small{font-size:11.5px;}

.phf-comp-hero{padding:clamp(22px,2.6vw,34px);}
.phf-comp-hero .phf-comp-eyebrow{font-size:11.5px;}
.phf-comp-hero h1{font-size:clamp(24px,2.2vw,32px);}
.phf-comp-hero p{font-size:15px;max-width:70ch;}

.phf-comp-section{margin-top:26px;}
.phf-comp-section > h2{font-size:17px;margin-bottom:14px;}
.phf-comp-section > h2 svg{width:19px;height:19px;}

.phf-comp-card{padding:clamp(20px,2.2vw,30px);}
.phf-comp-card + .phf-comp-card{margin-top:18px;}
.phf-comp-grid{gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.phf-comp-fact{padding:15px 17px;}
.phf-comp-fact b{font-size:12.5px;}
.phf-comp-fact span{font-size:16px;margin-top:5px;}

.phf-comp-level{padding:11px 15px;}
.phf-comp-level .lv-name{font-size:14px;}
.phf-comp-level .lv-score{font-size:13px;}

.phf-comp-note{font-size:13px;padding:12px 14px;}
.phf-comp-empty{padding:52px 22px;}
.phf-comp-empty p{font-size:14px;}

.phf-comp-toolbar select,.phf-comp-field input,.phf-comp-field textarea,.phf-comp-field select{padding:10px 12px;}
.phf-comp-field > label{font-size:13.5px;}
.phf-comp-field .hint{font-size:12px;}

.phf-comp-btn{font-size:14px;padding:11px 20px;}
.phf-comp-review-item{padding:20px;}
.phf-comp-review-item h3{font-size:15px;}
.phf-comp-table{font-size:13.5px;}
.phf-comp-table th,.phf-comp-table td{padding:11px 13px;}
/* keep the existing @media(max-width:1024px) single-column + row-nav rules — unchanged */

/* ==========================================================================
   BATCH A2 — Bảng tin (feed) · thả tim · Bảng xếp hạng ẩn danh · Tiến độ
   tham gia. Scoped to .phf-comp. No colour/token/IA change beyond new
   components. No fabricated data — all runtime values render as "—" / empty.
   ========================================================================== */

/* ---- participation progress (Tổng quan) ---- */
.phf-comp-progress-headline{margin:0 0 12px;font-size:16px;color:var(--comp-ink);}
.phf-comp-progress-headline b{color:var(--comp-green-deep);}
.phf-comp-progress-remain{margin:10px 0 0;font-size:13px;color:var(--comp-ink-soft);}
.phf-comp-participation .phf-comp-prog{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);}
.phf-comp-participation .phf-comp-prog-cell{
  border:1px solid var(--comp-border);border-radius:12px;background:var(--comp-surface-cream);
  padding:12px 14px;text-align:center;
}
.phf-comp-participation .phf-comp-prog-cell span{display:block;font-size:11.5px;color:var(--comp-ink-soft);letter-spacing:.02em;}
.phf-comp-participation .phf-comp-prog-cell b{display:block;margin-top:5px;font-size:19px;color:var(--comp-green-deep);}
.phf-comp-prog-bar{margin-top:12px;height:8px;border-radius:999px;background:var(--comp-surface-ivory);border:1px solid var(--comp-border);overflow:hidden;}
.phf-comp-prog-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--comp-green),var(--comp-gold));}

/* ---- feed — social/recognition surface (warm gold accent) ---- */
.phf-comp-feed{display:flex;flex-direction:column;gap:18px;}
.phf-comp-post{
  border:1px solid var(--comp-border);border-left:3px solid var(--comp-border-strong);
  border-radius:var(--comp-radius);background:var(--comp-surface);
  box-shadow:var(--comp-shadow);padding:clamp(15px,1.8vw,20px);
}
/* 5-point ("giá trị cao") contributions get a subtle gold call-out — the
   server already decided this (current_level_order), the visual just makes
   it legible at a glance; no score/business logic here. */
.phf-comp-post.is-high{
  border-left-color:var(--comp-gold);
  background:linear-gradient(180deg, var(--comp-gold-soft) 0%, var(--comp-surface) 90px);
}
.phf-comp-post-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:var(--comp-ink-soft);}
.phf-comp-post-token{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--comp-ink);}
.phf-comp-post-token svg{width:15px;height:15px;stroke:var(--comp-gold);fill:none;stroke-width:1.6;}
.phf-comp-post-token-alias{display:inline-flex;align-items:center;gap:5px;font-style:italic;}
.phf-comp-post-token-alias svg{width:13px;height:13px;stroke:var(--comp-gold);fill:none;stroke-width:1.6;}
.phf-comp-post-when{margin-left:auto;}
.phf-comp-post-kind{border:1px solid var(--comp-border-strong);border-radius:999px;padding:2px 9px;background:var(--comp-surface-cream);}
.phf-comp-post-kind.is-high{
  display:inline-flex;align-items:center;gap:5px;font-weight:700;color:#8a6a2c;
  border-color:var(--comp-gold);background:var(--comp-gold-soft);
}
.phf-comp-post-kind.is-high svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
.phf-comp-post-body{margin:10px 0 0;}
.phf-comp-post-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--comp-border);}

/* C4.3 — question + answer, always both, content stays visually dominant. */
.phf-comp-qa{display:flex;flex-direction:column;gap:14px;}
.phf-comp-qa-block+.phf-comp-qa-block{padding-top:14px;border-top:1px dashed var(--comp-border);}
.phf-comp-qa-label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--comp-ink-soft);margin-bottom:3px;}
.phf-comp-qa-text{margin:0;font-size:14px;color:var(--comp-ink);line-height:1.6;white-space:pre-wrap;}
.phf-comp-qa-missing{font-style:italic;color:var(--comp-ink-soft);}
/* V1.2 — "Kết quả thực tế / Ghi nhận" (participant) is supporting info, kept
   visually lighter than the primary question/answer pair so cards don't get
   heavier — same block structure/spacing, just a quieter label color and a
   touch smaller text. */
.phf-comp-qa-result .phf-comp-qa-label{color:#8a6a2c;}
.phf-comp-qa-result .phf-comp-qa-text{font-size:13px;color:var(--comp-ink-soft);}
/* V1.3 — "Bằng chứng / Thông tin đối chiếu": same quiet treatment as the
   result block, kept distinct so it doesn't compete visually with Q/A. */
.phf-comp-qa-evidence .phf-comp-qa-label{color:var(--comp-ink-soft);}
.phf-comp-qa-evidence .phf-comp-qa-text{font-size:13px;color:var(--comp-ink-soft);word-break:break-word;}

/* V1.3 — fallback toast (only used if window.phfToast is unavailable) and
   PHF input/confirm modals share the existing .phf-comp-simwarn* look. */
.phf-comp-fallback-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1100;
  background:var(--comp-ink);color:#fff;padding:10px 18px;border-radius:10px;
  font-size:13px;box-shadow:0 8px 20px rgba(0,0,0,.22);max-width:90vw;
}

/* ---- thả tim (reaction) — lightweight social control, not a pill button.
   Business logic unchanged (1 account × 1 submission = max 1 active heart) —
   visual only: quiet by default, a small red heart when active, subtle
   hover, no oversized coloured pill. */
.phf-comp-react{
  display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;
  border:1px solid transparent;background:none;color:var(--comp-ink-soft);
  border-radius:8px;padding:5px 9px;cursor:pointer;
}
.phf-comp-react svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;transition:transform .12s ease;}
.phf-comp-react:hover{background:var(--comp-surface-cream);color:var(--comp-ink);}
.phf-comp-react.is-on{color:#c23a3a;}
.phf-comp-react.is-on svg{fill:currentColor;stroke:currentColor;transform:scale(1.08);}

/* ---- leaderboard "Vị trí của bạn" ---- */
.phf-comp-you{border-left:3px solid var(--comp-gold);}
.phf-comp-you .phf-comp-fact{background:var(--comp-surface-cream);}
.phf-comp-table tr.is-you{background:var(--comp-green-soft);}
.phf-comp-table tr.is-you td{font-weight:600;}

/* rank recognition — subtle, no gaming/medal flash; a small filled circle in
   restrained PHF tones, not loud gold/silver/bronze gradients. */
.phf-comp-rank-badge{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;font-size:12px;font-weight:800;color:#fff;background:var(--comp-ink-soft);
}
.phf-comp-rank-1{background:var(--comp-gold);color:#4a3a17;}
.phf-comp-rank-2{background:#b9c2bb;color:#243027;}
.phf-comp-rank-3{background:#c9a877;color:#3c2f14;}

@media (max-width:560px){
  .phf-comp-participation .phf-comp-prog{grid-template-columns:1fr;}
  .phf-comp-post-when{margin-left:0;width:100%;order:5;}
}

/* ==========================================================================
   BATCH C3 — UI DEV WIRING. Scoped to .phf-comp, no global bleed, no new
   colour tokens — reuses the A1 palette. Honest loading/error/empty states
   only; no visual implies data that isn't really there.
   ========================================================================== */
.phf-comp-loading{
  display:flex;align-items:center;gap:10px;padding:20px 4px;color:var(--comp-ink-soft);font-size:13px;
}
.phf-comp-loading svg{width:18px;height:18px;stroke:var(--comp-gold);fill:none;stroke-width:1.6;animation:phfCompSpin 1.1s linear infinite;}
@keyframes phfCompSpin{to{transform:rotate(360deg);}}

/* quiet skeleton — replaces technical loading sentences in the content area
   while the shell/header/sidebar frame stays stable and already real. */
.phf-comp-skeleton{display:flex;flex-direction:column;gap:10px;padding:4px 0;}
.phf-comp-skeleton-bar{
  height:14px;border-radius:7px;
  background:linear-gradient(90deg, var(--comp-surface-cream) 25%, var(--comp-surface-ivory) 37%, var(--comp-surface-cream) 63%);
  background-size:400% 100%;animation:phfCompShimmer 1.4s ease-in-out infinite;
}
@keyframes phfCompShimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
@media (prefers-reduced-motion: reduce){.phf-comp-skeleton-bar{animation:none;}}

.phf-comp-error{
  display:flex;gap:12px;align-items:flex-start;border:1px solid #e6cccc;background:#fdf4f4;border-radius:var(--comp-radius);
  padding:16px;margin-top:4px;
}
.phf-comp-error svg{width:20px;height:20px;stroke:#a53b3b;fill:none;stroke-width:1.6;flex:none;margin-top:2px;}
.phf-comp-error b{color:#8a3b3b;font-size:13.5px;}
.phf-comp-error p{margin:4px 0 0;font-size:12.5px;color:#8a3b3b;}
.phf-comp-error button{margin-left:auto;flex:none;}

.phf-comp-react .rx-count{font-variant-numeric:tabular-nums;opacity:.85;}
.phf-comp-post-token-alias{font-style:italic;}

.phf-comp-perm-matrix input[type="checkbox"]{width:18px;height:18px;accent-color:var(--comp-green);cursor:pointer;}
.phf-comp-perm-matrix input[type="checkbox"]:disabled{cursor:not-allowed;opacity:.7;}
.phf-comp-perm-matrix thead th{position:sticky;top:0;background:var(--comp-surface);z-index:1;box-shadow:0 1px 0 var(--comp-border);}
.phf-comp-perm-matrix tbody tr:hover{background:var(--comp-surface-cream);}
.phf-comp-perm-matrix td[data-th="Duyệt 2đ"],.phf-comp-perm-matrix td[data-th="Duyệt 5đ"]{text-align:center;}

/* admin inline-edit inputs inside tables */
.phf-comp-table input[type="text"]{
  font:inherit;font-size:12.5px;color:var(--comp-ink);background:var(--comp-surface);
  border:1px solid var(--comp-border-strong);border-radius:7px;padding:6px 8px;width:100%;
}
.phf-comp-toolbar input[type="text"]{
  font:inherit;color:var(--comp-ink);background:var(--comp-surface);
  border:1px solid var(--comp-border-strong);border-radius:9px;padding:9px 11px;
}
.phf-comp-actions input[type="text"]{
  font:inherit;font-size:13px;color:var(--comp-ink);background:var(--comp-surface);
  border:1px solid var(--comp-border-strong);border-radius:9px;padding:9px 11px;
}
.phf-comp-actions select{
  font:inherit;font-size:13px;color:var(--comp-ink);background:var(--comp-surface);
  border:1px solid var(--comp-border-strong);border-radius:9px;padding:9px 11px;
}

/* ---- Chờ duyệt: segmented level switch (Reviewer 5đ), replaces the raw
   <select> that read as a technical control (Round 3 final polish) ---- */
.phf-comp-level-switch{display:inline-flex;border:1px solid var(--comp-border-strong);border-radius:10px;overflow:hidden;}
.phf-comp-level-opt{
  font:inherit;font-size:12.5px;font-weight:600;color:var(--comp-ink-soft);background:var(--comp-surface);
  border:0;border-right:1px solid var(--comp-border-strong);padding:8px 14px;cursor:pointer;
}
.phf-comp-level-switch .phf-comp-level-opt:last-child{border-right:0;}
.phf-comp-level-opt.is-selected{background:var(--comp-green-soft);color:var(--comp-green-deep);}
.phf-comp-level-opt[disabled]{color:var(--comp-border-strong);cursor:not-allowed;background:var(--comp-surface-ivory);}
.phf-comp-level-opt:focus-visible{outline:2px solid var(--comp-gold);outline-offset:-2px;}

/* ==========================================================================
   FINAL MOBILE RESPONSIVE (2026-09-06) — scoped to .phf-comp, presentation only.
   ROOT CAUSE: BATCH A1 re-declared `.phf-comp-body{grid-template-columns:256px
   minmax(0,1fr)}` UNCONDITIONALLY *after* the `@media(max-width:1024px)` single-
   column rule, so equal-specificity source order kept the 2-column desktop grid
   (256px sidebar + content) live on phones — content squeezed / clipped
   ("bó cứng"). These later rules restore the intended collapse and bring the
   in-module nav to a one-hand horizontal strip (Classroom parity). No colour,
   token, route, capability, or business-logic change.
   ========================================================================== */
@media (max-width:1024px){
  .phf-comp-body{grid-template-columns:1fr;gap:16px;}
  .phf-comp-nav{position:static;flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  .phf-comp-nav-group-wrap{flex:0 0 auto;padding:8px;}
  .phf-comp-nav-group-items{flex-direction:row;flex-wrap:nowrap;}
  .phf-comp-nav a{flex:0 0 auto;white-space:nowrap;}
}
@media (max-width:412px){
  .phf-comp-shell{padding-left:12px;padding-right:12px;}
  .phf-comp-participation .phf-comp-prog{grid-template-columns:1fr;}
  .phf-comp-grid,.phf-comp-rules-summary{grid-template-columns:1fr;}
  .phf-comp-simwarn-backdrop{padding:10px;}
  .phf-comp-simwarn{max-height:calc(100vh - 20px);overflow-y:auto;}
}

/* ==========================================================================
   FINAL MOBILE NAV UX (2026-09-06) — Classroom-style Competition drawer.
   Replaces the ≤1024px horizontal nav strip with a left slide-in drawer opened
   by a hamburger in .phf-comp-top. Groups (Tham gia / Xét duyệt / Quản trị) and
   every capability-gated item from menuModel() are unchanged — this is nav
   presentation only. Desktop nav unchanged. No V1.6 business-logic change.
   ========================================================================== */
.phf-comp-mobile-menu,.phf-comp-mobile-backdrop,.phf-comp-nav-mobilehead{display:none;}
@media (max-width:1024px){
  .phf-comp-mobile-menu{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;height:40px;min-width:40px;padding:0;border:1px solid var(--comp-border-strong);border-radius:11px;background:var(--comp-surface);cursor:pointer;order:-1;}
  .phf-comp-mobile-menu span{display:block;width:17px;height:2px;border-radius:2px;background:var(--comp-ink);}

  /* body no longer reserves a sidebar column; nav becomes the drawer */
  .phf-comp-body{display:block;}
  .phf-comp-nav{position:fixed;top:0;left:0;bottom:0;z-index:6200;width:min(86vw,320px);height:100dvh;
    margin:0;flex-direction:column;flex-wrap:nowrap;gap:10px;overflow-x:hidden;overflow-y:auto;
    padding:12px 12px 20px;background:var(--comp-surface);border-right:1px solid var(--comp-border-strong);
    box-shadow:14px 0 40px rgba(36,48,39,.22);
    transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility .2s ease;}
  .phf-comp.is-mnav-open .phf-comp-nav{transform:none;visibility:visible;}
  .phf-comp.is-mnav-open{overflow:hidden;}
  .phf-comp-mobile-backdrop{display:block;position:fixed;inset:0;z-index:6100;width:100%;height:100%;padding:0;border:0;
    background:rgba(20,30,24,.44);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;}
  .phf-comp.is-mnav-open .phf-comp-mobile-backdrop{opacity:1;visibility:visible;pointer-events:auto;}

  .phf-comp-nav-mobilehead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--comp-border);}
  .phf-comp-nav-hubback{display:flex;align-items:center;gap:10px;border:1px solid var(--comp-border-strong);background:var(--comp-surface-cream);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--comp-green-deep);text-align:left;}
  .phf-comp-nav-hubback>span:first-child{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--comp-green-soft);flex:0 0 auto;}
  .phf-comp-nav-hubback strong{display:block;font-size:12px;}
  .phf-comp-nav-hubback small{display:block;margin-top:2px;color:var(--comp-ink-soft);font-size:9.5px;}
  .phf-comp-nav-close{width:36px;height:36px;min-width:36px;border:0;border-radius:50%;background:var(--comp-surface-cream);color:var(--comp-ink);font-size:19px;cursor:pointer;flex:0 0 auto;}

  /* groups back to a clean vertical list inside the drawer */
  .phf-comp-nav-group-wrap{flex:0 0 auto;padding:8px;}
  .phf-comp-nav-group-items{flex-direction:column;flex-wrap:nowrap;}
  .phf-comp-nav a{flex:0 0 auto;white-space:normal;}
}