/* =========================================================================
   Дизайн-система · Мобайл — оболочка витрин (боковая навигация + специмены).
   Подключается ПОСЛЕ ../css/app.css и переопределяет его глобальные стили
   (body там рассчитан на сцену с рамкой телефона).
   ========================================================================= */

html,body{height:100%}
body{
  margin:0;background:var(--bgLight50);color:var(--text900);overflow:hidden;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.ds{display:flex;height:100vh}

/* ---------- Навигация ---------- */
.ds-nav{
  flex:0 0 248px;display:flex;flex-direction:column;gap:1px;
  padding:20px 12px;background:var(--white);border-right:1px solid var(--text300);
  overflow-y:auto;
}
.ds-nav__logo{display:flex;align-items:center;gap:10px;margin:0 10px 6px}
.ds-nav__logo img{height:26px}
.ds-nav__eyebrow{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text600);margin:0 10px 14px}
.ds-nav .group{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text600);margin:14px 10px 6px}
.ds-nav a{
  display:flex;align-items:center;gap:10px;height:31px;padding:0 10px;border-radius:8px;
  font-size:12px;font-weight:500;color:var(--text700);text-decoration:none;
}
.ds-nav a:hover{background:var(--primary50)}
.ds-nav a.is-active{background:var(--primary500);color:#fff}
.ds-nav a .ic{width:15px;height:15px}
.ds-nav .foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--text300);font-size:10px;color:var(--text600);line-height:1.5}

/* ---------- Контент ---------- */
.ds-main{flex:1;min-width:0;overflow-y:auto;padding:32px 40px 80px;background:var(--bgLight50)}
.ds-main>header{margin-bottom:28px}
.ds-main>header h1{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.01em}
.ds-main>header p{margin:0;max-width:680px;font-size:13px;line-height:1.55;color:var(--text700)}
.ds-main>header .src{margin-top:10px;font-size:11px;color:var(--text600)}
.ds-main>header .src code,
code.tok{font-family:ui-monospace,Consolas,monospace;font-size:10px;background:var(--primary50);color:var(--primary700);padding:2px 6px;border-radius:6px}

/* Секция-витрина */
.spec{margin-bottom:36px}
.spec>h2{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;font-size:15px;font-weight:600;color:var(--text900)}
.spec>h2 .ref{font-size:10px;font-weight:500;color:var(--text600);font-family:ui-monospace,Consolas,monospace}
.spec>.desc{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--text700);max-width:680px}

/* Полотно специмена */
.canvas{
  padding:24px;background:var(--white);border:1px solid var(--text300);
  border-radius:14px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;
}
.canvas--col{flex-direction:column;align-items:stretch;gap:12px}
.canvas--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.canvas--dark{background:#20242b}
.canvas--app{background:var(--surface)}       /* фон скаффолда приложения */
.canvas--start{align-items:flex-start}
.canvas+.canvas{margin-top:12px}
.canvas .hint{width:100%;font-size:10px;color:var(--text600)}

/* подпись под вариантом */
.var{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.var>.cap{font-size:10px;color:var(--text600);font-family:ui-monospace,Consolas,monospace}
.var--center{align-items:center}

/* ---------- Телефонные рамки ---------- */
/* .phone — узкое полотно 393px с фоном скаффолда: компоненты в родном контексте */
.phone{
  width:393px;flex:0 0 auto;background:var(--surface);
  border:1px solid var(--text400);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;position:relative;
}
.phone--white{background:var(--white)}
.phone--pad{padding:12px}
.phone--pad.phone{gap:8px}
/* live-рамка с iframe клона (393×852 без масштаба) */
.phone-live{width:393px;height:852px;flex:0 0 auto;border:1px solid var(--text400);border-radius:24px;overflow:hidden;position:relative;background:var(--surface)}
.phone-live iframe{width:393px;height:852px;border:0;display:block}

/* ---------- Палитра ---------- */
.swatch-card{border-radius:14px;overflow:hidden;border:1px solid var(--text300);background:var(--white)}
/* сброс .chip из app.css (inline-flex пилюля) — в свотче это цветная плашка */
.swatch-card .chip{display:block;height:64px;padding:0;border-radius:0;max-width:none}
.swatch-card .meta{padding:10px 12px}
.swatch-card .meta .n{font-size:12px;font-weight:600}
.swatch-card .meta .v{font-size:10px;color:var(--text600);font-family:ui-monospace,Consolas,monospace;margin-top:2px}
.swatch-card .meta .u{font-size:10px;color:var(--text600);margin-top:4px;line-height:1.45}

/* ---------- Типографика ---------- */
.type-row{display:grid;grid-template-columns:150px 1fr 220px;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--text300)}
.type-row:last-child{border-bottom:none}
.type-row .cls{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--primary700)}
.type-row .meta{font-size:10px;color:var(--text600);text-align:right}

/* ---------- Иконки ---------- */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.icon-cell{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 10px;
  border-radius:10px;border:1px solid var(--text300);background:var(--white);
  cursor:default;transition:border-color .15s ease;
}
.icon-cell:hover{border-color:var(--primary200)}
.icon-cell .ic{width:20px;height:20px;color:var(--text700)}
.icon-cell .ic-raw{width:20px;height:20px}
.icon-cell .n{font-size:9px;color:var(--text600);font-family:ui-monospace,Consolas,monospace;word-break:break-all;text-align:center}

/* ---------- Радиусы / тени / отступы ---------- */
.token-tile{display:flex;flex-direction:column;gap:8px;align-items:center}
.token-tile .box{width:72px;height:72px;background:var(--primary100);border:1px solid var(--primary200)}
.token-tile .shadow-box{width:96px;height:64px;background:var(--white);border-radius:14px}
.token-tile .cap{font-size:10px;color:var(--text600);font-family:ui-monospace,Consolas,monospace;text-align:center}
.space-row{display:flex;align-items:flex-end;gap:12px}
.space-row .sp{background:var(--accent500);opacity:.75;width:24px}
.space-row .cap{font-size:10px;color:var(--text600);font-family:ui-monospace,Consolas,monospace}

/* ---------- Как надо / как не надо ---------- */
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
@media (max-width:900px){.dodont{grid-template-columns:1fr}}
.dodont .side{border-radius:14px;border:1px solid var(--text300);background:var(--white);overflow:hidden}
.dodont .side>.tag{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:11px;font-weight:600}
.dodont .side--do>.tag{color:var(--green);background:var(--green10)}
.dodont .side--dont>.tag{color:var(--red);background:var(--red10)}
.dodont .side>.body{padding:16px}
.dodont .side>.note{padding:0 14px 12px;font-size:11px;color:var(--text700)}