/* system/apps/test-title-bar/styles.css
 *
 * Split out of index.html's shared <style> block (Sept 2026) -- see
 * start-here.md's "Each app owns its own styles.css" note for why.
 *
 * Section B of phone-app-studio-features-plan.md -- isolated proof
 * that ctx.chrome.setTitleBarMode()/getTitleBarMode() and setTitle()
 * are visually correct and independent of each other.
 *
 * This app's title-test field now uses the shared .text-input-base +
 * .text-input-bordered classes (system/lib/shared-app-styles/
 * styles.css) for the floor/reset/border/focus treatment -- only
 * layout stays here.
 */

.test-title-bar-view { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; }

.test-title-bar-state {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand);
}

.test-title-bar-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.test-title-bar-buttons button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.test-title-bar-view input[type="text"] {
  width: 100%;
  padding: 10px 12px;
}