/*
  ZenBanner (TO-49): the slim strip under a report title (A1/U1).

  Its own stylesheet, like tomo-visibility.css. The strip also carries .tomo-face, so every token
  below (and the dark palette under prefers-color-scheme) comes from tomo-face.css; the .tomo-face
  layout rules (a full-height column) are undone here, because the banner is one line in the
  host's page, not a pane.

  Hosts include it after tomo-face.css:
    <link rel="stylesheet" href="_content/Tomo.Face/tomo-banner.css" />
*/

.zen-banner.tomo-face {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: auto;
  min-height: 36px;
  margin: 0;
  padding: var(--tomo-space-2) 14px;
  border: 1px solid color-mix(in srgb, var(--tomo-accent) 28%, transparent);
  border-radius: var(--tomo-radius-sm);
  background: color-mix(in srgb, var(--tomo-accent) 7%, transparent);
  color: var(--tomo-text-primary);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
}

/* The lit, no-briefs and not-connected strips are one button: the whole line is the door. */
button.zen-banner.tomo-face {
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  transition: background var(--tomo-duration-fast) var(--tomo-ease-out),
    border-color var(--tomo-duration-fast) var(--tomo-ease-out);
}

button.zen-banner.tomo-face:hover {
  background: color-mix(in srgb, var(--tomo-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--tomo-accent) 45%, transparent);
}

button.zen-banner.tomo-face:focus-visible {
  outline: 2px solid var(--tomo-accent);
  outline-offset: 2px;
}

.zen-banner__glyph {
  flex: none;
  color: var(--tomo-accent);
}

.zen-banner__brand {
  flex: none;
  font-weight: 700;
}

.zen-banner__dot {
  flex: none;
  color: var(--tomo-text-muted);
  font-weight: 500;
}

/* One line: a long headline ends in an ellipsis, and the hover title carries the whole of it. */
.zen-banner__text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zen-banner__action {
  flex: none;
  margin-left: auto;
  padding-left: var(--tomo-space-3);
  font-weight: 700;
  color: var(--tomo-accent);
}

/* Not connected: the line is a fact, quieter than a headline; Connect stays the loud part. */
.zen-banner--notconnected .zen-banner__text {
  color: var(--tomo-text-secondary);
}

/* No briefs, unavailable: drawn, quiet, never hidden (U1: the empty day is a state). */
.zen-banner--quiet.tomo-face {
  background: transparent;
  border-color: var(--tomo-border-light);
  color: var(--tomo-text-muted);
}

.zen-banner--quiet .zen-banner__glyph {
  color: var(--tomo-text-muted);
}

.zen-banner--quiet .zen-banner__brand {
  color: var(--tomo-text-secondary);
}

/* No briefs is a door too (B12a): the strip stays quiet, and only its action takes the accent. */
button.zen-banner--quiet.tomo-face:hover {
  background: color-mix(in srgb, var(--tomo-accent) 5%, transparent);
  border-color: color-mix(in srgb, var(--tomo-accent) 28%, transparent);
}

/* Loading: the strip without a headline. A short placeholder, no spinner. */
.zen-banner__skeleton {
  display: inline-block;
  width: min(280px, 50%);
  height: 10px;
  border-radius: var(--tomo-radius-full);
  background: linear-gradient(90deg,
      var(--tomo-border-light) 0%,
      color-mix(in srgb, var(--tomo-accent) 14%, transparent) 50%,
      var(--tomo-border-light) 100%);
  background-size: 200% 100%;
  animation: zen-banner-shimmer 1.4s ease-in-out infinite;
}

@keyframes zen-banner-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .zen-banner__skeleton { animation: none; }
  button.zen-banner.tomo-face { transition: none; }
}

/* A phone: the same strip, a touch more room to tap. */
@media (max-width: 600px) {
  .zen-banner.tomo-face { min-height: 40px; padding: var(--tomo-space-2) var(--tomo-space-3); }
}

/* TO-58 (U1): "2 new" beside the headline. A small accent count, not a second headline. */
.zen-banner__count {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-accent);
  color: var(--tomo-surface); /* white on the light accent, near-black on the dark one */
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.zen-banner__mock { flex: none; }