/* Futura Tech — project hub "/", shared print-host chrome, account sections (docs/DESIGN-HUB.md §1, §5).
   Builds on tokens.css + base.css + shop.css; no new colours. Red = the one action per view,
   ink = selection, the skewed red/ink stripe is the only ornament. Logical properties only. */

/* ---------- header nav: 6 sections (≥900); "الرئيسية" hidden until 1180 (the logo links home) ---------- */
.hub-nav { gap: 2px; }
.hub-nav a { padding-inline: 10px; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1179.98px) {
  .hub-nav a[data-nav="home"] { display: none; }
  .hub-header .header-cta { display: none; }
  .hub-header .container { gap: var(--space-2); }
}
/* the tab bar has 5 columns now */
@media (max-width: 899.98px) {
  .tabbar:has(> a:nth-child(5)), .tabbar.has-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabbar a { padding-inline: 2px; text-align: center; }
  .tabbar a span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- hub hero: the question flows straight into its answer ---------- */
.hub-hero { padding-block: 40px 24px; }
@media (min-width: 1100px) { .hub-hero { padding-block: 72px 40px; } }
.hub-hero h1 {
  font-size: clamp(2.125rem, .9rem + 5.2vw, 4.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  margin: 0 0 24px;
}
html[lang="en"] .hub-hero h1 { letter-spacing: -.02em; }
.hub-hero h1 .hub-line { display: block; }
.hub-hero h1 .hub-line + .hub-line { color: var(--c-muted); }

.hub-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub-card {
  position: relative; display: flex; align-items: center; gap: 14px; min-block-size: 76px; padding: 12px 16px;
  background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: var(--radius);
  color: var(--c-text); text-decoration: none; overflow: hidden;
  transition: border-color .15s ease;
}
.hub-card:hover { border-color: var(--c-text); text-decoration: none; }
.hub-card:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.hub-ico {
  flex: none; display: grid; place-items: center; inline-size: 48px; block-size: 48px;
  background: var(--c-invert-bg); color: var(--c-invert-text);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
html[dir="rtl"] .hub-ico { clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.hub-ico svg, .hub-chev, .hub-trust svg, .hub-steps svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.hub-ico svg { inline-size: 26px; block-size: 26px; }
.hub-txt { display: grid; gap: 2px; min-inline-size: 0; flex: 1; }
.hub-txt strong { font-size: var(--fs-2); font-weight: 700; line-height: 1.3; }
.hub-txt > span { color: var(--c-muted); font-size: var(--fs-0); line-height: 1.5; }
.hub-chev { flex: none; inline-size: 22px; block-size: 22px; color: var(--c-muted); }
html[dir="ltr"] .hub-chev { transform: scaleX(-1); }
.hub-card:hover .hub-chev { color: var(--c-text); }
.hub-new {
  display: inline-block; margin-inline-start: 6px; padding: 1px 8px; vertical-align: 2px;
  background: var(--c-primary-soft); color: var(--c-primary); border-radius: var(--radius-sm);
  font-size: var(--fs-0); font-weight: 700; line-height: 1.6;
}
/* hover: the store's skewed stripe grows along the block-end edge */
.hub-card::after {
  content: ""; position: absolute; inset-inline: 16px; inset-block-end: 0; block-size: 6px;
  background: linear-gradient(270deg, var(--brand-red) 0 70%, transparent 70% 76%, var(--c-text) 76%);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  transform: scaleX(0); transform-origin: right;
}
html[dir="ltr"] .hub-card::after { background: linear-gradient(90deg, var(--brand-red) 0 70%, transparent 70% 76%, var(--c-text) 76%); transform-origin: left; }
.hub-card:hover::after, .hub-card:focus-visible::after { transform: none; }
@media (prefers-reduced-motion: no-preference) { .hub-card::after { transition: transform .22s cubic-bezier(.2, .7, .2, 1); } }

@media (min-width: 760px) {
  .hub-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .hub-cards > li { grid-column: span 2; }
  .hub-cards > .hub-c-print, .hub-cards > .hub-c-lab { grid-column: span 3; }
  .hub-card { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; block-size: 100%; min-block-size: 148px; padding: 20px 22px 24px; }
  .hub-c-print .hub-card, .hub-c-lab .hub-card { min-block-size: 176px; }
  .hub-c-print .hub-ico, .hub-c-lab .hub-ico { inline-size: 56px; block-size: 56px; }
  .hub-c-print .hub-ico svg, .hub-c-lab .hub-ico svg { inline-size: 30px; block-size: 30px; }
  .hub-txt { flex: 0 1 auto; gap: 6px; padding-inline-end: 32px; }
  .hub-txt strong { font-size: var(--fs-3); }
  .hub-txt > span { font-size: var(--fs-1); }
  .hub-chev { position: absolute; inset-block-end: 24px; inset-inline-end: 20px; }
}

/* ---------- how it works ---------- */
.hub-how { padding-block: 48px; }
@media (min-width: 1100px) { .hub-how { padding-block: 72px; } }
.hub-how h2 { font-size: var(--fs-4); margin: 0 0 var(--space-4); }
.hub-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); position: relative; }
.hub-steps li { display: flex; gap: var(--space-3); align-items: flex-start; position: relative; }
.hub-steps h3 { font-size: var(--fs-2); margin: 6px 0 4px; }
.hub-steps p { margin: 0; color: var(--c-muted); font-size: var(--fs-1); }
.hub-num {
  --cut: 10px; flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px;
  background: var(--c-invert-bg); color: var(--c-invert-text); font-weight: 800; font-size: var(--fs-2);
  font-variant-numeric: tabular-nums;
}
/* stacked: a connector runs down between the numbers */
.hub-steps li:not(:last-child)::before {
  content: ""; position: absolute; inset-inline-start: 19.25px; inset-block: 48px calc(-1 * var(--space-4) + 8px);
  inline-size: 1.5px; background: var(--c-border);
}
@media (min-width: 760px) {
  .hub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .hub-steps li { flex-direction: column; gap: var(--space-2); }
  /* one row: the connector runs from each number toward the next */
  .hub-steps li:not(:last-child)::before { display: block; inset-block: 19.25px auto; inset-inline: 52px calc(-1 * var(--space-4) + 12px); inline-size: auto; block-size: 1.5px; }
}

/* ---------- trust strip (ink band) ---------- */
.hub-trust { background: var(--c-invert-bg); color: var(--c-invert-text); padding-block: var(--space-4); }
.hub-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.hub-trust li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-1); font-weight: 600; line-height: 1.45; }
.hub-trust svg { flex: none; inline-size: 24px; block-size: 24px; }
@media (min-width: 760px) { .hub-trust ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hub-trust li { align-items: center; } }

/* placeholder section pages (replaced by their owners) */
.hub-soon { padding-block: var(--space-6); max-inline-size: 760px; }
.hub-soon h1 { font-size: var(--fs-5); margin-block-end: var(--space-3); }
.hub-soon p { color: var(--c-muted); font-size: var(--fs-2); }

/* ================================================================ account sections (§5) */
.acct-jump {
  position: sticky; inset-block-start: 69px; z-index: 5; margin-inline: calc(-1 * var(--space-3)); padding: 8px var(--space-3);
  background: color-mix(in srgb, var(--c-bg) 96%, transparent); border-block-end: 1px solid var(--c-border);
}
.acct-jump ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.acct-jump ul::-webkit-scrollbar { display: none; }
.acct-jump a {
  display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 14px; white-space: nowrap;
  border: 1.5px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-surface);
  color: var(--c-text); font-size: var(--fs-1); font-weight: 600; text-decoration: none;
}
.acct-jump a:hover { border-color: var(--c-text); text-decoration: none; }
.acct-jump a[aria-current="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
@media (min-width: 720px) { .acct-jump { margin-inline: 0; padding-inline: 0; } }
.acct-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.acct-jump { min-inline-size: 0; }
@media (min-width: 960px) { .acct-layout .acct-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.acct-sec { scroll-margin-block-start: 140px; }
.acct-sec:focus { outline: none; }
#acct-h-orders { scroll-margin-block-start: 140px; }
.acct-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.acct-empty { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-3); border: 1.5px dashed var(--c-border); border-radius: var(--radius); }
.acct-empty p { margin: 0; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-actions .btn { min-block-size: 44px; }
/* account lists: quiet ink actions; red stays for "ادفع / اشترك" when a site is about to stop */
.acct-actions .btn-ghost:not(.acct-danger), body[data-page="account"] form .btn-ghost[type="submit"] { color: var(--c-text); --_bd: var(--c-border); }
.acct-actions .btn-ghost:not(.acct-danger):hover, body[data-page="account"] form .btn-ghost[type="submit"]:hover { --_bg: var(--c-surface-2); --_bd: var(--c-text); }
.acct-danger { color: var(--c-danger); }
.acct-danger:hover { background: var(--c-danger-soft); }
.acct-count {
  display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 5px; margin-inline-start: 6px;
  border-radius: 10px; background: var(--brand-red); color: #fff; font-size: var(--fs-0); font-weight: 700; line-height: 1;
}

/* projects: cards 1 / 2 / 3 cols */
.acct-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.acct-proj { display: grid; gap: 8px; padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); align-content: start; }
.acct-proj .acct-actions .btn-ghost { padding-inline: 12px; }
/* phones: thumbnail beside the name instead of a full-width picture */
@media (max-width: 559.98px) {
  .acct-proj { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-3); }
  .acct-proj > :not(.acct-proj-thumb) { grid-column: 2; }
  .acct-proj > .acct-actions, .acct-proj > .error { grid-column: 1 / -1; }
  .acct-proj-thumb { grid-row: 1 / span 2; align-self: start; }
}
.acct-proj-thumb { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text); }
.acct-proj-thumb .b { fill: var(--c-invert-bg); }
.acct-proj-thumb .p { fill: var(--c-surface); stroke: var(--c-border); stroke-width: 1.5; }
.acct-proj-thumb .w { fill: none; stroke-width: 2; stroke-linecap: round; }
.acct-proj h3 { font-size: var(--fs-2); margin: 0; overflow-wrap: anywhere; }
.acct-proj .acct-order-meta { gap: 4px 10px; }
.acct-rename { display: flex; gap: 6px; flex-wrap: wrap; }
.acct-rename input { flex: 1 1 140px; min-inline-size: 0; min-block-size: 44px; padding: 8px 12px; border: 1.5px solid var(--c-input-border, var(--c-border)); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); font: inherit; }

/* state chips (text always carries the meaning; colour only reinforces it) */
.hub-chip { display: inline-flex; align-items: center; min-block-size: 26px; padding: 2px 10px; border-radius: var(--radius-sm); font-size: var(--fs-0); font-weight: 700; background: var(--c-surface-2); color: var(--c-text); white-space: nowrap; }
.hub-chip.is-ok { background: var(--c-success-soft); color: var(--c-success); }
.hub-chip.is-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.hub-chip.is-bad { background: var(--c-danger-soft); color: var(--c-danger); }
.hub-chip.is-ink { background: var(--c-accent); color: var(--c-bg); }
.acct-site-url { font-weight: 600; overflow-wrap: anywhere; }