/* admin pages. Built on the N tokens (public/n/tokens.css) and the shared parts (public/n/parts.css, public/css/app.css).
   Only what the shared parts do not already have. Same rules: pt units, concentric corners, no line dividers,
   hover is a step of fill, red only for destructive, green for done, layered dark tones in dark mode, 44 or more to press.
   Classes here are ad-. */

/* ============================== the overview ============================== */
/* the numbers: two by two on a phone, with the one that leads (the platform's fee this month) across both columns above
   them; once there is room, one row of equal columns, however many numbers there are */
.ad-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-stats > .ad-lead { grid-column: 1 / -1; }
@media (width >= 900px) {
  .ad-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ad-stats > .ad-lead { grid-column: auto; }
}

/* a studio in the list: its address quiet beside its name, its numbers free to wrap. Its states sit under them on a phone
   and at the row's end on a laptop */
.x-rows .x-row.ad-studio { padding-block: var(--s3); }
.ad-slug { color: var(--grey); font-weight: 400; }
.ad-studio .a-row-main > .x-small { white-space: normal; }
.ad-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.ad-studio .ad-tags { margin-top: var(--s1); }
@media (width >= 900px) {
  .ad-studio .a-row-main { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); }
  .ad-studio .a-row-main > :first-child { grid-area: 1 / 1; }
  .ad-studio .a-row-main > .x-small { grid-area: 2 / 1; }
  .ad-studio .ad-tags { grid-area: 1 / 2 / 3 / 3; align-self: center; margin-top: 0; }
}

/* the overview's one action: under the thumb on a phone; from 900 on the title's line at the frame's right edge, as every
   admin and dashboard page's action is (app.css, main.a-app) */

/* the top of an admin page, from 900: the title first, under the top row; a note (sample data) follows it, as on the
   dashboard, so a title is in the same place on every page */
@media (width >= 900px) { .ad-head-top > .a-stack.tight { order: -1; } }

/* ============================== a studio's owners ============================== */
/* an owner: a card of words (radius and inset 24), its two actions at its foot */
.ad-owner { display: grid; gap: var(--s3); min-width: 0; padding: var(--i-card); border-radius: var(--r-card); background: var(--fill-0); }
.ad-who { display: grid; gap: calc(2 * var(--pt)); min-width: 0; }
.ad-who > :first-child { font-weight: 500; overflow-wrap: anywhere; }
.ad-who > .x-small { color: var(--grey); overflow-wrap: anywhere; }
.ad-acts { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.ad-acts.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-acts.two .x-btn { --btn-px: var(--s3); width: 100%; min-width: 0; }
.ad-acts.two .x-btn > span { overflow: hidden; text-overflow: ellipsis; }
.ad-owner .ad-acts { margin-top: var(--s1); }

/* sign-in details to hand over: each value under its label, whole to select; the password at reading size */
.ad-details { display: grid; gap: var(--s4); min-width: 0; }
.ad-done { display: flex; align-items: center; gap: var(--s2); color: var(--ok); font-weight: 500; }
.ad-done svg { flex: none; width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.ad-pairs { display: grid; gap: var(--s3); margin: 0; }
.ad-pairs > div { display: grid; gap: calc(2 * var(--pt)); min-width: 0; }
.ad-pairs dt { font-size: var(--t-s); line-height: var(--l-s); color: var(--grey); }
.ad-pairs dd { margin: 0; }
.ad-pairs .ad-secret { font-size: var(--t-b); line-height: var(--l-b); font-weight: 500; font-variant-numeric: tabular-nums; }

/* what went wrong, said in a line of its own */
.ad-wrong { color: var(--danger); font-weight: 500; }
.x-rows > .ad-in-rows { padding: 0 var(--rpl) var(--s2); }
.ad-gap { margin-top: var(--s2); }

/* ============================== a new studio's address ============================== */
/* the field is the box: the site's own address in front, then what is typed. When room is short the prefix gives way
   from its start, so its end and the slash stay beside the words */
.ad-prefix { display: flex; align-items: center; min-width: 0; min-height: var(--c-lg); padding: 0 calc(14 * var(--pt)); border-radius: var(--r-item);
  background: var(--fill-1); cursor: text; transition: background-color 140ms, box-shadow 140ms;
  contain: inline-size; }   /* its width comes from the form, never from how long the site's address is */
@media (hover: hover) { .ad-prefix:hover { background: var(--fill-2); } }
.ad-prefix:focus-within { background: transparent; box-shadow: 0 0 0 2px var(--ring); }
.x-field.is-wrong .ad-prefix { background: var(--danger-bg); box-shadow: none; }
.ad-prefix > span { flex: none; font-size: max(16px, var(--t-b)); color: var(--grey); white-space: nowrap; }
.ad-prefix > .ad-host { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; direction: rtl; }
.x-field .ad-prefix input { flex: 1 0 calc(120 * var(--pt)); width: auto; min-width: 0; height: var(--c-lg); padding: 0; border-radius: 0; background: none; box-shadow: none; }
.x-field .ad-prefix input:hover, .x-field .ad-prefix input:focus, .x-field.is-wrong .ad-prefix input { background: none; box-shadow: none; }

/* the one squircle list for this file */
@supports (corner-shape: superellipse(1.8)) {
  .ad-owner, .ad-prefix { corner-shape: superellipse(var(--sq, 1.8)); }
}