/* agent-day: styles for My day (ag-dy-) and Help (ag-he-); tokens only
   (docs/AGENT_VIEWS.md). Light and dark come from the Lagoon tokens. */

.ag-dy, .ag-he { display: flex; flex-direction: column; gap: 14px; max-width: 960px; margin: 0 auto; }
.ag-dy-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-dy-title { font-size: 26px; font-weight: 900; margin: 0; flex: 1 1 auto; color: var(--text); }
.ag-dy-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-dy-chip {
  min-height: 44px; padding: 6px 18px; border-radius: var(--pill); font-size: 14px; font-weight: 800;
  background: var(--panel); color: var(--text); border: 2px solid var(--border);
}
.ag-dy-chip:hover { border-color: var(--border-strong); }
.ag-dy-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); font-weight: 900; }

/* tiles: 4 across, 2x2 on a phone */
.ag-dy-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ag-dy-tile { background: var(--panel); border-radius: 20px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.ag-dy-tl { font-size: 13px; color: var(--muted); font-weight: 700; }
.ag-dy-tv { font-size: 30px; font-weight: 900; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.ag-dy-ts { font-size: 12.5px; color: var(--muted); font-weight: 700; min-height: 1.3em; overflow-wrap: anywhere; }
.ag-dy-card { padding: 18px 22px; }
.ag-dy-card h2 { font-size: 17px; margin-bottom: 10px; }

/* messages */
.ag-dy-msg { color: var(--muted); font-weight: 700; margin: 0; }
.ag-dy-empty { text-align: center; padding: 22px; }
.ag-dy-empty p { margin: 4px 0 0; }
.ag-dy-etitle { font-size: 18px; font-weight: 900; color: var(--text); }
.ag-dy-warn { margin: 0; color: var(--warn-text); background: var(--warn-soft); border-radius: var(--radius-sm); padding: 8px 14px; font-weight: 700; }
.ag-dy[aria-busy="true"] .ag-dy-tiles { opacity: .6; }

/* outcome bars */
.ag-dy-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ag-dy-bar { display: grid; grid-template-columns: minmax(90px, 140px) 1fr 32px; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; --c: var(--pause); }
.ag-dy-bar[data-tone="ok"] { --c: var(--ok); }
.ag-dy-bar[data-tone="warn"] { --c: var(--warn); }
.ag-dy-bar[data-tone="bad"] { --c: var(--bad); }
.ag-dy-bl { min-width: 0; overflow-wrap: anywhere; }
.ag-dy-track { height: 14px; border-radius: var(--pill); background: var(--panel-2); display: block; overflow: hidden; }
.ag-dy-fill { display: block; height: 100%; border-radius: var(--pill); background: var(--c); }
.ag-dy-bn { text-align: right; }

/* chart */
.ag-dy-svg { display: block; width: 100%; height: auto; max-height: 190px; }
.ag-dy-col { fill: var(--border-strong); }
.ag-dy-col.is-today { fill: var(--accent); }
.ag-dy-col.is-zero { fill: var(--panel-2); stroke: var(--border); stroke-width: 2; }
.ag-dy-val { font-family: var(--mono); font-size: 13px; fill: var(--text); }
.ag-dy-axis { font-family: var(--font); font-size: 13px; font-weight: 700; fill: var(--muted); }
.ag-dy-axis.is-today { fill: var(--accent-strong); font-weight: 900; }

/* feedback */
.ag-dy-fb { background: var(--coral-soft); border-radius: var(--radius); padding: 16px 22px; display: flex; align-items: center; gap: 14px; }
.ag-dy-av { width: 44px; height: 44px; border-radius: 50%; background: var(--coral); color: var(--bg); font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ag-dy-fbt { flex: 1 1 auto; min-width: 0; }
.ag-dy-fbh { font-weight: 900; font-size: 16px; color: var(--coral-text); }
.ag-dy-fbx { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.ag-dy-read { min-height: 44px; padding: 0 20px; flex: 0 0 auto; }

/* ---------- Help ---------- */
.ag-he-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ag-he-card h2 { margin-bottom: 10px; }
.ag-he-card p { margin: 10px 0 0; }
.ag-he-list, .ag-he-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ag-he-tips { list-style: disc; padding-left: 20px; margin-top: 6px; }
.ag-he-row { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.ag-he-keys { min-width: 64px; flex: 0 0 auto; }
.ag-he-row kbd {
  display: inline-block; min-width: 40px; text-align: center; padding: 3px 10px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 2px solid var(--border-strong); font: 800 13px var(--mono); color: var(--text);
}
.ag-he-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.ag-he-btn { min-height: 44px; padding: 8px 20px; }
.ag-he-meter { height: 16px; border-radius: var(--pill); background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.ag-he-fill { display: block; height: 100%; background: var(--ok); transform: scaleX(0); transform-origin: left; transition: transform .08s linear; }
.ag-he-heard { display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: var(--pill); background: var(--ok-soft); color: var(--ok-text); font-weight: 900; }
.ag-he-heard.hidden { display: none; }
.ag-he-msg { color: var(--muted); font-weight: 700; }
.ag-he-msg:empty { display: none; }
.ag-he-msg.is-bad { color: var(--bad-text); }
.ag-he-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.ag-he-kv dt { color: var(--muted); font-weight: 700; }
.ag-he-kv dd { margin: 0; font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.ag-he-val[data-grade="good"] { color: var(--ok-text); }
.ag-he-val[data-grade="fair"] { color: var(--warn-text); }
.ag-he-val[data-grade="poor"], .ag-he-val[data-grade="bad"] { color: var(--bad-text); }
.ag-he .hidden { display: none; }

@media (prefers-reduced-motion: reduce) { .ag-he-fill { transition: none; } }
@media (max-width: 800px) {
  .ag-he-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ag-dy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-dy-tv { font-size: 26px; }
  .ag-dy-card { padding: 16px; }
  .ag-dy-fb { flex-wrap: wrap; padding: 16px; }
  .ag-dy-fbt { flex-basis: calc(100% - 60px); }
  .ag-dy-read { width: 100%; }
  .ag-dy-bar { grid-template-columns: minmax(80px, 110px) 1fr 28px; }
}