/* Soft design for the Merchandising Tools page. Every rule hangs off .app so the design
   page (docs/design-principles.md) can embed this exact file without touching the page around it.
   Themes: Blue (default) and White, picked from the user menu and stored in localStorage.

   Soft design rules used throughout:
   - large radii (cards 18px, controls 12px, pills fully round)
   - no hard borders: separation comes from tonal surfaces and layered, low-opacity shadows
   - one accent, quiet semantic tints (warn / bad) instead of saturated fills */

.app {
  /* Blue theme (default) */
  --bg: #eef2f8;
  --surface: #ffffff;
  --ink: #1f2a3a;
  --muted: #66748a;
  --line: rgba(31, 52, 84, 0.09);
  --accent: #2f6fb0;
  --accent-ink: #ffffff;
  --accent-soft: #e3edf8;
  --focus: #a9ccf3;

  --header-bg: #1a3a5c;
  --header-ink: #ffffff;
  --header-muted: rgba(255, 255, 255, 0.72);
  --chip-bg: rgba(255, 255, 255, 0.14);
  --chip-hover: rgba(255, 255, 255, 0.22);
  --tab-hover: rgba(255, 255, 255, 0.1);
  --tab-on-bg: var(--bg);
  --tab-on-ink: #1a3a5c;
  --avatar-bg: #ffffff;
  --avatar-ink: #1a3a5c;
  --btn-bg: #1a3a5c;
  --btn-ink: #ffffff;

  --warn-bg: #fdf1de;
  --warn-ink: #7a4a07;
  --bad-bg: #fbe6e6;
  --bad-ink: #8a1f1f;

  --shadow-card: 0 1px 2px rgba(31, 52, 84, 0.04), 0 8px 24px rgba(31, 52, 84, 0.07);
  --shadow-pop: 0 2px 6px rgba(31, 52, 84, 0.08), 0 16px 36px rgba(31, 52, 84, 0.18);

  --r-card: 18px;
  --r-ctl: 12px;
  --fs-tiny: 0.7rem;
  --fs-dense: 0.78rem;
  --fs-body: 0.875rem;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* White theme: same layout, light header. */
[data-theme="white"].app,
[data-theme="white"] .app {
  --bg: #f5f7fb;
  --focus: #2f6fb0;
  --header-bg: #ffffff;
  --header-ink: #1f2a3a;
  --header-muted: #66748a;
  --chip-bg: #eef2f8;
  --chip-hover: #e3e9f3;
  --tab-hover: #eef2f8;
  --tab-on-bg: var(--bg);
  --tab-on-ink: #1a3a5c;
  --avatar-bg: #2f6fb0;
  --avatar-ink: #ffffff;
  --btn-bg: #2f6fb0;
}

.app, .app * { box-sizing: border-box; }
.app [hidden] { display: none !important; }
.app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app .app-header :focus-visible { outline-color: var(--focus); }

/* Header: flat bottom edge, so the selected tab can run straight into the content below. */
.app .app-header {
  background: var(--header-bg);
  color: var(--header-ink);
  padding: 14px 20px 0;
  display: grid;
  gap: 0;
  position: relative;
  z-index: 2;
}
.app .app-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 14px; }
.app .brand { display: grid; line-height: 1.2; }
.app .brand small { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.08em; color: var(--header-muted); }
.app .brand strong { font-size: 1.1rem; }

/* User menu */
.app .user { position: relative; }
.app .user-btn {
  font: inherit; font-size: var(--fs-dense); cursor: pointer; border: 0;
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border-radius: 999px; background: var(--chip-bg); color: var(--header-ink);
  transition: background 0.15s;
}
.app .user-btn:hover, .app .user-btn[aria-expanded="true"] { background: var(--chip-hover); }
.app .avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--avatar-bg); color: var(--avatar-ink); font-weight: 600; font-size: var(--fs-dense);
}
.app .user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .caret { width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); opacity: 0.7; }
.app .user-btn[aria-expanded="true"] .caret { transform: translateY(1px) rotate(225deg); }

.app .menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; z-index: 20;
  background: var(--surface); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  padding: 8px; display: grid; gap: 2px;
}
.app .menu-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px 10px; }
.app .menu-head strong { font-size: var(--fs-body); overflow-wrap: anywhere; }
.app .menu-label { padding: 8px 10px 4px; font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border-top: 1px solid var(--line); margin-top: 2px; }
.app .menu-item {
  font: inherit; font-size: var(--fs-body); display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 12px;
}
.app .menu-item:hover { background: var(--bg); }
.app .menu-item[aria-checked="true"] { background: var(--accent-soft); }
.app .swatch { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px var(--line); }
.app .swatch.blue { background: linear-gradient(135deg, #2f6fb0, #1a3a5c); }
.app .swatch.white { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(31, 52, 84, 0.2); }
.app .check { margin-left: auto; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -1px); opacity: 0; }
.app .menu-item[aria-checked="true"] .check { opacity: 1; }

/* Tabs: the selected one takes the content colour and flows into it. Concave "scoops" at its
   base (the two pseudo-elements) round the join, so it reads as one surface with the page. */
.app .tabs { display: flex; gap: 6px; overflow-x: auto; margin-inline: -14px; padding-inline: 14px; }
.app .tab {
  font: inherit; font-size: var(--fs-body); border: 0; cursor: pointer; white-space: nowrap; position: relative;
  padding: 11px 22px 12px; border-radius: 16px 16px 0 0; background: transparent; color: var(--header-muted);
  display: flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s;
}
.app .tab:hover { background: var(--tab-hover); color: var(--header-ink); }
.app .tab[aria-selected="true"] { background: var(--tab-on-bg); color: var(--tab-on-ink); font-weight: 600; }
.app .tab[aria-selected="true"]::before,
.app .tab[aria-selected="true"]::after {
  content: ""; position: absolute; bottom: 0; width: 14px; height: 14px; pointer-events: none;
}
.app .tab[aria-selected="true"]::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 13.5px, var(--tab-on-bg) 14px); }
.app .tab[aria-selected="true"]::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--tab-on-bg) 14px); }

.app .pill { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.app .pill.role { background: var(--accent-soft); color: var(--tab-on-ink); }
.app .pill.soon { background: var(--warn-bg); color: var(--warn-ink); }
.app .pill.example { background: var(--accent-soft); color: var(--accent); }

/* Content */
.app main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 20px; }
/* A tool owns everything below the tab bar: no padding or card around its frame, so the tool's own
   cards (and their shadows) sit on the same page colour as the selected tab and aren't clipped. The
   tool supplies its own 20px padding when embedded (docs/embedding-a-tool.md). */
.app main.has-tool { padding: 0; }
.app .tool-frame { flex: 1 1 auto; width: 100%; min-height: 480px; border: 0; display: block; background: transparent; }

.app .card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); }

.app .message { width: 100%; max-width: 480px; margin: 40px auto; padding: 28px; display: grid; gap: 10px; justify-items: start; }
.app .message h2 { margin: 0; font-size: 1.15rem; text-wrap: balance; }
.app .message p { margin: 0; color: var(--muted); }
.app .message code { font-family: var(--font-data); font-size: var(--fs-dense); color: var(--ink); background: var(--bg); padding: 1px 7px; border-radius: 8px; }
.app .message-body { display: grid; gap: 8px; }
.app .badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.app .badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.app .badge.bad { background: var(--bad-bg); color: var(--bad-ink); }
.app .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.app .btn {
  font: inherit; font-size: var(--fs-dense); padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 0;
  background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; display: inline-block;
  box-shadow: 0 4px 12px rgba(31, 52, 84, 0.18); transition: transform 0.1s, box-shadow 0.15s;
}
.app .btn:hover { box-shadow: 0 6px 16px rgba(31, 52, 84, 0.24); }
.app .btn:active { transform: translateY(1px); }
.app .btn.secondary { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(31, 52, 84, 0.06), 0 4px 12px rgba(31, 52, 84, 0.08); }

.app .skeleton { display: grid; gap: 10px; width: 100%; }
.app .skeleton i { display: block; height: 12px; border-radius: 999px; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .app .skeleton i { animation: app-pulse 1.4s ease-in-out infinite; }
  @keyframes app-pulse { 50% { opacity: 0.5; } }
}

@media (max-width: 480px) {
  .app .user-name, .app .caret { display: none; }
  .app .user-btn { padding: 4px; }
  .app main { padding: 12px; }
  .app .app-header { padding-inline: 14px; }
}