/* =============================================================================
 * 工房型レイアウト — HIME Studio 第5の型
 * =============================================================================
 * 5領域:
 *   top      : アイデンティティ + 検索 + 通知 + 音声
 *   left     : 道具棚(ショートカット・テンプレ)
 *   center   : 作業台(メイン)
 *   right    : 文脈パネル(コンテクスチュアルチャット)
 *   bottom   : 工程デッキ(3段パイプ) + Fleur Wire タイムライン
 * 参照: screens/README.md §1
 * ============================================================================= */

.workshop {
  display: grid;
  grid-template-columns: var(--workshop-left) 1fr var(--workshop-right);
  grid-template-rows: var(--topbar-h) 1fr var(--deck-h) var(--wire-h);
  grid-template-areas:
    "top    top      top"
    "left   center   right"
    "deck   deck     deck"
    "wire   wire     wire";
  height: 100vh;
  background: var(--c-bg);
}

/* ---------------- Top Bar ---------------- */
.workshop-top {
  grid-area: top;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-lg);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  gap: var(--pad-lg);
}

.workshop-top .brand {
  font-weight: 700;
  color: var(--c-sakura-dark);
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: 4px;
}

.workshop-top .brand::before {
  content: "◆";
  color: var(--c-sakura);
  font-size: var(--fs-lg);
}

.workshop-top .counter-info {
  font-size: var(--fs-sm);
  color: var(--c-ink-sub);
}

.workshop-top .search {
  flex: 1;
  max-width: 600px;
  padding-left: 24px;
  position: relative;
}
.workshop-top .search::before {
  content: "▸";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-ink-sub);
}
.workshop-top .search input {
  width: 100%;
  background: var(--c-bg);
  border-color: transparent;
}

.workshop-top .actions {
  display: flex;
  gap: var(--pad-md);
  align-items: center;
}
.workshop-top .actions button {
  min-height: 28px;
  padding: 2px 8px;
  font-size: var(--fs-sm);
}

.workshop-top .sync-status {
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.workshop-top .sync-status.synced { color: var(--c-ok); border-color: var(--c-ok); }
.workshop-top .sync-status.offline { color: var(--c-warn); border-color: var(--c-warn); }

.workshop-top .badge-count {
  display: inline-block;
  background: var(--c-kagari);
  color: white;
  font-size: var(--fs-xs);
  padding: 0 6px;
  border-radius: 10px;
  margin-left: 4px;
}

/* ---------------- Left: 道具棚 ---------------- */
.workshop-left {
  grid-area: left;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  padding: var(--pad-md) 0;
  overflow-y: auto;
}

.workshop-left .tool-group {
  margin-bottom: var(--pad-lg);
  border-bottom: 1px solid var(--c-line-faint);
}

.workshop-left .tool-group:last-child { border-bottom: none; }

.workshop-left .tool-group-label {
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
  padding: 0 var(--pad-md);
  margin-bottom: var(--pad-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.workshop-left .tool {
  display: block;
  width: 100%;
  padding: var(--pad-sm) var(--pad-md);
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  cursor: pointer;
  min-height: 32px;
}
.workshop-left .tool:hover {
  background: var(--c-sakura-bg);
  border-left-color: var(--c-sakura);
}
.workshop-left .tool.active {
  background: var(--c-sakura-bg);
  border-left-color: var(--c-sakura-dark);
  font-weight: 600;
}
.workshop-left .tool .hotkey {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  margin-right: 4px;
}

/* ---------------- Center: 作業台 ---------------- */
.workshop-center {
  grid-area: center;
  overflow-y: auto;
  padding: var(--pad-lg);
}

/* ---------------- Right: 文脈パネル ---------------- */
.workshop-right {
  grid-area: right;
  background: var(--c-surface);
  border-left: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: var(--pad-md);
  border-bottom: 1px solid var(--c-line-faint);
  display: flex;
  align-items: center;
  gap: var(--pad-sm);
}

.chat-header .fleur-name {
  font-weight: 600;
  font-size: var(--fs-md);
}

.chat-header .fleur-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.chat-body {
  flex: 1;
  padding: var(--pad-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-sub);
  overflow-y: auto;
  line-height: 1.5;
}

.chat-input {
  padding: var(--pad-md);
  border-top: 1px solid var(--c-line-faint);
  display: flex;
  gap: var(--pad-sm);
}
.chat-input input { flex: 1; }

/* ---------------- Bottom: 工程デッキ(3段パイプ) ---------------- */
.workshop-deck {
  grid-area: deck;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  padding: 0 var(--pad-lg);
  gap: var(--pad-xl);
}

.stage {
  display: flex;
  align-items: center;
  gap: var(--pad-sm);
  font-size: var(--fs-sm);
}
.stage.active .stage-label {
  font-weight: 700;
  color: var(--c-sakura-dark);
}
.stage .stage-arrow {
  color: var(--c-ink-faint);
  font-size: var(--fs-lg);
}

.stage-dots {
  display: flex;
  gap: 2px;
}
.stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-line);
  display: inline-block;
}
.stage-dot.done { background: var(--c-ok); }
.stage-dot.current {
  background: var(--c-sakura-dark);
  box-shadow: 0 0 0 2px var(--c-sakura-bg);
}

.stage-tasks {
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
}

/* ---------------- Fleur Wire ---------------- */
.workshop-wire {
  grid-area: wire;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line-faint);
  padding: var(--pad-sm) var(--pad-lg);
  display: flex;
  align-items: center;
  gap: var(--pad-sm);
  font-size: var(--fs-xs);
  color: var(--c-ink-sub);
  overflow-x: auto;
  white-space: nowrap;
}

.wire-label {
  color: var(--c-ink-faint);
  flex-shrink: 0;
}

.wire-timeline {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
  height: 28px;
  position: relative;
  border-top: 1px solid var(--c-line-faint);
  margin-top: 8px;
}

.wire-hour {
  flex: 1;
  position: relative;
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
  padding-left: 4px;
  min-width: 50px;
}
.wire-hour::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 1px;
  height: 4px;
  background: var(--c-line);
}

.wire-event {
  position: absolute;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 2px;
  font-size: var(--fs-xs);
  white-space: nowrap;
  cursor: pointer;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wire-event::before {
  content: "◆";
  font-size: 8px;
  margin-right: 2px;
}

/* Responsive: パネル折畳(タブレット以下) */
@media (max-width: 1100px) {
  .workshop {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr var(--deck-h) var(--wire-h);
    grid-template-areas:
      "top"
      "center"
      "deck"
      "wire";
  }
  .workshop-left, .workshop-right { display: none; }
}