/*
 * Pocket Notes: the sample app of the Material Next documentation. This file
 * stands in for an app's own marketing/ui theme: its palettes as
 * [data-palette] colour roles (light and dark), and the styles of its screens.
 * The marketing hub never styles these; it only sets data-palette and
 * data-theme on the element each screen renders into.
 */

[data-palette='ocean'] {
  --md-sys-color-primary: #006684;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #bde9ff;
  --md-sys-color-on-primary-container: #001f2a;
  --md-sys-color-secondary-container: #cfe6f1;
  --md-sys-color-on-secondary-container: #071e26;
  --md-sys-color-tertiary-container: #e2dfff;
  --md-sys-color-on-tertiary-container: #18164a;
  --md-sys-color-surface: #f6fafd;
  --md-sys-color-surface-container-low: #f0f4f7;
  --md-sys-color-surface-container: #eaeef1;
  --md-sys-color-surface-container-high: #e4e9ec;
  --md-sys-color-surface-container-highest: #dfe3e6;
  --md-sys-color-on-surface: #171c1f;
  --md-sys-color-on-surface-variant: #40484c;
  --md-sys-color-outline: #70787d;
  --md-sys-color-outline-variant: #c0c8cc;
}

[data-palette='ocean'][data-theme='dark'] {
  --md-sys-color-primary: #65d3ff;
  --md-sys-color-on-primary: #003546;
  --md-sys-color-primary-container: #004d64;
  --md-sys-color-on-primary-container: #bde9ff;
  --md-sys-color-secondary-container: #344a53;
  --md-sys-color-on-secondary-container: #cfe6f1;
  --md-sys-color-tertiary-container: #444279;
  --md-sys-color-on-tertiary-container: #e2dfff;
  --md-sys-color-surface: #0f1417;
  --md-sys-color-surface-container-low: #171c1f;
  --md-sys-color-surface-container: #1b2023;
  --md-sys-color-surface-container-high: #262b2e;
  --md-sys-color-surface-container-highest: #313539;
  --md-sys-color-on-surface: #dee3e6;
  --md-sys-color-on-surface-variant: #c0c8cc;
  --md-sys-color-outline: #8a9296;
  --md-sys-color-outline-variant: #40484c;
}

[data-palette='clay'] {
  --md-sys-color-primary: #8f4c38;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffdbd1;
  --md-sys-color-on-primary-container: #3a0b01;
  --md-sys-color-secondary-container: #ffdbd1;
  --md-sys-color-on-secondary-container: #2c150f;
  --md-sys-color-tertiary-container: #fbdfa6;
  --md-sys-color-on-tertiary-container: #251a00;
  --md-sys-color-surface: #fff8f6;
  --md-sys-color-surface-container-low: #fff1ed;
  --md-sys-color-surface-container: #fceae5;
  --md-sys-color-surface-container-high: #f7e4e0;
  --md-sys-color-surface-container-highest: #f1dfda;
  --md-sys-color-on-surface: #231917;
  --md-sys-color-on-surface-variant: #53433f;
  --md-sys-color-outline: #85736e;
  --md-sys-color-outline-variant: #d8c2bc;
}

[data-palette='clay'][data-theme='dark'] {
  --md-sys-color-primary: #ffb5a0;
  --md-sys-color-on-primary: #561f0f;
  --md-sys-color-primary-container: #723523;
  --md-sys-color-on-primary-container: #ffdbd1;
  --md-sys-color-secondary-container: #5d3f36;
  --md-sys-color-on-secondary-container: #ffdbd1;
  --md-sys-color-tertiary-container: #574500;
  --md-sys-color-on-tertiary-container: #fbdfa6;
  --md-sys-color-surface: #1a110f;
  --md-sys-color-surface-container-low: #231917;
  --md-sys-color-surface-container: #271d1b;
  --md-sys-color-surface-container-high: #322825;
  --md-sys-color-surface-container-highest: #3d322f;
  --md-sys-color-on-surface: #f1dfda;
  --md-sys-color-on-surface-variant: #d8c2bc;
  --md-sys-color-outline: #a08c87;
  --md-sys-color-outline-variant: #53433f;
}

/* A screen: 430 x 957 dp by default (1 dp = 1 CSS px), or its window's size. */
.pn-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 430px;
  height: 957px;
  overflow: hidden;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  --md-ref-typeface-brand: 'Google Sans Flex', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Google Sans Flex', system-ui, sans-serif;
}

.pn-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 40px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
}

.pn-status__icons {
  display: flex;
  gap: 4px;
  --md-icon-size: 16px;
}

.pn-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 64px;
  padding: 0 4px 0 16px;
}

.pn-bar--back {
  padding-left: 4px;
}

.pn-bar__title {
  flex: 1;
  min-width: 0;
  font-size: 22px;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pn-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 96px;
  scrollbar-width: none;
}

.pn-chips {
  display: flex;
  gap: 8px;
  padding: 4px 0 16px;
}

.pn-grid {
  display: grid;
  grid-template-columns: repeat(var(--pn-columns, 1), minmax(0, 1fr));
  gap: 12px;
}

.pn-note {
  display: block;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: var(--md-sys-color-surface-container);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pn-note:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.pn-note--pinned {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.pn-note__title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  --md-icon-size: 18px;
}

.pn-note__body {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pn-empty {
  padding: 48px 16px;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

/* Bottom-end of the content, 16 dp above the navigation bar or from the
   window edge beside the rail, as a Scaffold places it. */
.pn-fab {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 16px;
}

.pn-nav {
  display: flex;
  flex-shrink: 0;
  height: 80px;
  background: var(--md-sys-color-surface-container);
}

.pn-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: none;
  color: var(--md-sys-color-on-surface-variant);
  font:
    500 12px/16px 'Google Sans Flex',
    system-ui,
    sans-serif;
  cursor: pointer;
}

.pn-nav__pill {
  display: grid;
  place-items: center;
  width: 64px;
  height: 32px;
  border-radius: 16px;
}

.pn-nav__item[aria-current='page'] {
  color: var(--md-sys-color-on-surface);
}

.pn-nav__item[aria-current='page'] .pn-nav__pill {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.pn-gesture {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 24px;
  background: var(--md-sys-color-surface-container);
}

.pn-gesture--plain {
  background: transparent;
}

.pn-gesture span {
  width: 108px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.8;
}

.pn-buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
  height: 48px;
  padding: 0 48px;
  background: var(--md-sys-color-surface-container);
  --md-icon-size: 20px;
}

.pn-editor h2 {
  margin: 8px 0 12px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
}

.pn-editor p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 24px;
}

.pn-meta {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
}

.pn-focus {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding-top: 32px;
}

.pn-ring {
  width: 240px;
  height: 240px;
}

.pn-ring circle {
  fill: none;
  stroke-width: 16;
}

.pn-ring .pn-ring__track {
  stroke: var(--md-sys-color-surface-container-highest);
}

.pn-ring .pn-ring__value {
  stroke: var(--md-sys-color-primary);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

.pn-time {
  font-size: 57px;
  line-height: 64px;
  font-variant-numeric: tabular-nums;
}

/* Wide windows (600 dp and up): a rail instead of the bottom bar. */
.pn-frame {
  display: flex;
  flex: 1;
  min-height: 0;
}

.pn-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 96px;
  padding-top: 12px;
  background: var(--md-sys-color-surface-container);
}

.pn-rail .pn-nav__item {
  flex: 0;
  padding: 4px 0;
}

.pn-frame__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}