/* The frame: the window itself. One bar on top, one stage below it. The bar
   is the only owner of the brand, the switch between the three modes (Agent,
   Safe, Account) and the window controls; the stage holds the view that is
   shown and knows nothing about the bar. */
/* The layout is the same in every language: the document is left to right
   and text aligns to the left edge; only the words inside each text element
   follow their language's direction. */
:root {
  text-align: left;
  font-family: var(--tp-font-sans);
  text-rendering: optimizeLegibility;
  background: var(--tp-canvas);
  color: var(--tp-ink);
}

html,
body {
  block-size: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-size: var(--tp-text-body);
  line-height: var(--tp-leading-body);
}

.tp-frame {
  display: grid;
  grid-template-rows: var(--tp-bar-size) minmax(0, 1fr);
  block-size: 100dvh;
  container: frame / inline-size;
}

/* Bar: three columns. The sides never shrink under their content; the switch
   stays centered while the sides are equal and gives way on a narrow bar. */
.tp-bar {
  --tp-bar-control-height: calc(var(--tp-control-compact) - var(--tp-space-1-5));
  position: relative;
  z-index: var(--tp-z-bar);
  display: grid;
  grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
  align-items: center;
  gap: var(--tp-space-2);
  min-inline-size: 0;
  padding-inline: var(--tp-gutter);
  border-block-end: var(--tp-line-width) solid var(--tp-line);
  background: var(--tp-canvas);
}

.tp-bar-brand {
  grid-column: 1;
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--tp-space-2);
  font-weight: var(--tp-weight-strong);
  letter-spacing: var(--tp-tracking-tight);
}

.tp-bar-mark { block-size: var(--tp-space-6); inline-size: auto; }

.tp-bar-switch { grid-column: 2; place-self: center; block-size: var(--tp-bar-control-height); }

.tp-bar-switch > .tp-tab { min-block-size: 0; }

.tp-bar-end {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--tp-space-3);
}

/* Window controls: three separate quiet buttons, as native windows have
   them; only close warns on hover. They appear only where the platform draws
   no frame of its own and says so with data-window-chrome="custom". */
.tp-window-controls { display: flex; gap: var(--tp-space-0-5); }

:root:not([data-window-chrome="custom"]) .tp-window-controls { display: none; }

.tp-window-controls > .tp-button { border-color: transparent; background: transparent; color: var(--tp-ink-muted); }

.tp-window-controls > .tp-button[data-window-control="close"]:hover { background: var(--tp-danger); color: var(--tp-on-accent); }

.tp-stage { position: relative; min-block-size: 0; overflow: hidden; }

/* A view fills the stage; only the chosen one is shown. */
.tp-view { position: relative; block-size: 100%; min-block-size: 0; }

/* The wrapper's region is bounded by its host, including the Agent's stage. */
.tp-notices {
  position: absolute;
  inset-block-start: var(--tp-space-3);
  inset-inline: 0;
  inline-size: min(38rem, 100% - 2 * var(--tp-space-3));
  max-block-size: calc(100% - 2 * var(--tp-space-3));
  margin-inline: auto;
}

@media (forced-colors: active) {
.tp-bar { background: Canvas; }
}

/* Compact frame: the brand keeps its mark, the switch keeps its icons. */
@container frame (max-width: 40rem) {
.tp-bar-brand > span,
.tp-bar-switch > .tp-tab > span:last-child { display: none; }

.tp-bar-switch > .tp-tab { padding-inline: var(--tp-space-2); }
}

/* Shared Account and Safe settings layout, including compact navigation. */
.tp-settings {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  block-size: 100%;
  min-block-size: 0;
}

.tp-settings-nav {
  grid-column: 1;
  grid-row: 1 / -1;
  padding: var(--tp-space-4) var(--tp-space-3);
  overflow: auto;
  border-inline-end: var(--tp-line-width) solid var(--tp-line);
}

.tp-settings-section {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  align-content: start;
  gap: var(--tp-space-6);
  min-block-size: 0;
  padding: var(--tp-space-6) var(--tp-gutter);
  overflow: auto;
}

.tp-settings-section > * { inline-size: min(var(--tp-content-max), 100%); }

.tp-settings > .tp-notices[data-notice-owner] {
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  inline-size: 100%;
  max-block-size: 40vh;
  padding: var(--tp-space-3) var(--tp-gutter);
  margin: 0;
}
.tp-settings > .tp-flow { grid-column: 1 / -1; grid-row: 2; }

/* Compact frame: the sections become one scrolling row above the section. */
@container frame (max-width: 40rem) {
.tp-settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }

.tp-settings-nav { grid-column: 1; grid-row: 1; }
.tp-settings > .tp-notices[data-notice-owner] { grid-column: 1; grid-row: 2; }
.tp-settings-section, .tp-settings > .tp-flow { grid-column: 1; grid-row: 3; }

.tp-settings-nav { padding: var(--tp-space-2) var(--tp-gutter); border-inline-end: 0; border-block-end: var(--tp-line-width) solid var(--tp-line); }

.tp-settings-nav > .tp-nav { display: flex; overflow-x: auto; scrollbar-width: none; }

.tp-settings-nav .tp-nav-item { inline-size: auto; }
}

.tp-settings-details { display: grid; gap: var(--tp-space-4); margin: 0; }
.tp-settings-details > div { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr); gap: var(--tp-space-3); align-items: center; }
.tp-settings-details dt { color: var(--tp-ink-muted); }
.tp-settings-details dd { margin: 0; overflow-wrap: anywhere; }
.tp-settings-fields { display: grid; gap: var(--tp-space-4); margin: 0; padding: 0; border: 0; }
.tp-settings-actions { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); }
.tp-settings-section > .tp-button, .tp-settings-fields > .tp-button { inline-size: auto; justify-self: start; }
@container frame (max-width: 40rem) {
.tp-settings-details > div { grid-template-columns: minmax(0, 1fr); gap: var(--tp-space-1); }
}

.tp-settings-section h2 { font-size: var(--tp-text-title); font-weight: var(--tp-weight-strong); letter-spacing: var(--tp-tracking-tight); }
.tp-settings-fields .tp-tabs { justify-self: start; }