/* The frame of the app on a big screen (Board 2's Main board): top bar, Tools Menu, the side
   panel, the canvas with its dot grid, the canvas tools and toasts. The phone layout lives in
   phone.css. */

.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* Top bar */
.topbar {
  position: relative;
  z-index: 20;
  flex: none;
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 7px 14px;
  background: var(--topbar);
  border-bottom: var(--bw) solid var(--line);
  box-shadow: var(--topbar-shadow);
}
.topbar-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.topbar .i { stroke-width: 2.5; }
.topbar .i.chev { stroke-width: 3; }
:root[data-skin="clean"] .topbar .i { stroke-width: 2; }
:root[data-skin="clean"] .topbar .i.chev { stroke-width: 2.25; }
.topbar-sep { width: var(--bwc); height: 24px; margin: 0 2px; flex: none; background: var(--soft); }
.btn-name .micro { flex: none; }

.brand { display: flex; align-items: center; gap: 8px; color: #271813; text-decoration: none; }
.brand-box { padding: 2px 9px; font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: #ff5f1f; border: 2px solid #271813; box-shadow: 2px 2px 0 #271813; }
.brand-by { font-size: 9.5px; line-height: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #5b4138; }
:root[data-skin="clean"] .brand { gap: 9px; color: #1c2230; }
.brand-mark { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #9a3412; border-radius: 8px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: "Barlow", system-ui, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: #474e5f; }

/* Tools Menu (the far-left rail) */
.tools {
  flex: 0 0 calc(68px + var(--bw));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 12px;
  overflow-y: auto;
  scrollbar-width: none;
  background: #ffffff;
  border-right: var(--bw) solid var(--line);
}
:root[data-skin="clean"] .tools { background: var(--surface); }
.tool {
  width: 56px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px;
  font-family: var(--ui);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: var(--bwc) solid transparent;
  border-radius: var(--rc);
}
.tool .i { stroke-width: 2; }
.tool:hover { color: var(--ink); }
.tool.is-on { color: #271813; background: #ff5f1f; border: 2px solid #271813; border-radius: 0; box-shadow: 3px 3px 0 #271813; }
:root[data-skin="clean"] .tool.is-on { color: #ffffff; background: #9a3412; border: 1px solid #9a3412; border-radius: 10px; box-shadow: 0 1px 2px rgba(28, 34, 48, 0.07); }
.tools-gap { flex: 1 1 auto; min-height: 12px; }
.new-screen { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; font-family: var(--ui); font-size: 9.5px; line-height: 1.15; font-weight: 600; text-align: center; color: var(--muted); background: transparent; border: 0; }
.new-screen-dot { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--accent); border: var(--bwc) solid var(--accent-line); border-radius: 50%; box-shadow: 3px 3px 0 #271813; }
:root[data-skin="clean"] .new-screen-dot { box-shadow: 0 6px 14px -6px rgba(154, 52, 18, 0.6); }
.new-screen .i { stroke-width: 2.5; }
.new-screen:active .new-screen-dot { transform: translate(1px, 1px); box-shadow: none; }
:root[data-skin="clean"] .new-screen:active .new-screen-dot { transform: scale(0.96); }

/* Side panel */
.panel {
  flex: 0 0 312px;
  width: 312px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: var(--bw) solid var(--line);
  overflow: hidden;
}
.panel-head { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-bottom: var(--bw) solid var(--line); }
.panel-head-row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.panel-head-row .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 14px 16px 24px; }
.panel-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: var(--bw) solid var(--line); background: var(--head); }
.panel-section { display: flex; flex-direction: column; gap: 8px; }
.panel .icon-sm .i { stroke-width: 2.5; }
:root[data-skin="clean"] .panel .icon-sm .i { stroke-width: 2; }

/* Canvas */
.work {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--canvas);
}
.work-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
  background-attachment: local;
}
.work-scroll.is-panning { cursor: grabbing; }
.stage { position: relative; }
.work-expand { position: absolute; left: 16px; top: 16px; z-index: 4; }
.work-title { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.work-title .card-title { font-size: 14px; }
:root[data-skin="clean"] .work-title .card-title { font-size: 16px; }

/* Canvas tools (bottom right) */
.canvas-tools {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 6;
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  border: 3px solid #271813;
  box-shadow: 4px 4px 0 #271813;
}
:root[data-skin="clean"] .canvas-tools { align-items: center; gap: 2px; padding: 4px; background: #fffdf8; border: 1px solid #e6dccb; border-radius: 14px; box-shadow: 0 1px 2px rgba(28, 34, 48, 0.05), 0 10px 28px -12px rgba(28, 34, 48, 0.18); }
.ct-btn { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
.ct-btn:hover:not(:disabled) { background: #ffe9e3; }
.ct-btn.is-on { color: #271813; background: #ff5f1f; }
:root[data-skin="clean"] .ct-btn { width: 34px; height: 34px; border-radius: 10px; }
:root[data-skin="clean"] .ct-btn:hover:not(:disabled) { background: #f1e9d8; }
:root[data-skin="clean"] .ct-btn.is-on { color: #9a3412; background: rgba(154, 52, 18, 0.12); }
.ct-btn .i { stroke-width: 2.5; }
:root[data-skin="clean"] .ct-btn .i { stroke-width: 2; }
.ct-sep { width: 2px; align-self: stretch; flex: none; background: #271813; }
:root[data-skin="clean"] .ct-sep { width: 1px; height: 22px; align-self: center; margin: 0 4px; background: #e6dccb; }
.ct-zoom { min-width: 54px; height: 38px; padding: 0 4px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
:root[data-skin="clean"] .ct-zoom { min-width: 52px; height: 34px; font-weight: 500; border-radius: 10px; }
.ct-btn:disabled { opacity: 0.35; }

/* Tooltips */
.tip {
  position: fixed;
  z-index: 90;
  max-width: 260px;
  padding: 8px 12px;
  pointer-events: none;
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.4;
  color: #ffffff;
  background: var(--dark);
  border-radius: 0;
  box-shadow: var(--dark-shadow);
  animation: tip-in 120ms ease-out both;
}
:root[data-skin="clean"] .tip { border-radius: 10px; }
.tip b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
:root[data-skin="clean"] .tip b { font-size: 13px; letter-spacing: 0; text-transform: none; }
.tip b + span { display: block; margin-top: 2px; opacity: 0.86; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } }

/* Toasts (bottom left of the canvas) */
.toast {
  position: fixed;
  left: calc(68px + var(--bw) + 24px);
  bottom: 24px;
  z-index: 70;
  max-width: min(560px, calc(100vw - 120px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 9px 14px;
  font-family: var(--ui);
  color: #ffffff;
  background: var(--dark);
  border-radius: 0;
  box-shadow: var(--dark-shadow);
  animation: toast-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.app.has-panel .toast { left: calc(68px + var(--bw) + 312px + 24px); }
:root[data-skin="clean"] .toast { border-radius: 12px; }
.toast .i { flex: none; stroke-width: 2.25; }
.toast-text { min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.toast-text b { font-size: 13.5px; font-weight: 700; }
.toast-text span { opacity: 0.86; }
.toast-btn { height: 30px; flex: none; padding: 0 12px; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #271813; background: #ff5f1f; border: 2px solid #ffffff; border-radius: 0; }
:root[data-skin="clean"] .toast-btn { font-size: 13px; letter-spacing: 0; text-transform: none; color: #1c2230; background: #fffdf8; border: 0; border-radius: 8px; }
.toast-close { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; color: #ffffff; background: transparent; border: 0; opacity: 0.7; }
.toast-close:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* Screen-reader announcements */
.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .toast, .tip { animation: fade-in 120ms ease both; }
}
@keyframes fade-in { from { opacity: 0; } }