/*
 * The 2027 look for projects at id (look.css is the shared part).
 * Projects (4.11.2026): projects/* (create, show, people, invitation, partials).
 * One session owns this sheet; other areas have their own (components/look-sheets).
 */

/*
 * The states, mapped once for these pages (classes pj-* on their own elements, so nothing here reaches another
 * area): a product that is ready is quiet, its glyph blue; one being set up or not sent yet waits - an outline with an
 * orange glyph; one that could not take the project, or whose keys were not written, is broken - red. No green: what
 * went fine is blue. An invitation sent waits (orange), one that never went out is broken (red).
 */
:is(.pj-panel, .pj-sheet, .pj-people, .pj-callout) .badge { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
:is(.pj-panel, .pj-sheet, .pj-people, .pj-callout) .badge-pos .glyph { color: var(--blue); }
:is(.pj-panel, .pj-sheet, .pj-people, .pj-callout) .badge-caut .glyph { color: var(--orange); }
:is(.pj-panel, .pj-sheet, .pj-people, .pj-callout) .badge-neg { border-color: var(--neg-edge); color: var(--neg-ink); }
:is(.pj-sheet, .pj-people, .pj-callout) .badge .glyph-cut { stroke: var(--surface); }
:is(.pj-sheet, .pj-people, .pj-callout) .badge .glyph-cut-fill { fill: var(--surface); }

/* The workspace's subscription, when it is not plain active: a white sheet with an orange bar, never a yellow box. */
.callout-caut.pj-callout { align-items: center; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 12px; background: var(--surface); color: var(--ink-2); }
.callout-caut.pj-callout > .glyph { margin-top: 0; color: var(--orange); }
.callout-caut.pj-callout > .glyph .glyph-cut { stroke: var(--surface); }
.callout-caut.pj-callout > .glyph .glyph-cut-fill { fill: var(--surface); }
.callout-caut.pj-callout a { font-weight: 500; }

/*
 * The dark panels here (a project's General, an invitation) turn their insides dark with color-scheme, which would
 * turn look.css' light-dark() panel tokens too - so their own ground, edge and white button are said per look.
 */
:is(.pj-panel, .invite-card) { --pj-ground: #0b0d12; --pj-edge: #0b0d12; --pj-btn: #ffffff; --pj-btn-ink: #0b0d12; --pj-btn-hover: #e9ebef; --pj-page-scheme: light; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) :is(.pj-panel, .invite-card) { --pj-ground: #161922; --pj-edge: #2a2f3a; --pj-btn: #3a5fe5; --pj-btn-ink: #ffffff; --pj-btn-hover: #4a6cf0; --pj-page-scheme: dark; }
}
:root[data-theme='dark'] :is(.pj-panel, .invite-card) { --pj-ground: #161922; --pj-edge: #2a2f3a; --pj-btn: #3a5fe5; --pj-btn-ink: #ffffff; --pj-btn-hover: #4a6cf0; --pj-page-scheme: dark; }
/* A menu opened from a row of the panel stays a sheet of the page's look, as the top bar's menus do. */
.pj-panel .menu {
    color-scheme: var(--pj-page-scheme);
    --line: light-dark(#e6e8ec, #23272f);
    --line-2: light-dark(#d5d9e0, #323743);
    --surface: light-dark(#ffffff, #13151a);
    --surface-2: light-dark(#f8f9fb, #181b21);
    color: var(--ink);
}

/*
 * A project's General opens with the page's one dark panel: the project, how its products stand in one line, then a
 * row per product. Inside it the look is dark whatever the page's (color-scheme: every light-dark() token turns, so
 * pills, menus, the error box and the chips need no rules of their own); its hairlines are the panel's.
 */
.pj-panel {
    color-scheme: dark;
    --line: var(--lk-panel-line);
    --line-2: #3a3f4a;
    --surface: var(--pj-ground);
    --surface-2: rgb(255 255 255 / 0.035);
    border-color: var(--pj-edge);
    border-radius: 20px;
    background: var(--pj-ground);
    color: var(--ink);
    box-shadow: 0 1px 2px rgb(11 13 18 / 0.08), 0 12px 32px -16px rgb(11 13 18 / 0.35);
}
.pj-panel :focus-visible { outline-color: var(--blue-on-black); }
.pj-panel-head { display: flex; align-items: center; gap: var(--s-4); padding: 28px 32px 0; }
.pj-panel-name { flex: 1; min-width: 0; }
.pj-panel-name h1 { color: #ffffff; font-size: 2rem; line-height: 1.15; overflow-wrap: anywhere; }
.pj-panel-name .sub { margin-top: 4px; color: #9aa0ab; }
.pj-panel-name .sub a { color: var(--blue-on-black); text-decoration: none; }
.pj-panel-name .sub a:hover { text-decoration: underline; }
.pj-panel .letter-tile.project-mark { width: 48px; height: 48px; border-color: #2a2f3a; border-radius: 12px; background: #1a1d24; color: #ffffff; font-size: 20px; }
.pj-on-dark, .pj-on-dark:hover { border-color: var(--pj-btn); background: var(--pj-btn); color: var(--pj-btn-ink); font-weight: 600; }
.pj-on-dark:hover { background: var(--pj-btn-hover); border-color: var(--pj-btn-hover); }

/* How they stand: one large line, then what needs a look by a dot - red broken, orange being set up. */
.pj-say { display: grid; gap: var(--s-2); padding: var(--s-5) 32px var(--s-5); }
.pj-say-lead { color: #ffffff; font-size: 1.5rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.pj-say-lead b { font-weight: 600; }
.pj-say-states { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: #c7cbd3; }
.pj-say-states li { display: flex; align-items: baseline; gap: 8px; }
.pj-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
.pj-say-states .is-broken .pj-dot { background: oklch(66% 0.2 25); }
.pj-say-states .is-waiting .pj-dot { background: var(--orange); }
.pj-say-about { color: #9aa0ab; font-size: var(--fs-caption); }

/* Its rows: the panel's hairlines, the tiles a lifted tone with blue icons, the state a quiet outline. */
.pj-panel .issue-row.has-tile.product-row { padding-inline: 32px; }
.pj-panel .product-row > .product-tile { border: 1px solid #2a2f3a; background: #1a1d24; color: var(--blue-on-black); }
.pj-panel .issue-row:has([data-row-link]):hover { background: rgb(255 255 255 / 0.035); }
.pj-panel .issue-row .title { color: #ffffff; }
.pj-panel .issue-row:has([data-row-link]):hover [data-row-link] { color: var(--blue-on-black); }
.pj-panel .bill-limits { color: #9aa0ab; }
.pj-panel .badge .glyph-cut { stroke: var(--pj-ground); }
.pj-panel .badge .glyph-cut-fill { fill: var(--pj-ground); }
.pj-panel .badge-pos .glyph { color: var(--blue-on-black); }
.pj-panel .products-callout { margin: 0 32px var(--s-4); }
.pj-panel .products-off { padding: var(--s-4) 32px var(--s-5); background: transparent; }
.pj-panel .products-off-head { color: #9aa0ab; font-weight: 500; }
.pj-panel .product-chip { border-color: #2a2f3a; background: transparent; color: #c7cbd3; }
.pj-panel a.product-chip:hover { border-color: var(--blue-on-black); background: rgb(127 160 255 / 0.08); color: #ffffff; }
.pj-panel a.product-chip:hover .product-icon { color: var(--blue-on-black); }

/* Environments: a kind, not a state - production the strong pill (black; in dark a raised tone), the rest quiet. */
.pj-env-kind.is-production { border-color: var(--lk-sel-edge); background: var(--lk-sel); color: var(--lk-sel-ink); font-weight: 600; }
.pj-env-kind.is-production .nav-icon { color: light-dark(var(--blue-on-black), #8ea8ff); }
.pj-env-kind:not(.is-production) { background: transparent; color: var(--ink-3); }
.pj-sheet .card-head h2 { font-size: 1.125rem; }

@container page (max-width: 900px) {
    .pj-panel-head { padding: var(--s-5) var(--s-5) 0; }
    .pj-say { padding-inline: var(--s-5); }
    .pj-panel .issue-row.has-tile.product-row { padding-inline: var(--s-5); }
    .pj-panel .products-callout { margin-inline: var(--s-5); }
    .pj-panel .products-off { padding-inline: var(--s-5); }
}
@container page (max-width: 608px) {
    .pj-panel-head { flex-wrap: wrap; padding: var(--s-4) var(--s-4) 0; }
    .pj-panel-name { flex-basis: calc(100% - 40px - var(--s-4)); }
    .pj-panel-head > .pj-on-dark { margin-left: calc(40px + var(--s-4)); }
    .pj-panel-name h1 { font-size: 1.625rem; }
    .pj-panel .letter-tile.project-mark { width: 40px; height: 40px; font-size: 18px; }
    .pj-say { padding: var(--s-4); }
    .pj-say-lead { font-size: 1.25rem; }
    .pj-panel .issue-row.has-tile.product-row { padding-inline: var(--s-4); }
    .pj-panel .products-callout { margin-inline: var(--s-4); }
    .pj-panel .products-off { padding: var(--s-3) var(--s-4) var(--s-4); }
}

/* A new project: where it goes, the products by their blue icons on a quiet well. */
.pj-create .new-project-products { border: 1px solid var(--line); border-radius: 12px; }
.pj-create .absent-list .product-icon { color: var(--blue); }

/*
 * People: a clean table - small capitals over the columns, roomy rows on hairlines - under the accounts as a meter,
 * blue while there is room, its end orange once every one is taken.
 */
.pj-accounts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.pj-accounts-words { display: grid; flex: 1 1 18rem; gap: var(--s-2); min-width: 0; color: var(--ink-3); font-size: var(--fs-caption); }
.pj-accounts .accounts-line b { font-size: 0.9375rem; }
.pj-meter { display: block; width: 100%; max-width: 28rem; height: 4px; }
.pj-meter-track { fill: var(--line); }
.pj-meter-fill { fill: var(--blue); }
.pj-accounts.is-full .pj-meter-fill { fill: var(--orange); }
.pj-accounts > form { margin-left: auto; }
.pj-accounts-who { margin-left: auto; color: var(--ink-3); font-size: var(--fs-caption); }
.pj-people th { padding-top: 12px; padding-bottom: 10px; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pj-people td { padding-top: 14px; padding-bottom: 14px; }
.pj-people tbody tr:hover { background: var(--surface-2); }
.pj-people .opens-toggle:hover, .pj-people .opens[open] .opens-toggle { color: var(--accent-ink); }
@container page (max-width: 608px) {
    .pj-accounts { padding: var(--s-3) var(--s-4); }
    .pj-people td { padding-top: 4px; padding-bottom: 4px; }
}

/* A role to give (projects/partials/role-choices): the chosen card edged in ink (a raised tone in dark), its dot blue. */
fieldset.pj-choices .check:has(input:checked) { border-color: light-dark(var(--ink), #4a5060); background: light-dark(var(--surface), #262a33); box-shadow: inset 0 0 0 1px light-dark(var(--ink), #4a5060); }
fieldset.pj-choices .check input { accent-color: var(--blue); }
fieldset.pj-choices .check:has(input:focus-visible) { outline-color: var(--blue); }

/*
 * An invitation (projects/invitation, also seen before signing in): the guest card's one dark panel - the workspace's
 * mark, the project large, the role - then who sent it, for whom and until when as plain facts, the action under it.
 */
.guest .card:has(.invite-card) { max-width: 440px; }
.invite-card { color-scheme: dark; --line: var(--lk-panel-line); border: 1px solid var(--pj-edge); border-radius: 16px; background: var(--pj-ground); color: #c7cbd3; box-shadow: 0 12px 32px -18px rgb(11 13 18 / 0.5); }
.invite-card .invite-what { gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); }
.invite-card .invite-name { gap: 2px; }
.invite-card .invite-name span { color: #9aa0ab; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.invite-card .invite-name b { color: #ffffff; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; }
.invite-card .ws-mark.ws-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.invite-card .pill { align-self: flex-start; border-color: #3a3f4a; background: transparent; color: #ffffff; }
.invite-card .invite-words { padding: 0 var(--s-5) var(--s-4); border-top: 0; background: transparent; color: #c7cbd3; font-size: 0.875rem; }
.invite-card .invite-words b { color: #ffffff; }
.invite-facts { display: grid; margin: 0; border-top: 1px solid var(--lk-panel-line); }
.invite-facts > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-3); padding: 10px var(--s-5); border-top: 1px solid var(--lk-panel-line); font-size: var(--fs-caption); }
.invite-facts > div:first-child { border-top: 0; }
.invite-facts dt { color: #9aa0ab; }
.invite-facts dd { margin: 0; color: #ffffff; overflow-wrap: anywhere; }
.invite-facts dd span { color: #9aa0ab; }
.invite-card.is-closed { opacity: 0.9; }
.invite-card.is-closed .invite-what { padding-bottom: var(--s-5); }
/* Joined already: the look's blue, never green. */
.guest .card:has(.invite-card) .callout-pos { border-color: var(--blue-soft); background: var(--accent-wash); color: var(--accent-ink); }
.guest .card:has(.invite-card) .callout-pos .glyph-cut { stroke: var(--accent-wash); }
.guest .card:has(.invite-card) .callout-caut { border: 1px solid var(--line); border-left: 3px solid var(--orange); background: var(--surface); color: var(--ink-2); }
.guest .card:has(.invite-card) .callout-caut > .glyph { color: var(--orange); }
.guest .card:has(.invite-card) .invite-join + .muted, .invite-join .muted { color: var(--ink-3); }
.guest .card:has(.invite-card) form > .btn-primary, .guest .card:has(.invite-card) > .stack > .btn-primary { width: 100%; justify-content: center; height: 44px; font-weight: 600; }
@media (max-width: 420px) {
    .invite-card .invite-what { flex-wrap: wrap; padding: var(--s-4); }
    .invite-card .invite-words { padding-inline: var(--s-4); }
    .invite-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-inline: var(--s-4); }
}