/*
 * The console's tenant page (screens/admin/tenants/show, trial, people):
 * who they are at the top, their plan in full beneath it — the trial's
 * days, the seats, the plan they asked for — the plans to activate side by
 * side in a sheet, and their people, added one at a time.
 *
 * Its own file for the reason the others are: shell.css is long enough that
 * a new class name in it is a collision waiting to happen. Everything here
 * is `xc-tn`.
 */

/* ── the page ───────────────────────────────────────────────────────── */

.xc-tn{padding:8px 24px 28px;display:flex;flex-direction:column;gap:16px}
.xc-tn__cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.xc-tn__col{display:flex;flex-direction:column;gap:16px;min-inline-size:0}

/* ── who they are ───────────────────────────────────────────────────── */

.xc-tn__hero{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:16px}
/* The tier's colour, washed across the top: the plan is the first thing
   anybody on this page is asked about. */
.xc-tn__hero::before{content:"";position:absolute;inset:0 0 auto 0;block-size:110px;background:linear-gradient(115deg,rgba(var(--tint),.16),rgba(var(--tint),.04) 55%,transparent);pointer-events:none}
.xc-tn__top{position:relative;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.xc-tn__mono{flex:none;display:grid;place-items:center;inline-size:58px;block-size:58px;border-radius:18px;background:linear-gradient(140deg,rgb(var(--tint)),rgba(var(--tint),.68));color:#FFFFFF;font-family:Poppins,'IBM Plex Sans Arabic',sans-serif;font-weight:600;font-size:24px;box-shadow:0 12px 26px -14px rgba(var(--tint),.9)}
.xc-tn__who{flex:1;min-inline-size:240px;display:flex;flex-direction:column;gap:8px}
.xc-tn__nameline{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.xc-tn__name{margin:0;font-family:Poppins,'IBM Plex Sans Arabic',sans-serif;font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-0.01em;unicode-bidi:plaintext}
.xc-tn__standing{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:rgb(var(--st));background:rgba(var(--st),.13);border-radius:20px;padding:4px 10px}
.xc-tn__chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.xc-tn__chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:rgba(var(--ink),.62);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:3px 10px 3px 8px}
.xc-tn__chip svg{color:rgba(var(--ink),.45)}
.xc-tn__slug{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(var(--ink),.5);overflow-wrap:anywhere}
.xc-tn__acts{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.xc-tn__facts{position:relative;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.xc-tn__fact{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:11px 13px;min-inline-size:0}
.xc-tn__fact > span:last-child{display:flex;flex-direction:column;gap:3px;min-inline-size:0}
.xc-tn__facticon{flex:none;display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:11px;background:rgba(var(--ft),.12);color:rgb(var(--ft))}
.xc-tn__fact dd{margin:0;font-size:13.5px;overflow-wrap:anywhere}
.xc-tn__note{position:relative;margin:0;font-size:13.2px;line-height:1.6;color:rgba(var(--ink),.62);background:var(--surface-2);border-radius:12px;padding:11px 13px;text-wrap:pretty}
/* The test switch: a workspace whose figures are not the platform's. */
.xc-tn__test{position:relative;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding-block-start:12px;border-block-start:1px dashed var(--line)}
.xc-tn__testhint{font-size:12.5px;line-height:1.5;color:rgba(var(--ink),.55)}
.xc-tn__said{position:relative;margin:0;font-size:13px;border-radius:10px;padding:9px 11px;color:var(--green);background:rgba(0,168,134,.1)}
.xc-tn__said[role="alert"]{color:rgb(214,69,69);background:rgba(214,69,69,.08)}

/* ── the plan ───────────────────────────────────────────────────────── */

.xc-tn__plan{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;scroll-margin-block-start:16px}
.xc-tn__planmain{padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-inline-size:0}
.xc-tn__planhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xc-tn__planname{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.xc-tn__planname strong{font-family:Poppins,'IBM Plex Sans Arabic',sans-serif;font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-0.02em;color:rgb(var(--tint))}
.xc-tn__price{font-family:'JetBrains Mono',monospace;font-size:16px}
.xc-tn__per{font-size:13px;color:rgba(var(--ink),.5)}
.xc-tn__state{margin:0;font-size:14px;line-height:1.55;color:rgba(var(--ink),.72);text-wrap:pretty}
.xc-tn__state strong{color:var(--text)}

.xc-tn__meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 18px}
.xc-tn__meter{display:flex;flex-direction:column;gap:7px;min-inline-size:0}
.xc-tn__meterhead{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:rgba(var(--ink),.62)}
.xc-tn__bar{block-size:8px;border-radius:8px;background:rgba(var(--ink),.08);overflow:hidden}
.xc-tn__bar > span{display:block;block-size:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(var(--tint),.7),rgb(var(--tint)))}
.xc-tn__bar[data-full] > span{background:var(--amber)}

.xc-tn__planacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block-start:14px;border-block-start:1px solid var(--line)}

/* The plan they asked for: the one decision waiting on this page. */
.xc-tn__asked{padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;background:linear-gradient(160deg,rgba(232,163,61,.16),rgba(232,163,61,.04));border-inline-start:1px solid var(--line)}
.xc-tn__asked p{margin:0;font-size:13.3px;line-height:1.55;color:rgba(var(--ink),.66);text-wrap:pretty}
.xc-tn__asked strong{font-family:Poppins,'IBM Plex Sans Arabic',sans-serif;font-size:18px;font-weight:600;line-height:1.25}
.xc-tn__askedicon{display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:13px;background:rgba(232,163,61,.2);color:var(--amber)}
.xc-tn__asked--none{background:var(--surface-2)}
.xc-tn__asked--none .xc-tn__askedicon{background:rgba(var(--ink),.07);color:rgba(var(--ink),.45)}

/* ── the plans, side by side (the activate sheet) ───────────────────── */

.xc-tn__tiers{margin:0;padding:0;border:0;min-inline-size:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.xc-tn__tiers > legend{padding:0;margin-block-end:8px}
.xc-tn__tier{position:relative;display:block;cursor:pointer}
.xc-tn__tier > input{position:absolute;opacity:0;pointer-events:none}
.xc-tn__tiercard{position:relative;display:flex;flex-direction:column;gap:10px;block-size:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:16px;padding:16px;background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease}
.xc-tn__tier:hover .xc-tn__tiercard{border-color:rgba(var(--tint),.55)}
.xc-tn__tier > input:checked + .xc-tn__tiercard{border-color:rgb(var(--tint));box-shadow:0 0 0 3px rgba(var(--tint),.16),0 16px 32px -20px rgba(var(--tint),.9)}
.xc-tn__tier > input:focus-visible + .xc-tn__tiercard{outline:2px solid rgb(var(--brand));outline-offset:2px}
.xc-tn__tierhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-inline-end:26px}
.xc-tn__tierhead strong{font-family:Poppins,'IBM Plex Sans Arabic',sans-serif;font-size:16.5px;font-weight:600;color:rgb(var(--tint))}
.xc-tn__pills{display:flex;gap:5px;flex-wrap:wrap}
.xc-tn__pill{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-radius:20px;padding:3px 8px;background:rgba(var(--ink),.07);color:rgba(var(--ink),.62)}
.xc-tn__pill--asked{background:rgba(232,163,61,.18);color:var(--amber)}
.xc-tn__tierprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.xc-tn__tierprice b{font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:500}
.xc-tn__tierprice span{font-size:12.5px;color:rgba(var(--ink),.5)}
.xc-tn__gets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.8px;line-height:1.45;color:rgba(var(--ink),.72)}
.xc-tn__gets li{display:flex;gap:7px;align-items:flex-start}
.xc-tn__gets svg{flex:none;margin-block-start:2px;color:rgb(var(--tint))}
/* The tick in the corner of the plan chosen. */
.xc-tn__tick{position:absolute;inset-block-start:14px;inset-inline-end:14px;display:grid;place-items:center;inline-size:20px;block-size:20px;border-radius:50%;border:1.5px solid var(--line);color:transparent}
.xc-tn__tier > input:checked + .xc-tn__tiercard .xc-tn__tick{border-color:rgb(var(--tint));background:rgb(var(--tint));color:#FFFFFF}

/* ── its people ─────────────────────────────────────────────────────── */

.xc-tn__people{display:flex;flex-direction:column;gap:8px}
.xc-tn__person{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.xc-tn__person > span:nth-child(2){flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:1px}
.xc-tn__personname{font-size:13.6px;font-weight:600;unicode-bidi:plaintext}
.xc-tn__personmail{font-size:12px;color:rgba(var(--ink),.45);overflow-wrap:anywhere}
.xc-tn__role{flex:none;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:rgb(var(--rt));background:rgba(var(--rt),.11);border-radius:20px;padding:4px 9px}
.xc-tn__seatline{display:flex;flex-direction:column;gap:7px}

/* The add-a-person sheet's roles: four chips, one chosen. */
.xc-tn__roles{margin:0;padding:0;border:0;min-inline-size:0;display:flex;flex-wrap:wrap;gap:8px}
.xc-tn__roles > legend{padding:0;margin-block-end:8px}
.xc-tn__rolepick{position:relative;cursor:pointer}
.xc-tn__rolepick > input{position:absolute;opacity:0;pointer-events:none}
.xc-tn__rolepick > span{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;color:rgba(var(--ink),.7);background:var(--surface);transition:border-color .15s ease,background .15s ease}
.xc-tn__rolepick:hover > span{border-color:rgba(var(--tint),.6)}
.xc-tn__rolepick > input:checked + span{border-color:rgb(var(--tint));background:rgba(var(--tint),.12);color:rgb(var(--tint))}
.xc-tn__rolepick > input:focus-visible + span{outline:2px solid rgb(var(--brand));outline-offset:2px}

/* ── its details ────────────────────────────────────────────────────── */

.xc-tn__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px}
.xc-tn__form > .xc-tn__wide{grid-column:1 / -1}

/* Spaced capitals pull Arabic's joined letters apart. */
[dir="rtl"] .xc-tn__standing,[dir="rtl"] .xc-tn__role,[dir="rtl"] .xc-tn__pill{font-family:inherit;font-size:11px;letter-spacing:0;text-transform:none}

/* ── narrower screens ───────────────────────────────────────────────── */

@media (max-width:1080px){
    .xc-tn__cols{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:820px){
    .xc-tn{padding:8px 14px 24px}
    .xc-tn__plan{grid-template-columns:minmax(0,1fr)}
    .xc-tn__asked{border-inline-start:0;border-block-start:1px solid var(--line)}
    .xc-tn__form{grid-template-columns:minmax(0,1fr)}
    .xc-tn__name{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
    .xc-tn__tiercard,.xc-tn__rolepick > span{transition:none}
}