/* crowd2's own sheet, loaded after ee.css (senior2's 04:31 cure for the ee.css tail: two crowds never append to the same lines).
   MOCK 17 REPORT DETAIL, stage two: the failure card and the "Check results" table of a one-site report that has ended (run.html r17). */

/* the failure section: the mock draws the card alone — its count is the strip's, the site is the page's H1 */
section.attention:has(.r17-fail) { margin: 0 0 calc(28px / var(--f2-z)); padding: 0; border: 0; border-radius: 0; background: none; }
section.attention:has(.r17-fail) > .row.head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section.attention:has(.r17-fail) .al-group { margin: 0; padding: 0; border: 0; background: none; }
section.attention:has(.r17-fail) .al-group-head { display: none; }
section.attention:has(.r17-fail) .alerts { display: grid; gap: calc(20px / var(--f2-z)); }

.r17-fail { position: relative; padding: calc(26px / var(--f2-z)) calc(24px / var(--f2-z)) calc(24px / var(--f2-z)); border: 1px solid var(--f2-line); border-top: 3px solid #d9534f;
  border-radius: 12px; background: #fff; color: var(--t-ink); }
.r17-fail.nr { border-top-color: #e3a33b; }
.r17-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: calc(13px / var(--f2-z)); color: var(--t-body); }
.r17-kick b { font-weight: 400; color: var(--t-body); }
.r17-kick .pill, section.grid-card:has(> .r17-ghead) .wp { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 4px; font-size: calc(11.5px / var(--f2-z)); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.r17-kick .pill::before { display: none; }
.r17-kick .pill.red, section.grid-card:has(> .r17-ghead) .wp.fail { background: #fde8e8; color: #b42318; }
.r17-kick .pill.amber, section.grid-card:has(> .r17-ghead) .wp.look { background: #fdf3e2; color: #925400; }
.r17-kick .pill.nr, section.grid-card:has(> .r17-ghead) .wp.nr { background: #eef1f5; color: #4b5563; }
section.grid-card:has(> .r17-ghead) .wp.pass { background: #e5f4ee; color: #167a63; }
.r17-verdict { margin: calc(14px / var(--f2-z)) 0 0; padding: 0 0 calc(18px / var(--f2-z)); border-bottom: 1px solid var(--f2-line); font-size: calc(26px / var(--f2-z)); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--t-ink); }
.r17-note { margin: calc(12px / var(--f2-z)) 0 0; font-size: calc(14px / var(--f2-z)); color: var(--t-body); }
.r17-eo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14px / var(--f2-z)) calc(24px / var(--f2-z)); margin: 0; padding: calc(18px / var(--f2-z)) 0; border-bottom: 1px solid var(--f2-line); }
.r17-eo dt { margin: 0 0 calc(8px / var(--f2-z)); font-size: calc(10.5px / var(--f2-z)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-body); }
.r17-eo dd { margin: 0; font-size: calc(14.5px / var(--f2-z)); line-height: 1.45; color: var(--t-ink); overflow-wrap: anywhere; }
.r17-meta { margin: calc(20px / var(--f2-z)) 0 calc(16px / var(--f2-z)); font-size: calc(13.5px / var(--f2-z)); color: var(--t-body); }
.r17-ev { margin: 0; border: 1px solid #c9d6e2; border-radius: 6px; overflow: hidden; background: #f4f7fa; }
.r17-ev figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 0 calc(15px / var(--f2-z)); min-height: calc(38px / var(--f2-z)); align-items: center; background: #17364f; color: #fff; font-size: calc(11px / var(--f2-z)); }
.r17-ev a { display: block; } .r17-ev img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; max-height: calc(365px / var(--f2-z)); object-fit: cover; object-position: top; background: #f4f7fa; }
.r17-ev .al-stamp { margin: 0; padding: 6px 15px; }
.r17-fail .al-earlier { margin: calc(10px / var(--f2-z)) 0 0; }
.r17-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: calc(18px / var(--f2-z)) 0 0; }
.r17-acts .btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 calc(18px / var(--f2-z)); border: 1px solid var(--line-3); border-radius: 6px; background: #fff;
  color: var(--t-ink); font-size: calc(14px / var(--f2-z)); font-weight: 600; text-decoration: none; }
.r17-acts .btn.primary { border-color: #1667b8; background: #1667b8; color: #fff; }
.r17-acts .btn svg { width: 16px; height: 16px; flex: none; }
.r17-acts .tools:empty { display: none; } .r17-acts .tools { margin-left: auto; }

/* "Check results": the one site's table, a word pill in each cell, the device names as the heads */
section.grid-card:has(> .r17-ghead) { padding: calc(30px / var(--f2-z)) calc(24px / var(--f2-z)) calc(24px / var(--f2-z)); border: 1px solid var(--f2-line); border-radius: 12px; background: #fff; }
.r17-ghead { display: block; margin: 0 0 calc(20px / var(--f2-z)); }
.r17-ghead h2 { margin: 0; font-size: calc(20px / var(--f2-z)); font-weight: 700; letter-spacing: -.01em; color: var(--t-ink); }
section.grid-card:has(> .r17-ghead) .r17-gsub { margin: calc(8px / var(--f2-z)) 0 0; font-size: calc(12.5px / var(--f2-z)); color: var(--t-body); }
section.grid-card:has(> .r17-ghead) .tablewrap { overflow-x: auto; border: 0; }
section.grid-card:has(> .r17-ghead) table.grid { width: 100%; border-collapse: collapse; table-layout: auto; }
section.grid-card:has(> .r17-ghead) table.grid th, section.grid-card:has(> .r17-ghead) table.grid td { vertical-align: middle; }
section.grid-card:has(> .r17-ghead) table.grid thead th { min-width: 0; height: calc(44px / var(--f2-z)); padding: 0 12px; background: #f3f5f8; border: 0; font-size: calc(12.5px / var(--f2-z)); font-weight: 500; color: var(--t-body); text-align: center; position: static; }
section.grid-card:has(> .r17-ghead) table.grid thead th.rowhead { text-align: left; }
section.grid-card:has(> .r17-ghead) table.grid thead th .dev { font: inherit; color: inherit; }
section.grid-card:has(> .r17-ghead) table.grid tbody th.rowhead { padding: 0 12px; height: calc(53px / var(--f2-z)); border: 0; border-bottom: 1px solid var(--f2-line); background: #fff; font-size: calc(14px / var(--f2-z)); font-weight: 500; color: var(--t-ink); text-align: left; position: static; }
section.grid-card:has(> .r17-ghead) table.grid td.cell { padding: 0 12px; border: 0; border-bottom: 1px solid var(--f2-line); background: #fff; text-align: center; }
/* the word pill of each cell, drawn from the cell's own state (_cell.html unchanged: its marks, titles and aria-labels as every report's) */
section.grid-card:has(> .r17-ghead) table.grid td.cell > :not(.none) { display: none; }
section.grid-card:has(> .r17-ghead) table.grid td.cell::after { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 4px; font-size: calc(11.5px / var(--f2-z)); font-weight: 600; line-height: 1.2; white-space: nowrap; }
section.grid-card:has(> .r17-ghead) table.grid td.cell:has(> .none)::after { display: none; }
section.grid-card:has(> .r17-ghead) table.grid td.cell.pass::after { content: "Passed"; background: #e5f4ee; color: #167a63; }
section.grid-card:has(> .r17-ghead) table.grid td.cell.fail::after { content: "Failed"; background: #fde8e8; color: #b42318; }
section.grid-card:has(> .r17-ghead) table.grid td.cell.look::after { content: "Needs a look"; background: #fdf3e2; color: #925400; }
section.grid-card:has(> .r17-ghead) table.grid td.cell.blocked::after, section.grid-card:has(> .r17-ghead) table.grid td.cell.skip::after, section.grid-card:has(> .r17-ghead) table.grid td.cell.unsure::after,
section.grid-card:has(> .r17-ghead) table.grid td.cell:has(> .ring)::after { content: "Not run"; background: #eef1f5; color: #4b5563; }
section.grid-card:has(> .r17-ghead) table.grid td.cell .none { color: var(--t-body); }
section.grid-card:has(> .r17-ghead) table.grid tr.fold th { padding: calc(26px / var(--f2-z)) 0 calc(14px / var(--f2-z)); border: 0; border-bottom: 1px solid var(--f2-line); background: #fff; text-align: left; }
section.grid-card:has(> .r17-ghead) #fold-absent { min-width: 0 !important; padding: 0; border: 0; background: none; box-shadow: none; font-size: calc(13px / var(--f2-z)); font-weight: 600; color: var(--t-ink); text-decoration: none; }
section.grid-card:has(> .r17-ghead) #fold-absent::before { content: "+"; display: inline-block; width: 1.1em; margin-right: 6px; font-weight: 400; color: var(--t-body); }
section.grid-card:has(> .r17-ghead) #fold-absent[aria-expanded="true"]::before { content: "−"; }
section.grid-card:has(> .r17-ghead):has(table.grid) .legend { display: none; }   /* the table's words are its pills; the by-check list keeps its legend */
@media (max-width: 560px) {
  .r17-eo { grid-template-columns: 1fr; }
  .r17-fail { padding: 20px 16px; } section.grid-card:has(> .r17-ghead) { padding: 22px 16px 18px; }
  .r17-verdict { font-size: 21px; }
  section.grid-card:has(> .r17-ghead) table.grid thead th, section.grid-card:has(> .r17-ghead) table.grid tbody th.rowhead, section.grid-card:has(> .r17-ghead) table.grid td.cell { padding: 0 6px; }
  section.grid-card:has(> .r17-ghead) table.grid tbody th.rowhead { font-size: 13px; }
}
/* one column (under 1024): the mock's order — the failure card, then the rail (by device, incomplete checks), then the table — 20 apart */
@media (max-width: 1023px) {
  .r17-body { row-gap: calc(20px / var(--f2-z)); }
  .r17-body > .r17-rail { order: 1; }
  section.attention:has(.r17-fail) { margin: 0; }
  .r17-body + section.grid-card:has(> .r17-ghead), .r17-body ~ section.grid-card:has(> .r17-ghead) { margin-top: calc(20px / var(--f2-z)); }
}
/* MOCK 17's strip on a phone (stage one's mend): three cells of a number and its word, the report's time the row under them — the
   word never broken inside (it broke "passe d", "Deskt op" at 344); a cell's sub-line goes, the rail and the table say the devices */
@media (max-width: 560px) {
  main .card.rep-sum .tiles.kit > .tile[data-tile] { grid-template-columns: minmax(0, 1fr); padding: calc(16px / var(--f2-z)) calc(12px / var(--f2-z)); min-width: 0; }
  main .card.rep-sum .tiles.kit > .tile[data-tile] > b { grid-template-columns: minmax(0, 1fr); width: auto; }
  main .card.rep-sum .tiles.kit > .tile[data-tile] small { display: block; margin-top: 4px; white-space: nowrap; overflow-wrap: normal; }
  main .card.rep-sum .tiles.kit > .tile[data-tile] > span { display: none; }
}
/* senior2's 05:04 RED on 17 (demo /runs/369: the screenshot window past the card's right edge at 1440 · 768 · 344): in the report's left
   column the card of today's shape (a report of several sites, more than three devices, one still running) lays its picture OVER its
   words, never beside them in an auto column the column cannot hold; a phone's window shorter so it fits the card — never clipped */
.r17-body details.alert > .al-body:has(> .al-pic.dw), .r17-body details.alert.lead > .al-body:has(> .al-pic.dw) { grid-template-columns: minmax(0, 1fr); }   /* the weight of ee.css's details.alert.lead rule (≥ 721 px) and one more: senior2 05:59, it won at 768 · 1440 */
.r17-body details.alert > .al-body > .al-pic.dw { min-width: 0; max-width: 100%; }
.r17-body details.alert > .al-body > .al-pic.dw .wl-win { max-width: 100%; }
@media (max-width: 560px) { .r17-body details.alert.lead > .al-body > .al-pic.dw .wl-win.desktop, .r17-body .al-pic.dw .wl-win.desktop { --dw-h: 128px; } }   /* the lead card's 180 (ee.css) is capped by 100vw − 64 alone, never the card's own padding: 291 in a 276 card at 344 */

/* MOCK 14 BILLING (v2), senior's 06:15 ruling (b): the mock's look on today's real plans — the plan card (name and state, what it holds,
   the price beside the month's site-runs, the notes in the mock's amber box, Manage subscription + View usage), the other plans as the
   mock's tinted Free card, "Billing questions?" at the foot. No estimate, no illustrative words until the owner sets pricing. */
.settings-col > .b14-card { padding: calc(30px / var(--f2-z)) calc(26px / var(--f2-z)) calc(30px / var(--f2-z)); border: 1px solid var(--f2-line); border-radius: 12px; background: #fff; }
.b14-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.b14-head h2 { margin: 0; font-size: calc(19px / var(--f2-z)); font-weight: 600; letter-spacing: -.01em; color: var(--t-ink); }
.b14-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.b14-chips .pill { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 4px; font-size: calc(11.5px / var(--f2-z)); font-weight: 600; background: #e8f1fb; color: #1667b8; }
.b14-chips .pill::before { display: none; }
.b14-chips .pill.on { background: #e5f4ee; color: #167a63; } .b14-chips .pill.red { background: #fde8e8; color: #b42318; } .b14-chips .pill.amber { background: #fdf3e2; color: #925400; }
.b14-sub { margin: calc(18px / var(--f2-z)) 0 0; padding: 0 0 calc(22px / var(--f2-z)); border-bottom: 1px solid var(--f2-line); font-size: calc(14px / var(--f2-z)); line-height: 1.55; color: var(--t-body); }
.b14-figs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding: calc(26px / var(--f2-z)) 0 calc(24px / var(--f2-z)); border-bottom: 1px solid var(--f2-line); }
.b14-figs > div + div { padding-left: calc(24px / var(--f2-z)); border-left: 1px solid var(--f2-line); }
.b14-lab { margin: 0; font-size: calc(12.5px / var(--f2-z)); color: var(--t-body); }
.b14-figs > div:first-child .b14-lab { margin-bottom: calc(10px / var(--f2-z)); }
.b14-big { margin: 0; font-size: calc(44px / var(--f2-z)); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.b14-figs > div + div .b14-big { font-size: calc(29px / var(--f2-z)); margin-bottom: calc(14px / var(--f2-z)); margin-top: calc(6px / var(--f2-z)); }
.b14-unit { margin-left: 10px; font-size: calc(13px / var(--f2-z)); font-weight: 400; letter-spacing: 0; color: var(--t-body); }
.b14-word { font-size: calc(28px / var(--f2-z)); }
.b14-note { margin: calc(20px / var(--f2-z)) 0 0; padding: calc(13px / var(--f2-z)) calc(16px / var(--f2-z)); border: 1px solid #f1dcae; border-radius: 6px; background: #fdf8ee; font-size: calc(12.5px / var(--f2-z)); line-height: 1.55; color: #5c4a1f; }
.b14-note p { margin: 0; color: inherit; background: none; border: 0; padding: 0; } .b14-note p + p { margin-top: 8px; }
.b14-card .free-one { margin: calc(20px / var(--f2-z)) 0 0; }
.b14-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: calc(22px / var(--f2-z)) 0 0; }
.b14-acts form { margin: 0; }
.b14-acts button, .b14-acts .button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 calc(18px / var(--f2-z)); border-radius: 6px; font-size: calc(14px / var(--f2-z)); font-weight: 600; text-decoration: none; }
.b14-acts form button { border: 1px solid #1667b8; background: #1667b8; color: #fff; } .b14-acts form button::after { content: " →"; white-space: pre; }
.b14-acts .button { border: 1px solid var(--line-3); background: #fff; color: var(--t-ink); }
.b14-foot { margin: calc(18px / var(--f2-z)) 0 0; font-size: calc(12.5px / var(--f2-z)); color: var(--t-body); }

/* the other plans: the mock's tinted Free card, one a plan — its name as the eyebrow, its price the line, what it holds under it, its action right */
.settings-col > .free-strip, main .settings-col > .plans.bill-ladder > .plan { margin: calc(20px / var(--f2-z)) 0 0; padding: calc(28px / var(--f2-z)) calc(26px / var(--f2-z)); border: 1px solid #d9e4ee; border-radius: 12px; background: #f2f6fa; box-shadow: none; }
.free-strip .b14-eyebrow, main .settings-col > .plans.bill-ladder > .plan h3 { margin: 0; font-size: calc(10.5px / var(--f2-z)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1667b8; }
.free-strip .b14-line { margin: calc(8px / var(--f2-z)) 0 0; font-size: calc(22px / var(--f2-z)); font-weight: 700; letter-spacing: -.015em; color: var(--t-ink); }
.free-strip p.muted { margin: calc(14px / var(--f2-z)) 0 0; font-size: calc(14px / var(--f2-z)); color: var(--t-body); }
main .settings-col > .plans.bill-ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
main .settings-col > .plans.bill-ladder > .plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name act" "price act" "list act"; column-gap: 20px; align-items: start; text-align: left; min-height: 0; }
main .settings-col > .plans.bill-ladder > .plan.featured { border-color: #9cc0e6; background: #eaf2fb; box-shadow: none; }
main .settings-col > .plans.bill-ladder > .plan > * { grid-column: auto; grid-row: auto; justify-self: start; }
main .settings-col > .plans.bill-ladder > .plan h3 { grid-area: name; }
main .settings-col > .plans.bill-ladder > .plan .price { grid-area: price; margin: calc(8px / var(--f2-z)) 0 0; font-size: calc(22px / var(--f2-z)); font-weight: 700; letter-spacing: -.015em; color: var(--t-ink); }
main .settings-col > .plans.bill-ladder > .plan .price span { font-size: calc(14px / var(--f2-z)); font-weight: 400; color: var(--t-body); }
main .settings-col > .plans.bill-ladder > .plan ul { grid-area: list; display: flex; flex-wrap: wrap; gap: 0; margin: calc(14px / var(--f2-z)) 0 0; padding: 0; list-style: none; font-size: calc(14px / var(--f2-z)); color: var(--t-body); }
main .settings-col > .plans.bill-ladder > .plan ul li { margin: 0; padding: 0; } main .settings-col > .plans.bill-ladder > .plan ul li::before { display: none; } main .settings-col > .plans.bill-ladder > .plan ul li:not(:last-child)::after { content: "·"; display: inline; margin: 0 6px; color: var(--t-body); }   /* the "·" clings to the part before it, never a line's first glyph (DC-C5-3) */
main .settings-col > .plans.bill-ladder > .plan .pl-act, main .settings-col > .plans.bill-ladder > .plan > .button { grid-area: act; align-self: center; justify-self: end; margin: 0; }
main .settings-col > .plans.bill-ladder > .plan .pl-act form { margin: 0; }
main .settings-col > .plans.bill-ladder > .plan .pl-act button, main .settings-col > .plans.bill-ladder > .plan .pl-act .button, main .settings-col > .plans.bill-ladder > .plan > .button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 calc(16px / var(--f2-z)); border: 1px solid var(--line-3); border-radius: 6px; background: #fff; color: var(--t-ink); font-size: calc(13.5px / var(--f2-z)); font-weight: 600; text-decoration: none; white-space: nowrap; }
main .settings-col > .plans.bill-ladder > .plan .pl-act button.primary, main .settings-col > .plans.bill-ladder > .plan .pl-act .button.primary { border-color: #1667b8; background: #1667b8; color: #fff; }
.b14-ask { margin: calc(20px / var(--f2-z)) 0 0; padding: calc(30px / var(--f2-z)) 0 0; border-top: 1px solid var(--f2-line); }
.b14-ask h2 { margin: 0; font-size: calc(20px / var(--f2-z)); font-weight: 700; letter-spacing: -.01em; color: var(--t-ink); }
.b14-ask p.muted { margin: calc(14px / var(--f2-z)) 0 0; font-size: calc(14px / var(--f2-z)); color: var(--t-body); }
.b14-ask .b14-mail { display: inline-block; margin-top: calc(18px / var(--f2-z)); font-size: calc(14.5px / var(--f2-z)); font-weight: 600; color: #1667b8; text-decoration: none; }
@media (max-width: 560px) {
  .b14-figs { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .b14-figs > div + div { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--f2-line); }
  .b14-big { font-size: 36px; }
  main .settings-col > .plans.bill-ladder > .plan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "list" "act"; }
  main .settings-col > .plans.bill-ladder > .plan .pl-act, main .settings-col > .plans.bill-ladder > .plan > .button { margin-top: 16px; justify-self: start; }
}
/* 06 BROWSERS (empty), design-critic 06:31: the tail — the last step's line to the footer's rule 79 / 57 against the mock's 61 / 38 (the
   steps block sits in a page that ends on the footer's own gap): the empty page gives the difference back */
/* weighed against ee.css's body:has(nav#main-nav) main > :last-child:not(script) { margin-bottom: 0 } (1,1,4: it held ee.css's own −20 at 0) */
body:has(nav#main-nav) main > .browsers-page:has(> .bp-steps) { margin-bottom: calc(-18px / var(--f2-z)); }
@media (max-width: 560px) { body:has(nav#main-nav) main > .browsers-page:has(> .bp-steps) { margin-bottom: -19px; } }

/* 10 CLIENT REPORTS, design-critic 06:31: (a) the tail under the Showcase fold, 53 / 43 / 37 against the mock's 76 / 64 / 52 — the fold
   is the page's last card and main details.m11-guide holds its margin at 0; (b) the phones' cards 31 apart where the mock draws 16 —
   each card's own 16 beside the grid's 16 gap */
main details.m11-guide.s10-show { margin-bottom: calc(22px / var(--f2-z)); }
@media (max-width: 820px) { main details.m11-guide.s10-show { margin-bottom: 20px; } }
@media (max-width: 560px) { main details.m11-guide.s10-show { margin-bottom: 14px; } }
@media (max-width: 720px) { main .settings-col .s10-grid > .card.set9 { margin-bottom: 0; } }   /* over .settings-col .card.set9 (0,3,0), which held ee.css's own fix at 16 */

/* 17 on every one-site report (design-critic 06:35, #538): THE STRIP in the mock's shape — each tile a big number over its word ("Failed",
   "Not run", "Passed": the tiles still count CHECKS, the glossary's one unit), its sub-line gone at every width (the rail says the devices,
   the table or the list the rest); the report's time stays the fourth cell */
main .card.rep-sum.r17-sum .tiles.kit > .tile[data-tile] > span { display: none; }
main .card.rep-sum.r17-sum .tiles.kit > .tile[data-tile] > b { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8px / var(--f2-z)); font-size: calc(30px / var(--f2-z)); line-height: 1; }
main .card.rep-sum.r17-sum .tiles.kit > .tile[data-tile] > b small, main .card.rep-sum.r17-sum .tiles.kit > .tile[data-tile] > b a small { display: block; margin: 0; font-size: calc(12.5px / var(--f2-z)); font-weight: 400; color: var(--t-body); white-space: nowrap; }
main .card.rep-sum.r17-sum .tiles.kit > .tile[data-tile] > b small::first-letter { text-transform: uppercase; }
main .card.rep-sum.r17-sum .tiles.kit > .tile[data-tile] > b a { display: flex; flex-direction: column; gap: calc(8px / var(--f2-z)); color: inherit; text-decoration: none; }
/* 17's pills (stage one): the mock's grey "Finished" and the state's tone never drew — ee.css's .pill:not(.green):not(.red):not(.amber)
   :not(.look):not(.writes):not(.on):not(.busy) { background: none } weighs 0,8,0; an id-weighted :not() lifts these over it */
main .rep-head .r17-pills .pill:not(#r17-pill) { background: #eef1f5; color: var(--t-ink); }
main .rep-head .r17-pills .pill.r17-state.t-amber:not(#r17-pill) { background: #fdf3e2; color: #925400; }
main .rep-head .r17-pills .pill.r17-state.t-red:not(#r17-pill) { background: #fde8e8; color: #b42318; }
main .rep-head .r17-pills .pill.r17-state.t-green:not(#r17-pill) { background: #e5f4ee; color: #167a63; }

/* 15 AUDIT LOG, design-critic 06:35: (10) the gaps — sub→search −4, search→tabs −12, Older→note −5, the note→footer rule +20 (+15 at the
   phones); (7) at a phone the title, its line and the UTC chip, then the section select (audit.html places it, pick=False); (1) at a phone
   each entry its own card, as the mock draws them — the action large, the date line, the target a link with its arrow */
.settings-col:has(> .a15-find) > .set-head { margin-bottom: calc(22px / var(--f2-z)); }
main .settings-col > .a15-find { margin-bottom: calc(12px / var(--f2-z)); }
main .settings-col > .a15-older + .a15-foot { margin-top: calc(15px / var(--f2-z)); }
main .settings-col > .a15-foot { margin-bottom: calc(20px / var(--f2-z)); }
@media (max-width: 560px) {
  .settings-col:has(> .a15-find) > .set-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  main .settings-col > .a15-find { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  main .settings-col > .a15-find .a15-filters > summary.button { width: 100%; justify-content: center; }
  main .settings-col > .a15-foot { margin-bottom: 15px; }
  main .settings-col > .a15-card { border: 0; border-radius: 0; background: none; overflow: visible; }
  main .settings-col .a15-table tbody tr { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "what what" "when by" "tgt tgt"; padding: 20px; border: 1px solid var(--f2-line); border-radius: 12px; background: #fff; row-gap: 14px; }
  main .settings-col .a15-table td { min-width: 0; overflow-wrap: anywhere; }   /* a long address in the date line never widens the page (the look at 320: 329 wide) */
  main .settings-col .a15-table tbody tr + tr { margin-top: -1px; }
  main .settings-col .a15-table td.what { font-size: 18px; font-weight: 700; color: var(--t-ink); }
  main .settings-col .a15-table td.tgt a::after { content: " →"; }
}

/* MOCK 18 EVIDENCE REPLAY (v2; crowd2's look): the breadcrumb, the check's name as the head with its sentence under it and the state's
   pill at the right; the device tabs as words ("Desktop · Failed"); the "Evidence replay" card — the frame, Previous · Play · "Frame N of
   M", the line, three frames; the rail — "Steps" (numbered circles, "Failed here" on the failing one) and "Why it failed" (the judge's words
   open); "Back to report" at the right. ee.report.css loads after this sheet: every rule here carries main article.film-page.film-page. */
main article.film-page.film-page { max-width: calc(1136px / var(--f2-z)); margin-inline: auto; }   /* the mock's column, 152 → 1287 at 1440 */
main article.film-page.film-page .film-back { margin: 0 0 calc(22px / var(--f2-z)); font-size: calc(13px / var(--f2-z)); }
main article.film-page.film-page .film-back a { padding: 0; color: var(--t-body); text-decoration: none; } main article.film-page.film-page .film-back a > span[aria-hidden] { display: none; }
main article.film-page.film-page .film-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h1 pill" "say pill" "note note"; column-gap: 20px; margin: 0 0 calc(30px / var(--f2-z)); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
main article.film-page.film-page .film-head h1 { grid-area: h1; margin: 0; font-size: calc(32px / var(--f2-z)); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--t-ink); }
main article.film-page.film-page .film-head .film-state { grid-area: pill; align-self: start; justify-self: end; margin: calc(22px / var(--f2-z)) 0 0; padding: 3px 7px; border-radius: 4px; font-size: calc(11.5px / var(--f2-z)); font-weight: 600; background: #eef1f5; color: var(--t-ink); white-space: nowrap; }
main article.film-page.film-page.is-red .film-head .film-state { background: #fde8e8; color: #b42318; } main article.film-page.film-page.is-green .film-head .film-state { background: #e5f4ee; color: #167a63; } main article.film-page.film-page.is-amber .film-head .film-state { background: #fdf3e2; color: #925400; }
main article.film-page.film-page .film-head .film-state .film-dot { display: none; }
main article.film-page.film-page .film-say-top { grid-area: say; display: block; }
main article.film-page.film-page .film-say-top .film-sentence { margin: calc(10px / var(--f2-z)) 0 0; font-size: calc(15px / var(--f2-z)); font-weight: 400; color: var(--t-body); }
main article.film-page.film-page .film-say-top .film-why { display: none; }   /* the judge's words are the rail's "Why it failed" */
main article.film-page.film-page .film-head .film-note { grid-area: note; }
main article.film-page.film-page .film-seen { display: block; margin: 0 0 calc(25px / var(--f2-z)); border-bottom: 1px solid var(--f2-line); }
main article.film-page.film-page .film-seen-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main article.film-page.film-page .film-tabs, main article.film-page.film-page .film-tabs.many { display: flex; flex-wrap: wrap; gap: 0 calc(24px / var(--f2-z)); width: auto; border: 0; border-radius: 0; overflow: visible; background: none; }
main article.film-page.film-page .film-tabs a, main article.film-page.film-page .film-tabs.many a { position: relative; flex: none; gap: 0; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--t-ink); font-size: calc(13.5px / var(--f2-z)); font-weight: 600; }
main article.film-page.film-page .film-tabs a b { font-weight: inherit; } main article.film-page.film-page .film-tabs a .dev-glyph, main article.film-page.film-page .film-tabs a .film-dot { display: none; }
main article.film-page.film-page .film-tabs a .film-tab-state { color: inherit; } main article.film-page.film-page .film-tabs a .film-tab-state::before { content: " · "; white-space: pre; }
main article.film-page.film-page .film-tabs a[aria-current] { color: var(--t-blue); background: none; } main article.film-page.film-page .film-tabs a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--t-blue); }
main article.film-page.film-page .film-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(335px / var(--f2-z)); gap: calc(26px / var(--f2-z)); align-items: start; }
main article.film-page.film-page .film-stage { width: auto; padding: calc(21px / var(--f2-z)); border: 1px solid var(--f2-line); border-radius: 12px; background: #fff; }
main article.film-page.film-page .film-fhead { margin: 0 0 calc(18px / var(--f2-z)); min-height: 0; }
main article.film-page.film-page .film-fh-h { margin: 0; font-size: calc(20px / var(--f2-z)); font-weight: 700; letter-spacing: -.01em; color: var(--t-ink); }
main article.film-page.film-page #film-copy { display: none; }   /* the mock draws Full size alone; the address names the picture (#pN) */
main article.film-page.film-page .film-full { font-size: calc(13px / var(--f2-z)); color: var(--t-blue); text-decoration: none; }
main article.film-page.film-page .film, main article.film-page.film-page .film.is-stopped { border: 1px solid #c9d6e2; border-radius: 8px; background: #e9eef4; box-shadow: none; outline: 0; overflow: hidden; }   /* the mock's thin frame; the verdict is the pill's and the step's to say */
main article.film-page.film-page .film-controls { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev play count" "line line line"; gap: calc(22px / var(--f2-z)) 12px; margin: calc(22px / var(--f2-z)) 0 0; }
main article.film-page.film-page .film-keys { display: contents; }
main article.film-page.film-page #film-prev { grid-area: prev; width: auto; min-width: 0; height: 44px; padding: 0 calc(12px / var(--f2-z)); border: 1px solid var(--line-3); border-radius: 6px; background: #fff; color: var(--t-ink); font-size: calc(14px / var(--f2-z)); font-weight: 600; display: inline-flex; place-items: center; }
main article.film-page.film-page #film-prev svg { display: none; }
main article.film-page.film-page #film-play { grid-area: play; justify-self: center; width: auto; min-width: 0; height: 44px; padding: 0 calc(18px / var(--f2-z)); border: 1px solid #1667b8; border-radius: 6px; background: #1667b8; color: #fff; font-size: calc(14px / var(--f2-z)); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
main article.film-page.film-page #film-play svg { width: 15px; height: 15px; }
main article.film-page.film-page #film-play .t-pause, main article.film-page.film-page.is-playing #film-play .t-play { display: none; } main article.film-page.film-page.is-playing #film-play .t-pause { display: inline; }
main article.film-page.film-page #film-next { display: none; }   /* the mock draws Previous and Play; → and the frames below step forward */
main article.film-page.film-page .film-count { grid-area: count; justify-self: end; font: calc(13.5px / var(--f2-z)) / 1 var(--sans); color: var(--t-body); }
main article.film-page.film-page .film-line { grid-area: line; min-height: 0; }
main article.film-page.film-page .film-line input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; min-height: 44px; margin: -20px 0; padding: 0; background: transparent; }   /* a 44 px hit area, the mock's 3 px line drawn on its track */
main article.film-page.film-page .film-line input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #1667b8 var(--pct, 100%), #dbe3eb var(--pct, 100%)); }
main article.film-page.film-page .film-line input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #1667b8 var(--pct, 100%), #dbe3eb var(--pct, 100%)); }
main article.film-page.film-page .film-line input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #1667b8; border: 0; }
main article.film-page.film-page .film-line input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #1667b8; border: 0; }
main article.film-page.film-page .film-ticks { display: none; }
main article.film-page.film-page .film-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(11px / var(--f2-z)); margin: calc(26px / var(--f2-z)) 0 0; }
main article.film-page.film-page .film-thumb { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; padding: calc(10px / var(--f2-z)); border: 1px solid var(--line-3); border-radius: 6px; background: #fff; color: var(--t-body); font-size: calc(12.5px / var(--f2-z)); text-decoration: none; }
main article.film-page.film-page .film-thumb[hidden] { display: none; } main article.film-page.film-page .film-thumb.is-now { border-color: #1667b8; }
main article.film-page.film-page .film-thumb img { display: block; width: 100%; height: calc(36px / var(--f2-z)); margin: 0 0 calc(12px / var(--f2-z)); object-fit: cover; object-position: top; border-radius: 4px; background: #eef1f5; }
main article.film-page.film-page .film-side { display: flex; flex-direction: column; gap: calc(20px / var(--f2-z)); max-width: none; }
main article.film-page.film-page .film-side > h2 { order: 1; margin: 0 0 calc(-20px / var(--f2-z)); padding: calc(26px / var(--f2-z)) calc(26px / var(--f2-z)) calc(12px / var(--f2-z)); border: 1px solid var(--f2-line); border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; font: 700 calc(20px / var(--f2-z)) / 1.2 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--t-ink); }
main article.film-page.film-page .film-side > .film-steps { order: 2; margin: 0; padding: calc(8px / var(--f2-z)) calc(16px / var(--f2-z)) calc(26px / var(--f2-z)); border: 1px solid var(--f2-line); border-top: 0; border-radius: 0 0 12px 12px; background: #fff; box-shadow: none; max-height: none; overflow: visible; }
main article.film-page.film-page .film-steps li + li { border-top: 0; margin-top: calc(8px / var(--f2-z)); }
main article.film-page.film-page .film-step { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: calc(12px / var(--f2-z)) 10px; border-radius: 8px; background: none; box-shadow: none; font-size: calc(14.5px / var(--f2-z)); color: var(--t-ink); }
main article.film-page.film-page .film-step.is-now { background: none; box-shadow: none; } main article.film-page.film-page .film-step.fail { background: #fdf1ef; }
main article.film-page.film-page .film-step .film-step-name { font-weight: 400; }
main article.film-page.film-page .film-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8f1fb; color: #1667b8; font: 600 13px / 1 var(--sans); }
main article.film-page.film-page .film-mark, main article.film-page.film-page .film-second { display: none; }
main article.film-page.film-page .film-here { grid-column: 2; justify-self: start; padding: 2px 6px; border-radius: 4px; background: #fde8e8; color: #b42318; font-size: calc(11.5px / var(--f2-z)); font-weight: 600; }
main article.film-page.film-page .film-say-side { order: 3; display: block; margin: 0; padding: calc(26px / var(--f2-z)); border: 1px solid var(--f2-line); border-radius: 12px; background: #fff; }
main article.film-page.film-page .film-say-side.is-red { border-color: #f3d9d2; background: #fdf8f6; }
main article.film-page.film-page .film-say-side h2 { margin: 0 0 calc(14px / var(--f2-z)); font: 700 calc(20px / var(--f2-z)) / 1.2 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--t-ink); }
main article.film-page.film-page .film-say-side p { margin: 0; font-size: calc(14.5px / var(--f2-z)); line-height: 1.5; color: var(--t-ink); }
main article.film-page.film-page .film-actions { order: 4; }
main article.film-page.film-page .film-foot { justify-content: flex-end; margin: calc(25px / var(--f2-z)) 0 0; }
main article.film-page.film-page .film-foot .button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 calc(18px / var(--f2-z)); border: 1px solid var(--line-3); border-radius: 6px; background: #fff; color: var(--t-ink); font-size: calc(14px / var(--f2-z)); font-weight: 600; }
@media (max-width: 859px) {
  main article.film-page.film-page .film-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  main article.film-page.film-page .film-side { position: static; }
}
@media (max-width: 560px) {
  main article.film-page.film-page .film-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "say" "pill" "note"; }
  main article.film-page.film-page .film-head .film-state { justify-self: start; margin-top: 8px; }
  main article.film-page.film-page .film-foot .button { width: 100%; justify-content: center; }
}

/* MOCK 19 NOTIFICATIONS (v2; crowd2's look): the page in the mock's 896 column; the head (title, its line, "Alert settings" right); the
   unread line; the tabs over the card (All · Unread n · Needs attention, underlined); the card "Earlier updates"; each report's row in the
   mock's drawing — the round badge, the site bold, what the report was in its tone, its answers as plain words, the time right, "View report
   #N →" right under it. The rows are _notes.html's (the bell's too): this page alone re-dresses them. */
main .n19 { max-width: calc(896px / var(--f2-z)); margin: 0 auto; }
main .n19 .n19-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 calc(22px / var(--f2-z)); }
main .n19 .n19-head h1 { margin: 0; font-size: var(--fs-title); line-height: 1.1; font-weight: 800; letter-spacing: var(--ls-title); color: var(--t-ink); }
main .n19 .n19-head .pg-sub { margin: calc(12px / var(--f2-z)) 0 0; font-size: calc(15px / var(--f2-z)); color: var(--t-body); }
main .n19 .n19-set { display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(10px / var(--f2-z)); padding: 0 calc(18px / var(--f2-z)); border: 1px solid var(--line-3); border-radius: 6px; background: #fff; color: var(--t-ink); font-size: calc(14px / var(--f2-z)); font-weight: 600; text-decoration: none; white-space: nowrap; }
main .n19 .n19-line { margin: 0 0 calc(18px / var(--f2-z)); font-size: calc(13.5px / var(--f2-z)); color: var(--t-body); }
main .n19 .n19-line .notes-read-all { margin-left: 8px; font-size: inherit; }
main .n19 .notes-seg.n19-tabs { display: flex; gap: calc(24px / var(--f2-z)); margin: 0 0 calc(25px / var(--f2-z)); padding: 0; border: 0; border-bottom: 1px solid var(--f2-line); border-radius: 0; background: none; box-shadow: none; width: auto; }
main .n19 .notes-seg.n19-tabs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--t-ink); font-size: calc(13.5px / var(--f2-z)); font-weight: 500; }
main .n19 .notes-seg.n19-tabs button[aria-pressed="true"] { color: var(--t-blue); font-weight: 600; background: none; }
main .n19 .notes-seg.n19-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--t-blue); }
main .n19 .n19-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; background: #eef1f5; color: var(--t-body); font-size: 11px; font-weight: 600; }
main .n19 .notes-card { margin: 0; padding: calc(32px / var(--f2-z)) calc(26px / var(--f2-z)) calc(14px / var(--f2-z)); border: 1px solid var(--f2-line); border-radius: 12px; background: #fff; }
main .n19 .n19-h { margin: 0 0 calc(18px / var(--f2-z)); font-size: calc(20px / var(--f2-z)); font-weight: 700; letter-spacing: -.01em; color: var(--t-ink); }
main .n19 ol.notes { margin: 0; padding: 0; list-style: none; border: 0; }   /* no rule between the card's title and its first row */
main .n19 ol.notes > li { margin: 0; padding: 0; border: 0; background: none; } main .n19 ol.notes > li + li { border-top: 1px solid var(--f2-line); }
main .n19 ol.notes > li > a { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "nb site time" "nb nk nv" "nb chips nv"; column-gap: 14px; row-gap: 6px; align-items: start; padding: calc(20px / var(--f2-z)) 0; background: none; color: var(--t-ink); text-decoration: none; }
main .n19 ol.notes > li.new > a { background: none; }
main .n19 ol.notes > li > a > .nd { position: absolute; left: -16px; top: calc(32px / var(--f2-z)); }
main .n19 ol.notes > li > a > .nb { grid-area: nb; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
main .n19 ol.notes > li > a > .s:has(> b.site) { display: contents; }
main .n19 ol.notes > li > a > .s:not(:has(> b.site)) { grid-column: 2 / 3; grid-row: 1 / span 3; font-size: calc(14px / var(--f2-z)); }
main .n19 ol.notes .s > b.site { grid-area: site; font-size: calc(15px / var(--f2-z)); font-weight: 700; color: var(--t-ink); }
main .n19 ol.notes .s > .nk { grid-area: nk; font-size: calc(13.5px / var(--f2-z)); font-weight: 600; }
main .n19 ol.notes .s > .chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 0; }
main .n19 ol.notes .s > .chips .chip { padding: 0; border: 0; border-radius: 0; background: none; color: var(--t-body); font-size: calc(12.5px / var(--f2-z)); font-weight: 400; }
main .n19 ol.notes .s > .chips .chip:not(:last-child)::after { content: "·"; margin: 0 5px; }
main .n19 ol.notes .s > .nv { grid-area: nv; align-self: center; justify-self: end; color: var(--t-blue); font-size: calc(13px / var(--f2-z)); white-space: nowrap; }
main .n19 ol.notes > li > a > time { grid-area: time; justify-self: end; color: var(--t-body); font-size: calc(12.5px / var(--f2-z)); white-space: nowrap; }
@media (max-width: 560px) {
  main .n19 .n19-head { flex-direction: column; } main .n19 .n19-set { margin-top: 4px; }
  main .n19 .notes-card { padding: 22px 16px 6px; }
  main .n19 ol.notes > li > a { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "nb site" "nb nk" "nb chips" "nb time" "nb nv"; }
  main .n19 ol.notes > li > a > time, main .n19 ol.notes .s > .nv { justify-self: start; }
}

/* MOCK 33 LOGIN (v2; crowd2's look, 34's card): the four providers as two rows of two, each its mark and its name; "or continue with email"
   between hairlines; the password field drawn as the e-mail field, "Show" inside it at the right; "Forgot password?" right; the foot centred */
main .auth-v2.auth-in .signin-with { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px / var(--zoom, 1)); margin: 0; }
main .auth-v2.auth-in .signin-with .sw-tile { display: flex; align-items: center; justify-content: center; gap: 9px; width: auto; max-width: none; flex: none; height: calc(46px / var(--zoom, 1)); min-height: 44px; padding: 0 12px; border: 1px solid var(--line-3); border-radius: 6px; background: #fff; color: var(--t-ink); font-size: calc(14px / var(--zoom, 1)); font-weight: 600; text-decoration: none; aspect-ratio: auto; }
main .auth-v2.auth-in .signin-with .sw-tile svg { width: 18px; height: 18px; flex: none; }
main .auth-v2.auth-in .signin-with .sw-tile span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
main .auth-v2.auth-in .sw-or { display: flex; align-items: center; gap: 14px; margin: calc(26px / var(--zoom, 1)) 0 calc(28px / var(--zoom, 1)); font-size: calc(11.5px / var(--zoom, 1)); color: var(--t-body); }
main .auth-v2.auth-in .sw-or::before, main .auth-v2.auth-in .sw-or::after { content: ""; flex: 1; height: 1px; background: var(--f2-line); }
main .auth-v2.auth-in .sw-or span { background: none; padding: 0; }
main .auth-v2.auth-in .auth-pw { display: block; margin-top: calc(20px / var(--zoom, 1)); }   /* the label, the field, then "Forgot password?" under it at the right */
main .auth-v2.auth-in .auth-pw > label { display: block; font-size: calc(12.5px / var(--zoom, 1)); font-weight: 600; color: var(--t-ink); }
main .auth-v2.auth-in .pw-field { position: relative; display: block; margin-top: calc(10px / var(--zoom, 1)); }
main .auth-v2.auth-in .pw-field input { width: 100%; height: calc(50px / var(--zoom, 1)); padding: 0 64px 0 14px; border: 1px solid var(--line-3); border-radius: 6px; font-size: calc(16px / var(--zoom, 1)); box-sizing: border-box; }
main .auth-v2.auth-in form input[type=email] { height: calc(50px / var(--zoom, 1)); width: 100%; box-sizing: border-box; }
main .auth-v2.auth-in .pw-show { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--t-blue); font-size: calc(13px / var(--zoom, 1)); font-weight: 600; }
main .auth-v2.auth-in .auth-forgot { position: static; display: block; margin: calc(14px / var(--zoom, 1)) 0 0; text-align: right; font-size: calc(13px / var(--zoom, 1)); color: var(--t-blue); text-decoration: none; }
main .auth-v2.auth-in form button.primary { margin-top: calc(24px / var(--zoom, 1)); }
main .auth-v2.auth-in .auth-foot { margin: calc(24px / var(--zoom, 1)) 0 0; padding: 0; border: 0; text-align: center; font-size: calc(13px / var(--zoom, 1)); color: var(--t-ink); }
main .auth-v2.auth-in .auth-foot a { color: var(--t-blue); text-decoration: none; }