/*
 * The 2027 look for workspaces at id (look.css is the shared part).
 * Workspaces (4.11.2026): workspaces/* (index, show, general, people, roles, products, create) and the product catalog (products).
 * One session owns this sheet; other areas have their own (components/look-sheets).
 *
 * This sheet loads on every page of id, so each rule is held to a class or id only these pages draw (wl-…, #projects,
 * #people, #own, #built-in, #levels, #domains, #color, .product-card on the two product pages).
 * The states here:
 *   - black: the page's one dark panel (the workspace at a glance on its Projects page, the catalog's lead), the main
 *     action, a product's tile, and the most a role gives (an owner, the built-in Admin) as a pill ringed in ink;
 *   - blue: where you can go - a project's doors, the products in use, links - and what is fine (an address proven, a
 *     subscription active);
 *   - orange: needs you - the subscription in grace, ending or ended (a mark on its figure), an address waiting for its
 *     DNS or not pointing here yet (the badge's glyph), never a tinted box behind words;
 *   - red: destroying only (Remove a person, an address, a role: the kit's danger).
 */

/* ── Shared by these pages ── */
/* The most a role gives (an owner, the built-in Admin): the pill ringed in ink and set in weight - black, but no slab
   repeated down a list. */
.pill.wl-owner { border-color: var(--ink); background: var(--surface); color: var(--ink); font-weight: 600; }
.btn.wl-on-dark { height: 40px; padding-inline: 18px; border-color: var(--lk-on-dark); background: var(--lk-on-dark); color: var(--lk-on-dark-ink); font-weight: 600; }
.btn.wl-on-dark:hover { border-color: var(--lk-on-dark-hover); background: var(--lk-on-dark-hover); color: var(--lk-on-dark-ink); }
:is(.wl-now, .wl-hero) :focus-visible { outline-color: var(--blue-on-black); }

/* A clean table (people, roles): the head a quiet band on the sheet's second tone, the rows roomy, a row that leads
   somewhere lit on hover. On a phone the kit's stack-on-phone takes over; what only explains is left out there. */
.wl-table thead th { padding-block: 10px; border-block: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.wl-table td { padding-block: 14px; }
.wl-table tbody tr:has(a[data-row-link]):hover td { background: var(--surface-2); }
.wl-table tbody tr:has(a[data-row-link]):hover a[data-row-link] { color: var(--accent-ink); }
.wl-table .title { color: var(--ink); font-weight: 600; text-decoration: none; }
.card.flush > .card-head:has(+ .table-wrap > .wl-table) { margin-bottom: var(--s-4); }
@container page (max-width: 608px) {
    .wl-table .wl-hide-phone { display: none; }
    .wl-table tr { padding-block: var(--s-3); }
    :is(.wl-people, .wl-roles) > .card-head { padding-inline: var(--s-4); }
}

/* ── The workspace's Projects (workspaces/show): its one dark panel, then its projects ── */
.wl-now { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) var(--s-6); padding: 28px 32px; border: 1px solid var(--lk-panel-edge); border-radius: 20px; background: var(--lk-panel); color: light-dark(#ffffff, #e8eaee); }
.wl-now-lead { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); min-width: 0; }
.wl-now-who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.wl-now-who > div { min-width: 0; }
.wl-now-who .ws-mark { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12); }
.wl-now-who h2 { overflow: hidden; color: inherit; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; text-overflow: ellipsis; white-space: nowrap; }
.wl-now-who .mono { overflow: hidden; color: #9aa0ab; font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
.wl-now-say { max-width: 24ch; font-size: 1.875rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.wl-now-say b { font-weight: 650; }
/* The figures: hairline cells on the dark - what it is in grey, then the products in use as their icons in light blue
   and their names, or the subscription's state white. The subscription's cell carries an orange bar and dot when it needs its owners. */
.wl-now-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-self: stretch; border: 1px solid var(--lk-panel-line); border-radius: 14px; overflow: hidden; }
.wl-fig { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0 -1px -1px 0; padding: var(--s-4) var(--s-5); border-right: 1px solid var(--lk-panel-line); border-bottom: 1px solid var(--lk-panel-line); color: inherit; text-decoration: none; }
a.wl-fig:hover { background: rgb(255 255 255 / 0.04); color: inherit; }
a.wl-fig::after { content: '→'; position: absolute; top: var(--s-4); right: var(--s-4); color: #6b7280; transition: color 0.15s, transform 0.15s; }
a.wl-fig:hover::after { color: var(--blue-on-black); transform: translateX(2px); }
.wl-fig-label { display: inline-flex; align-items: center; gap: 7px; color: #9aa0ab; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.wl-fig-value { font-size: 2.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.wl-fig-state { margin-top: 6px; font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.wl-fig-note { color: #9aa0ab; font-size: var(--fs-caption); }
.wl-fig-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; color: var(--blue-on-black); }
.wl-fig-icons .product-icon { width: 20px; height: 20px; }
.wl-fig-icons + .wl-fig-note { margin-top: 4px; line-height: 1.45; }
.wl-fig.is-due { box-shadow: inset 3px 0 0 var(--orange); }
.wl-fig.is-due .wl-fig-label::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff7a2f; }
.wl-fig.is-due .wl-fig-note { color: #ffa266; }
@container page (max-width: 900px) { .wl-now { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); } }
@container page (max-width: 608px) {
    .wl-now { gap: var(--s-4); padding: var(--s-4); border-radius: 16px; }
    .wl-now-say { font-size: 1.5rem; }
    .wl-now-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-fig { padding: var(--s-3) var(--s-4); }
    .wl-fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .wl-fig-value { font-size: 1.75rem; }
}

/* The projects: a project's letter a black tile, its name the row's weight, its products as doors - a hairline chip,
   the product's icon blue, lit blue on hover. */
.wl-projects .issue-row { padding-block: var(--s-4); }
.wl-projects .letter-tile { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--lk-sel); color: var(--lk-sel-ink); font-size: 16px; }
.wl-projects .issue-row.has-tile.project-row { grid-template-columns: 40px minmax(160px, 1fr) minmax(0, 2.5fr); }
.wl-projects .title { font-size: 1rem; font-weight: 600; }
.wl-projects .project-door { height: 32px; border-radius: 999px; padding: 0 12px 0 10px; }
.wl-projects .project-door:hover { border-color: var(--blue); color: var(--ink); box-shadow: none; }
@container page (max-width: 720px) {
    .wl-projects .issue-row.has-tile.project-row { grid-template-columns: 40px minmax(0, 1fr); }
    .wl-projects .issue-row.has-tile.project-row > .project-doors { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .wl-projects .issue-row.has-tile.project-row { grid-template-columns: 40px minmax(0, 1fr); }
    .wl-projects .issue-row.has-tile.project-row > .project-doors { grid-column: 1 / -1; }
}

/* ── The list of workspaces (workspaces/index) ── */
.wl-list .ws-list-row { padding-block: 18px; }
.wl-list .title { font-size: 1rem; font-weight: 600; }
.wl-list .ws-mark.ws-lg { width: 44px; height: 44px; border-radius: 12px; }

/* ── People (workspaces/people) ── */
.wl-people .role-note { max-width: 34rem; line-height: 1.45; }

/* ── Roles (workspaces/roles/index and form) ── */
.wl-roles .wl-role-name { display: flex; flex-direction: column; gap: 2px; min-width: 12rem; }
.wl-roles .wl-role-name > .pill { align-self: flex-start; }
.wl-roles .wl-role-gives { color: var(--ink-2); }
.wl-roles .grant-list { margin-top: 0; }
.wl-roles .wl-holders { color: var(--ink-2); }
@container page (max-width: 608px) {
    .wl-roles .wl-table td:nth-child(2) { grid-column: 1 / -1; }
    .wl-roles .wl-table td.wl-holders { color: var(--ink-3); font-size: var(--fs-caption); }
    .wl-roles .wl-table .wl-role-gives { grid-column: 1 / -1; font-size: var(--fs-caption); }
}
/* A level chosen is look.css' switch: a white sheet lifted on the grey well (a column of black "No access" read as
   alarms); the product's tile black, its icon blue. */
#levels .segmented label:has(input:checked) { background: light-dark(#ffffff, #2c313b); color: var(--ink); box-shadow: 0 1px 2px rgb(11 13 18 / 0.12), 0 0 0 1px light-dark(rgb(11 13 18 / 0.06), transparent); font-weight: 600; }
#levels .segmented { border-color: transparent; background: light-dark(#e9ebef, #1a1d24); }
#levels .level-row { padding-block: var(--s-4); }
#levels .level-row > .product-tile:not(.is-plain) { background: var(--lk-sel); color: light-dark(var(--blue-on-black), #8ea8ff); }
#levels .level-later { background: var(--surface-2); }

/* ── Settings as two columns (General, a new workspace, a role's About it, Remove): what it is and why on the left, the
   control on the right; one column on a narrower page. ── */
@container page (min-width: 860px) {
    .card.setting.wl-two .setting-body { grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); gap: 0 var(--s-6); align-items: start; }
    .card.setting.wl-two .setting-body > .setting-head { grid-row: 1 / span 3; }
    .card.setting.wl-two .setting-body > :not(.setting-head) { grid-column: 2; }
    .card.setting.wl-two .setting-body > :not(.setting-head) + :not(.setting-head) { margin-top: var(--s-3); }
}
.card.setting.wl-two h2 { font-size: 1.0625rem; }
.card.setting.wl-two .setting-head p { line-height: 1.55; }
/* The colours: the chosen one ringed in ink and set in weight; a hairline chip each. */
#color .ws-colors label { border-color: var(--line); border-radius: 999px; padding-right: 12px; }
#color .ws-colors label:hover { border-color: var(--line-2); }
#color .ws-colors label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* The addresses: proven is quiet with a blue glyph; waiting for DNS, or not pointing here yet, an outlined badge with
   an orange glyph - the word says it, the orange marks it. Its own tile black. */
#domains .badge-pos, #domains .badge-caut { border-color: var(--line-2); background: var(--surface); color: var(--ink-2); }
#domains .badge-pos > .glyph { color: var(--blue); }
#domains .badge-caut > .glyph { color: var(--orange); }
#domains .issue-row > .product-tile:not(.is-plain) { background: var(--lk-sel); color: light-dark(var(--blue-on-black), #8ea8ff); }
#domains .dns-records { margin-top: var(--s-3); }
#domains .dns-records thead th { background: var(--surface-2); }

/* ── The catalog (products) and a workspace's products (workspaces/products) ── */
/* The catalog's lead: the page's one dark panel - how many there are, what the family is in a sentence and the way to
   buy on the left, three facts as hairline cells on the right. */
.wl-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-5) var(--s-6); margin-bottom: var(--s-5); padding: 36px 40px; border: 1px solid var(--lk-panel-edge); border-radius: 20px; background: var(--lk-panel); color: light-dark(#ffffff, #e8eaee); }
.wl-hero-lead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); min-width: 0; }
.wl-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #9aa0ab; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.wl-hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-on-black); }
.wl-hero-say { max-width: 18ch; color: inherit; font-size: 2.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.wl-hero-lead .btn { margin-top: var(--s-2); }
.wl-hero-facts { display: grid; align-self: stretch; margin: 0; padding: 0; border: 1px solid var(--lk-panel-line); border-radius: 14px; list-style: none; overflow: hidden; }
.wl-hero-facts li { display: flex; flex-direction: column; gap: 3px; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--lk-panel-line); }
.wl-hero-facts li:first-child { border-top: 0; }
.wl-hero-facts b { color: inherit; font-weight: 600; }
.wl-hero-facts span { color: #9aa0ab; font-size: var(--fs-caption); line-height: 1.45; }
@container page (max-width: 900px) { .wl-hero { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); } }
@container page (max-width: 608px) { .wl-hero { padding: var(--s-4); border-radius: 16px; } .wl-hero-say { font-size: 1.75rem; } .wl-hero-facts li { padding: var(--s-3) var(--s-4); } }

/* The filter: who it is for, the chosen one a white sheet lifted on the grey well, as look.css' switches. */
.product-filter .segmented { border-color: transparent; background: light-dark(#e9ebef, #1a1d24); }
.product-filter .segmented a[aria-current] { background: light-dark(#ffffff, #2c313b); box-shadow: 0 1px 2px rgb(11 13 18 / 0.12); font-weight: 600; }

/* The groups and their cards: a group's name larger with its line beside it; each card a white sheet with room, its
   tile black with the icon in light blue, its name the card's weight, who it is for as quiet pills at its foot. One to
   come is dashed, its tile grey. */
.product-group-head h2 { font-size: 1.25rem; letter-spacing: -0.015em; }
.product-group + .product-group { margin-top: var(--s-7); }
.product-grid { gap: var(--s-4); }
.product-card { gap: 6px; padding: var(--s-5); border-radius: 16px; }
.product-card .product-tile { width: 44px; height: 44px; margin-bottom: var(--s-3); border-radius: 12px; background: var(--lk-sel); color: light-dark(var(--blue-on-black), #8ea8ff); }
.product-card-name { font-size: 1.0625rem; letter-spacing: -0.01em; }
.product-card-about { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.5; }
.product-card-for { padding-top: var(--s-3); }
.product-card-for .pill { border-color: var(--line); background: var(--surface-2); color: var(--ink-3); }
.product-card.planned { border-color: var(--line-2); box-shadow: none; }
.product-card.planned .product-tile { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.product-card.planned .product-card-about { color: var(--ink-3); }
/* A workspace's products: the projects it opens in are doors at the card's foot, as on its Projects page. */
.product-projects { justify-content: flex-start; margin-top: auto; padding-top: var(--s-3); }
.product-projects .project-door { border-radius: 999px; }
.product-projects .project-door:hover { border-color: var(--blue); box-shadow: none; }
.absent-products .absent-list li { height: 32px; padding: 0 12px 0 10px; border: 1px dashed var(--line-2); border-radius: 999px; }