/* 柚子AI工坊 — static, decorative HTML/CSS mocks of the two systems (no real screenshots).
 *
 * Sizing: everything inside a .mock is in em, and the mock's font-size is its width / 40
 * (phones: / 32, with .mock__side columns hidden), so a mock scales like an image.
 * The context sets the rendered width in --mock-w (the homepage card slot does it in
 * site.css); default is 40rem on desktop and the full content width on phones.
 * The desktop canvas is 40em wide; inside a 16:10 slot that is 40em x 25em, overflow cropped.
 * Old-WebView safe: no flex gap (margins instead), grid gap only on grids, no aspect-ratio.
 * Every class here starts with .mock (see test_mock_css_is_namespaced).
 */

.mock {
  --m-ink: #1f2329;
  --m-muted: #8a8f99;
  --m-line: #eceef2;
  --m-soft: #f6f7f9;
  --m-indigo: #5b5fe0;
  --m-indigo-bg: #eef0fd;
  --m-navy: #1f2a3c;
  --m-blue: #2f6fed;
  --m-blue-bg: #edf3fe;
  --m-green: #1f9d55;
  --m-green-bg: #e7f6ed;
  --m-lime: #5f9e23;
  --m-lime-bg: #eff7e4;
  --m-amber: #b7800a;
  --m-amber-bg: #fdf3da;
  --m-peach: #d9894f;
  --m-peach-bg: #fdf0e6;
  --m-red: #d14545;
  --m-red-bg: #fdecec;
  position: relative;
  box-sizing: border-box;
  width: 40rem; /* fallback for browsers without custom properties */
  width: var(--mock-w, 40rem);
  max-width: 100%;
  margin: 0;
  padding: 1.4em 1.4em 0;
  overflow: hidden;
  background: var(--shot, #F7F2E8);
  color: var(--m-ink);
  font-size: 16px;
  font-size: calc(var(--mock-w, 40rem) / 40);
  line-height: 1.45;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
}

.mock *,
.mock *::before,
.mock *::after {
  box-sizing: border-box;
}

.mock p {
  margin: 0;
}

.mock b {
  font-weight: 600;
}

/* Visually hidden caption: the surrounding page already titles the mock. */
.mock__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- browser window ---------- */

.mock__window {
  min-height: 100%;
  background: #fff;
  border: 1px solid var(--line-2, #EFE6D4);
  border-bottom: 0;
  border-radius: 0.7em 0.7em 0 0;
  box-shadow: 0 0.6em 1.8em rgba(120, 90, 30, 0.1);
  overflow: hidden;
}

.mock__bar {
  display: flex;
  align-items: center;
  height: 1.9em;
  padding: 0 0.9em;
  background: #fbf8f1;
  border-bottom: 1px solid var(--line-2, #EFE6D4);
}

.mock__dot {
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: #eec4b5;
}

.mock__dot + .mock__dot {
  background: #f2d891;
}

.mock__dot + .mock__dot + .mock__dot {
  background: #c3dcb0;
}

.mock__addr {
  width: 38%;
  height: 1.05em;
  margin: 0 auto;
  border-radius: 0.6em;
  background: #f1ebdd;
}

/* ---------- shared app pieces ---------- */

.mock__app {
  display: flex;
  align-items: stretch;
}

.mock__side {
  flex: 0 0 auto;
  border-right: 1px solid var(--m-line);
  background: var(--m-soft);
}

.mock__main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9em 1em 1em;
}

.mock__topnav {
  display: flex;
  align-items: center;
  height: 2.6em;
  padding: 0 1em;
  border-bottom: 1px solid var(--m-line);
  font-size: 0.8em;
  white-space: nowrap;
}

.mock__brand {
  display: flex;
  align-items: center;
  margin-right: 1.4em;
  font-weight: 600;
  white-space: nowrap;
}

.mock__logo {
  width: 1.3em;
  height: 1.3em;
  margin-right: 0.45em;
  border-radius: 0.35em;
  background: var(--m-ink);
  box-shadow: inset 0 0 0 0.28em var(--m-ink), inset 0 0 0 0.42em #fff;
}

.mock__tab {
  margin-right: 1.2em;
  color: var(--m-muted);
}

.mock__tab--on {
  color: var(--m-ink);
  font-weight: 600;
  box-shadow: inset 0 -0.14em 0 var(--m-indigo);
  padding: 0.75em 0 0.65em;
}

.mock__avatar {
  width: 1.5em;
  height: 1.5em;
  margin-left: auto;
  border-radius: 50%;
  background: var(--m-indigo-bg);
  box-shadow: inset 0 0 0 1px #d8dbf8;
}

.mock__btn {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 0.4em;
  border: 1px solid var(--m-line);
  background: #fff;
  color: var(--m-ink);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.mock__topnav .mock__btn {
  font-size: 1em;
}

.mock__btn--indigo {
  border-color: var(--m-indigo);
  background: var(--m-indigo);
  color: #fff;
}

.mock__btn--navy {
  border-color: var(--m-navy);
  background: var(--m-navy);
  color: #fff;
}

.mock__h {
  font-size: 0.85em;
  font-weight: 700;
}

.mock__muted {
  color: var(--m-muted);
}

.mock__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.mock__title {
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.mock__title .mock__pill {
  margin-left: 0.4em;
  vertical-align: 0.15em;
}

.mock__meta {
  font-size: 0.68em;
  color: var(--m-muted);
  white-space: nowrap;
}

.mock__meta b {
  color: var(--m-ink);
}

.mock__pill {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 1em;
  background: var(--m-soft);
  color: var(--m-muted);
  font-size: 0.62em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.mock__pill--green {
  background: var(--m-green-bg);
  color: var(--m-green);
}

.mock__pill--indigo {
  background: var(--m-indigo-bg);
  color: var(--m-indigo);
}

.mock__pill--blue {
  background: var(--m-blue-bg);
  color: var(--m-blue);
}

.mock__pill--amber {
  background: var(--m-amber-bg);
  color: var(--m-amber);
}

.mock__pill--line {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--m-line);
}

.mock__tabs {
  display: flex;
  margin-top: 0.7em;
  border-bottom: 1px solid var(--m-line);
  font-size: 0.72em;
  white-space: nowrap;
}

.mock__tabs span {
  margin-right: 1.6em;
  padding-bottom: 0.45em;
  color: var(--m-muted);
}

.mock__tabs .mock__tabs-on {
  color: var(--m-ink);
  font-weight: 700;
  box-shadow: inset 0 -0.16em 0 var(--m-navy);
}

/* Match tiers (wording as in the system: 高 / 较高 / 中 / 较低 / 低). */
.mock__match {
  display: inline-block;
  padding: 0.05em 0.5em;
  border-radius: 0.3em;
  font-size: 0.6em;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.mock__match::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.35em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.08em;
}

.mock__match--high { background: var(--m-green-bg); color: var(--m-green); }
.mock__match--good { background: var(--m-lime-bg); color: var(--m-lime); }
.mock__match--mid { background: var(--m-amber-bg); color: var(--m-amber); }
.mock__match--fair { background: var(--m-peach-bg); color: var(--m-peach); }
.mock__match--low { background: var(--m-red-bg); color: var(--m-red); }

/* Verdict dots in analysis tables. */
.mock__verdict {
  font-size: 0.62em;
  font-weight: 700;
  white-space: nowrap;
}

.mock__verdict::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.3em;
  border-radius: 0.12em;
  background: currentColor;
}

.mock__verdict--ok { color: var(--m-green); }
.mock__verdict--part { color: #c56a1b; }
.mock__verdict--none { color: #9aa1ab; }

.mock mark,
.mock__mark {
  padding: 0 0.1em;
  border-radius: 0.15em;
  background: #ffe9a3;
  color: inherit;
}

/* ---------- 生图: product pictures drawn in CSS (a candle jar) ---------- */

.mock__img {
  position: relative;
  display: block;
  padding-top: 100%;
  border-radius: 0.35em;
  background: #f6f1ea;
  overflow: hidden;
}

.mock__img::before { /* jar */
  content: "";
  position: absolute;
  left: 34%;
  bottom: 22%;
  width: 32%;
  height: 40%;
  border-radius: 0.25em 0.25em 0.4em 0.4em;
  background: linear-gradient(90deg, #d9a35f, #f0c98d 45%, #c98d4c);
  box-shadow: inset 0 0.35em 0 rgba(255, 255, 255, 0.35);
}

.mock__img::after { /* wooden lid */
  content: "";
  position: absolute;
  left: 32%;
  bottom: 60%;
  width: 36%;
  height: 9%;
  border-radius: 0.2em;
  background: #8a6447;
}

.mock__img--main {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--m-line);
}

.mock__img--scene {
  background: linear-gradient(180deg, #e9e2d6 0, #e9e2d6 62%, #c8a27a 62%, #b88d63 100%);
}

.mock__img--scene::before {
  bottom: 28%;
}

.mock__img--scene::after {
  bottom: 66%;
}

.mock__img--detail {
  background:
    linear-gradient(#cfc7bb, #cfc7bb) 58% 30% / 30% 7% no-repeat,
    linear-gradient(#e2dbcf, #e2dbcf) 58% 46% / 30% 5% no-repeat,
    linear-gradient(#e2dbcf, #e2dbcf) 58% 58% / 24% 5% no-repeat,
    #fbf7f1;
}

.mock__img--detail::before {
  left: 10%;
  width: 28%;
  height: 36%;
}

.mock__img--detail::after {
  left: 8%;
  width: 32%;
  bottom: 58%;
}

.mock__img--plate {
  background: #f3f5f6;
}

.mock__img--plate::before { /* plate seen from above */
  left: 18%;
  bottom: 18%;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  background: radial-gradient(circle, #a9bfcf 0, #a9bfcf 46%, #c4d4df 48%, #dbe5ec 100%);
  box-shadow: 0 0.2em 0.4em rgba(60, 80, 100, 0.15);
}

.mock__img--plate::after {
  display: none;
}

.mock__img--pillow {
  background: #efe9df;
}

.mock__img--pillow::before {
  left: 20%;
  bottom: 24%;
  width: 60%;
  height: 46%;
  border-radius: 0.6em;
  background: linear-gradient(135deg, #cbbfa9, #e3d9c6);
  box-shadow: none;
}

.mock__img--pillow::after {
  display: none;
}

.mock__img--box {
  background: #eef0ec;
}

.mock__img--box::before {
  left: 24%;
  bottom: 26%;
  width: 52%;
  height: 34%;
  border-radius: 0.15em;
  background: linear-gradient(180deg, #9fb59a, #86a081);
  box-shadow: inset 0 0.25em 0 rgba(255, 255, 255, 0.25);
}

.mock__img--box::after {
  display: none;
}

/* A tile still being generated: soft stripes, no product yet. */
.mock__img--run {
  background: repeating-linear-gradient(135deg, #f3f1fb 0, #f3f1fb 0.5em, #e9e7f8 0.5em, #e9e7f8 1em);
}

.mock__img--run::before,
.mock__img--run::after {
  display: none;
}

/* ---------- 生图: workbench ---------- */

.mock--image-workbench .mock__side {
  width: 10.5em;
  padding: 0.9em 0.7em;
}

.mock__task {
  display: flex;
  align-items: center;
  margin-top: 0.55em;
  padding: 0.4em;
  border-radius: 0.4em;
  border: 1px solid transparent;
}

.mock__task--on {
  background: #fff;
  border-color: var(--m-line);
}

.mock__task .mock__img {
  flex: 0 0 auto;
  width: 2.2em;
  padding-top: 2.2em;
  margin-right: 0.5em;
}

.mock__task-text {
  min-width: 0;
  font-size: 0.68em;
  line-height: 1.45;
  white-space: nowrap;
}

.mock__task-text b {
  display: block;
  font-size: 1.08em;
}

.mock__status {
  color: var(--m-muted);
}

.mock__status::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.3em;
  border-radius: 50%;
  background: var(--m-green);
}

.mock__status--run::before {
  background: var(--m-indigo);
}

.mock__progress {
  height: 0.32em;
  margin: 0.7em 0 0.35em;
  border-radius: 0.2em;
  background: var(--m-line);
  overflow: hidden;
}

.mock__progress-fill {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 0.2em;
  background: var(--m-indigo);
}

.mock__shop {
  margin-top: 0.8em;
}

.mock__shop-name {
  margin-bottom: 0.4em;
  font-size: 0.72em;
  font-weight: 700;
  white-space: nowrap;
}

.mock__shop-name .mock__pill {
  margin-left: 0.4em;
  font-size: 0.85em;
}

.mock__tiles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0.55em;
  gap: 0.55em;
}

.mock__tile-label {
  display: block;
  margin-top: 0.25em;
  font-size: 0.58em;
  color: var(--m-muted);
  white-space: nowrap;
}

.mock__tile--picked .mock__img {
  box-shadow: 0 0 0 0.14em var(--m-indigo);
}

.mock__revise {
  position: absolute;
  top: 58%;
  left: 30%;
  z-index: 1;
  width: 15.5em;
  padding: 0.6em 0.7em;
  border: 1px solid var(--m-line);
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0 0.5em 1.4em rgba(30, 35, 60, 0.14);
}

.mock__revise-label {
  font-size: 0.64em;
  font-weight: 700;
}

.mock__revise-input {
  margin: 0.35em 0 0.45em;
  padding: 0.35em 0.5em;
  border: 1px solid #c9ccf4;
  border-radius: 0.35em;
  font-size: 0.64em;
  white-space: nowrap;
  overflow: hidden;
}

.mock__revise-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6em;
  color: var(--m-muted);
  white-space: nowrap;
}

.mock__revise-foot .mock__btn {
  font-size: 1em;
}

/* ---------- 生图: AI analysis card ---------- */

.mock--image-analysis .mock__main {
  padding: 0.8em 1.1em 1em;
}

.mock__analysis {
  display: flex;
  align-items: flex-start;
  margin-top: 0.5em;
}

.mock__analysis-src {
  flex: 0 0 auto;
  width: 5.4em;
  margin-right: 0.9em;
}

.mock__fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--m-line);
  border-radius: 0.45em;
  background: var(--m-soft);
  overflow: hidden;
}

.mock__field {
  padding: 0.45em 0.6em;
  border-right: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.4;
}

.mock__field small {
  display: block;
  margin-bottom: 0.15em;
  color: var(--m-muted);
  font-size: 0.85em;
  font-weight: 400;
}

.mock__field--wide {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
}

.mock__field--editing {
  background: #fff;
  box-shadow: inset 0 0 0 0.14em var(--m-indigo);
}

.mock__field--editing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 0.1em;
  background: var(--m-indigo);
  vertical-align: -0.15em;
}

.mock__plan {
  margin-top: 0.6em;
  border: 1px solid var(--m-line);
  border-radius: 0.45em;
  overflow: hidden;
}

.mock__plan-row {
  display: grid;
  grid-template-columns: 7.5em 1fr 3.6em;
  align-items: center;
  padding: 0.3em 0.7em;
  border-top: 1px solid var(--m-line);
  font-size: 0.68em;
  white-space: nowrap;
}

.mock__plan-row:first-child {
  border-top: 0;
  background: var(--m-soft);
  color: var(--m-muted);
  font-size: 0.6em;
}

.mock__plan-row b {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6em;
  font-size: 0.72em;
  white-space: nowrap;
}

.mock__estimate .mock__btn {
  font-size: 1em;
}

/* ---------- 招聘: shared shell ---------- */

.mock--hire-board .mock__side,
.mock--hire-persona .mock__side {
  width: 7.6em;
  padding: 0.8em 0 0;
}

.mock__side-brand {
  display: flex;
  align-items: center;
  padding: 0 0.7em 0.6em;
  font-size: 0.66em;
  font-weight: 700;
  white-space: nowrap;
}

.mock__side-brand .mock__logo {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.35em;
  background: var(--m-navy);
  box-shadow: inset 0 0 0 0.26em var(--m-navy), inset 0 0 0 0.38em #fff;
}

.mock__side-item {
  padding: 0.45em 0.9em;
  font-size: 0.66em;
  color: var(--m-muted);
  white-space: nowrap;
}

.mock__side-item--on {
  background: #e9edf3;
  color: var(--m-ink);
  font-weight: 700;
  box-shadow: inset 0.2em 0 0 var(--m-blue);
}

.mock__crumb {
  margin-bottom: 0.45em;
  font-size: 0.6em;
  color: var(--m-muted);
  white-space: nowrap;
}

.mock__filters {
  display: flex;
  align-items: center;
  margin: 0.6em 0 0.55em;
  font-size: 0.62em;
  white-space: nowrap;
}

.mock__filters > span {
  margin-right: 0.45em;
}

.mock__chip {
  padding: 0.12em 0.6em;
  border: 1px solid var(--m-line);
  border-radius: 1em;
  font-weight: 600;
}

.mock__chip::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.3em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.08em;
}

.mock__chip--all {
  border-color: var(--m-navy);
  background: var(--m-navy);
  color: #fff;
}

.mock__chip--all::before {
  display: none;
}

.mock__chip--high { color: var(--m-green); }
.mock__chip--good { color: var(--m-lime); }
.mock__chip--mid { color: var(--m-amber); }
.mock__chip--fair { color: var(--m-peach); }
.mock__chip--low { color: var(--m-red); }

/* ---------- 招聘: candidate board ---------- */

.mock__board {
  display: grid;
  grid-template-columns: repeat(4, 7.6em);
  grid-gap: 0.5em;
  gap: 0.5em;
  align-items: start;
}

.mock__col {
  padding: 0.45em;
  border-radius: 0.45em;
  background: var(--m-soft);
}

.mock__col-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4em;
  font-size: 0.62em;
  font-weight: 700;
  white-space: nowrap;
}

.mock__col-head .mock__muted {
  font-weight: 400;
}

.mock__card {
  margin-top: 0.4em;
  padding: 0.45em 0.5em;
  border: 1px solid var(--m-line);
  border-radius: 0.4em;
  background: #fff;
}

.mock__col-head + .mock__card {
  margin-top: 0;
}

.mock__card-name {
  font-size: 0.68em;
  font-weight: 700;
  color: var(--m-blue);
  white-space: nowrap;
}

.mock__card-name .mock__pill {
  margin-left: 0.3em;
  font-size: 0.82em;
}

.mock__card .mock__match {
  margin-top: 0.3em;
}

.mock__card-foot {
  margin-top: 0.3em;
  font-size: 0.56em;
  color: var(--m-muted);
  white-space: nowrap;
}

/* ---------- 招聘: per-item analysis against the persona ---------- */

.mock--hire-analysis .mock__side {
  order: 2;
  width: 12.5em;
  padding: 0.9em 0.9em 1em;
  border-right: 0;
  border-left: 1px solid var(--m-line);
  background: #fafbfc;
}

.mock__person {
  font-size: 1.1em;
  font-weight: 700;
  white-space: nowrap;
}

.mock__person .mock__pill {
  margin-left: 0.4em;
  vertical-align: 0.15em;
}

.mock__check {
  margin-top: 0.55em;
  border: 1px solid var(--m-line);
  border-radius: 0.45em;
  overflow: hidden;
}

.mock__check-row {
  display: grid;
  grid-template-columns: 5.2em 1fr 1fr 4.2em;
  align-items: center;
  padding: 0.42em 0.6em;
  border-top: 1px solid var(--m-line);
  font-size: 0.66em;
  line-height: 1.4;
}

.mock__check-row:first-child {
  border-top: 0;
}

.mock__check-row .mock__verdict {
  font-size: 0.95em;
}

.mock__check-row--open {
  background: #fffcf2;
}

.mock__tag {
  display: inline-block;
  margin-right: 0.3em;
  padding: 0 0.3em;
  border-radius: 0.2em;
  background: var(--m-soft);
  color: var(--m-muted);
  font-size: 0.85em;
  font-weight: 600;
}

.mock__tag--must {
  background: #eef1f6;
  color: var(--m-navy);
}

.mock__tag--plus {
  background: var(--m-amber-bg);
  color: var(--m-amber);
}

.mock__evidence {
  margin: 0 0.6em 0.55em;
  padding: 0.45em 0.6em;
  border-left: 0.2em solid #f2c94c;
  border-radius: 0 0.3em 0.3em 0;
  background: #fff;
  font-size: 0.62em;
  line-height: 1.55;
  box-shadow: inset 0 0 0 1px var(--m-line);
}

.mock__evidence small {
  display: block;
  margin-bottom: 0.15em;
  color: var(--m-amber);
  font-size: 0.95em;
  font-weight: 700;
}

.mock__resume-title {
  font-size: 0.7em;
  font-weight: 700;
}

.mock__resume {
  margin-top: 0.5em;
  padding: 0.6em 0.65em;
  border: 1px solid var(--m-line);
  border-radius: 0.35em;
  background: #fff;
  font-size: 0.56em;
  line-height: 1.7;
}

.mock__resume p + p {
  margin-top: 0.5em;
}

.mock__resume .mock__mark {
  box-shadow: 0 0 0 0.12em #f2c94c;
}

/* ---------- 招聘: job persona ---------- */

.mock__persona {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.55em;
  gap: 0.55em;
  margin-top: 0.65em;
}

.mock__dim {
  padding: 0.55em 0.6em 0.6em;
  border: 1px solid var(--m-line);
  border-radius: 0.45em;
}

.mock__dim-title {
  margin-bottom: 0.3em;
  font-size: 0.7em;
  font-weight: 700;
}

.mock__dim ul {
  margin: 0.2em 0 0.4em;
  padding: 0;
  list-style: none;
  font-size: 0.6em;
  line-height: 1.5;
}

.mock__dim li {
  position: relative;
  padding-left: 0.8em;
  margin-top: 0.2em;
}

.mock__dim li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: #b9bec7;
}

.mock__dim .mock__tag {
  font-size: 0.56em;
}

.mock__confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6em;
  padding: 0.45em 0.7em;
  border-radius: 0.4em;
  background: var(--m-green-bg);
  font-size: 0.64em;
  white-space: nowrap;
}

.mock__confirm b {
  color: var(--m-green);
}

.mock__confirm .mock__btn {
  font-size: 1em;
}

/* ---------- phones: bigger type, side columns dropped ---------- */

@media (max-width: 767px) {
  .mock {
    width: calc(100vw - 32px);
    width: var(--mock-w, calc(100vw - 32px));
    font-size: calc((100vw - 32px) / 32);
    font-size: calc(var(--mock-w, calc(100vw - 32px)) / 32);
    padding: 1em 1em 0;
  }

  .mock__side,
  .mock--hire-analysis .mock__side {
    display: none;
  }

  .mock__board {
    display: grid;
    grid-template-columns: repeat(4, 7.4em);
    grid-gap: 0.45em;
    gap: 0.45em;
  }

  .mock__revise {
    top: 28%;
  }
}