/* =========================================================================
   Дизайн-система · Веб — оболочка витрин (боковая навигация + специмены).
   ========================================================================= */

html,body{height:100%}
body{overflow:hidden}
.ds{display:flex;height:100vh}

/* ---------- Навигация ---------- */
.ds-nav{
  flex:0 0 248px;display:flex;flex-direction:column;gap:1px;
  padding:20px 12px;background:var(--surface);border-right:1px solid var(--border-soft);
  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(--text-600);margin:0 10px 14px}
.ds-nav .group{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-600);margin:14px 10px 6px}
.ds-nav a{
  display:flex;align-items:center;gap:10px;height:31px;padding:0 10px;border-radius:var(--r);
  font-size:12px;font-weight:500;color:var(--text-700);
}
.ds-nav a:hover{background:var(--primary-50)}
.ds-nav a.is-active{background:var(--primary);color:#fff}
.ds-nav a .ao-icon{font-size:15px}
.ds-nav .foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--border-soft);font-size:10px;color:var(--text-600)}

/* ---------- Контент ---------- */
.ds-main{flex:1;min-width:0;overflow-y:auto;padding:32px 40px 80px;background:var(--background)}
.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:640px;font-size:13px;line-height:1.55;color:var(--text-700)}
.ds-main>header .src{margin-top:10px;font-size:11px;color:var(--text-600)}
.ds-main>header .src code{font-family:ui-monospace,Consolas,monospace;font-size:10px;background:var(--primary-50);color:var(--primary-dark);padding:2px 6px;border-radius:var(--r-md)}

/* Секция-витрина */
.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(--text-body);
}
.spec>h2 .ref{font-size:10px;font-weight:500;color:var(--text-600);font-family:ui-monospace,Consolas,monospace}
.spec>.desc{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--text-700);max-width:640px}

/* Полотно специмена */
.canvas{
  padding:24px;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);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:#262B33}
.canvas--grey{background:var(--background)}
.canvas+.canvas{margin-top:12px}
.canvas .hint{width:100%;font-size:10px;color:var(--text-600)}

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

/* ---------- Палитра ---------- */
.swatch-card{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border-soft);background:var(--surface)}
.swatch-card .chip{height:64px}
.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(--text-600);font-family:ui-monospace,Consolas,monospace;margin-top:2px}
.swatch-card .meta .u{font-size:10px;color:var(--text-600);margin-top:4px}

/* ---------- Типографика ---------- */
.type-row{display:grid;grid-template-columns:150px 1fr 220px;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border-soft)}
.type-row:last-child{border-bottom:none}
.type-row .cls{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--primary-dark)}
.type-row .meta{font-size:10px;color:var(--text-600);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:var(--r);border:1px solid var(--border-soft);background:var(--surface);
  cursor:default;transition:border-color .15s ease;
}
.icon-cell:hover{border-color:var(--primary-200)}
.icon-cell .ao-icon{font-size:20px;color:var(--text-700)}
.icon-cell .n{font-size:9px;color:var(--text-600);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(--secondary);border:1px solid var(--primary-200)}
.token-tile .shadow-box{width:96px;height:64px;background:var(--surface);border-radius:var(--r-lg)}
.token-tile .cap{font-size:10px;color:var(--text-600);font-family:ui-monospace,Consolas,monospace;text-align:center}
.space-row{display:flex;align-items:flex-end;gap:12px}
.space-row .sp{background:var(--accent);opacity:.75;width:24px}
.space-row .cap{font-size:10px;color:var(--text-600);font-family:ui-monospace,Consolas,monospace}

/* ---------- Демо-раскладки (patterns) ---------- */
.pattern-frame{
  border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-elevation-2);
}
.pattern-frame .bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--light-grey);border-bottom:1px solid var(--border-soft)}
.pattern-frame .bar i{width:8px;height:8px;border-radius:50%;background:var(--border)}
.pattern-frame .bar span{font-size:10px;color:var(--text-600);margin-left:6px}
.pattern-frame .frame-body{position:relative}

/* мини-шелл внутри фрейма */
.mini-rail{display:flex;flex-direction:column;align-items:center;gap:6px;width:40px;padding:10px 0;background:var(--surface);border-right:1px solid var(--border-soft)}
.mini-rail .ao-icon{font-size:15px;color:var(--text-700)}
.mini-rail .logo{width:22px;height:22px;margin-bottom:6px}

/* Пример «как надо / как не надо» */
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.dodont{grid-template-columns:1fr}}
.dodont .side{border-radius:var(--r-lg);border:1px solid var(--border-soft);background:var(--surface);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(--success);background:var(--status-done-bg)}
.dodont .side--dont>.tag{color:var(--error);background:var(--status-danger-bg)}
.dodont .side>.body{padding:16px}
.dodont .side>.note{padding:0 14px 12px;font-size:11px;color:var(--text-700)}