@font-face {
  font-family: Caveat;
  src: url('/static/fonts/caveat.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.field-notes-icon,
.field-notes-only,
.mobile-nav .field-notes-calendar-tab { display: none; }

:root[data-app-style="field-notes"] {
  --canvas: #fbf9f4;
  --surface: #fffdf8;
  --shell: #f2eee6;
  --sidebar: #f7f3eb;
  --subtle: #f0ebe2;
  --line: #d6cec0;
  --text: #292523;
  --secondary: #5e554d;
  --hover: #f3ebe0;
  --selected: #f9e7d8;
  --incoming: #fffdf8;
  --outgoing: #fce9da;
  --identity: #aa411b;
  --avatar-bg: #f2e9db;
  --avatar-text: #3a302b;
  --journal: #f8f4ec;
  --rail: #f3eee4;
  --rail-ink: #554c44;
  --rail-current: #292523;
  --graph-line: #e5dfd3;
  --notebook-edge: #a99b8b;
  --ink-outline: #4d443d;
  --paper-rule: #eae4db;
  --pencil: #a73d17;
  --pencil-stroke: #c75526;
  --notebook-font: Caveat, "Segoe Print", "Bradley Hand", cursive;
  --interface-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-app-style="field-notes"][data-theme="dark"] {
  --canvas: #202123;
  --surface: #262729;
  --shell: #191a1c;
  --sidebar: #222325;
  --subtle: #2e3033;
  --line: #4a4d51;
  --text: #f2f2f0;
  --secondary: #bec0c2;
  --hover: #323437;
  --selected: #393c40;
  --incoming: #292b2e;
  --outgoing: #373a3e;
  --identity: #c8cbd0;
  --avatar-bg: #37393c;
  --avatar-text: #f2f2f0;
  --journal: #27282a;
  --rail: #1c1d1f;
  --rail-ink: #c4c6c9;
  --rail-current: #f2f2f0;
  --graph-line: #3f4245;
  --notebook-edge: #66696d;
  --ink-outline: #aaadb0;
  --paper-rule: #35373a;
  --pencil: #f3a573;
  --pencil-stroke: #de8b56;
}

:root[data-app-style="field-notes"] {
  --notebook-action: #363029;
  --notebook-action-text: #fffdf8;
  --action: var(--notebook-action);
  --action-text: var(--notebook-action-text);
}
:root[data-app-style="field-notes"][data-theme="dark"] {
  --notebook-action: #d4d7da;
  --notebook-action-text: #202123;
  --action: var(--notebook-action);
  --action-text: var(--notebook-action-text);
}

[data-app-style="field-notes"] .classic-icon { display: none; }
[data-app-style="field-notes"] .field-notes-icon { display: inline; }
[data-app-style="field-notes"] .mobile-nav .field-notes-calendar-tab { display: flex; }

[data-app-style="field-notes"] :is(.bubble, .message.own .bubble, .compose textarea, .message-label, .message-time) {
  font-family: var(--interface-font);
}
[data-app-style="field-notes"] :is(.bubble, .message.own .bubble) {
  position: relative;
  border: 1.5px solid var(--ink-outline);
  border-radius: 12px 10px 13px 4px / 9px 13px 11px 5px;
  box-shadow: none;
}
[data-app-style="field-notes"] .message.own .bubble {
  border-radius: 11px 13px 4px 12px / 12px 9px 5px 11px;
}
[data-app-style="field-notes"] .message.grouped .bubble {
  border-top-left-radius: 5px;
}
[data-app-style="field-notes"] .message.grouped.own .bubble {
  border-top-left-radius: 11px;
  border-top-right-radius: 5px;
}
[data-app-style="field-notes"] :is(.compose-field, .btn, dialog) {
  border-radius: 8px 6px 9px 6px;
}
[data-app-style="field-notes"] .compose-field { border-color: var(--notebook-edge); }
[data-app-style="field-notes"] .compose-send {
  background: var(--outgoing);
  color: var(--pencil);
  border: 1px solid var(--notebook-edge);
}
[data-app-style="field-notes"] .notebook-unread {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 15px;
  color: var(--pencil);
  font: 700 20px/1.2 var(--notebook-font);
  white-space: nowrap;
}
[data-app-style="field-notes"] .notebook-unread::before,
[data-app-style="field-notes"] .notebook-unread::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 45% 35% 50% 45%;
  background: var(--pencil-stroke);
  transform: rotate(-.35deg);
  opacity: .75;
}

[data-app-style="field-notes"] :is(.top-bar, .thread-top, .session-recorder-toolbar, .mobile-nav, .side-nav) {
  border-color: var(--notebook-edge);
}
[data-app-style="field-notes"] .session-recorder-toolbar {
  box-shadow: inset 0 -1px var(--line);
}
[data-app-style="field-notes"] :is(.mobile-nav button.active, .mobile-nav button.active svg, .nav-button.active .nav-icon) {
  color: var(--pencil);
}
[data-app-style="field-notes"] .mobile-nav button.active {
  position: relative;
  background: transparent;
}
[data-app-style="field-notes"] .mobile-nav button.active::after {
  content: "";
  position: absolute;
  inset: auto 22% 1px;
  height: 2px;
  border-radius: 65% 25% 40% 35%;
  background: var(--pencil-stroke);
  transform: rotate(-2deg);
}
[data-app-style="field-notes"] .nav-button.active {
  background: var(--selected);
  box-shadow: inset 2px 0 var(--pencil-stroke);
}

[data-app-style="field-notes"] :is(.thread-list-head h2, .calendar-masthead h2, .calendar-month-toolbar h3,
  .story-header h1, .story-section-heading h2, .wiki-masthead h3) {
  font-family: var(--notebook-font);
  font-weight: 700;
  line-height: 1.08;
}
[data-app-style="field-notes"] :is(.thread-list-head h2, .calendar-masthead h2, .story-section-heading h2, .wiki-masthead h3) {
  font-size: clamp(29px, 4vw, 38px);
}
[data-app-style="field-notes"] :is(.recap-card-kind, .wiki-eyebrow, .session-reminder-eyebrow) {
  background: var(--subtle);
  color: var(--pencil);
}
[data-app-style="field-notes"][data-paper="graph"] .story-header {
  background-image: none;
  background-color: var(--journal);
}
[data-app-style="field-notes"] :is(.notebook-featured-recap, .recap-player, .wiki-library-card, .context-recap, .hero-card) {
  border: 1px solid var(--notebook-edge);
  border-radius: 9px 7px 8px 5px;
  background-color: var(--journal);
}
[data-app-style="field-notes"] .notebook-featured-recap {
  position: relative;
  padding: 22px 23px 21px 33px;
  margin: 10px 0 17px;
  background-image:
    linear-gradient(to right, transparent 22px, var(--pencil-stroke) 22px, var(--pencil-stroke) 23px, transparent 23px),
    repeating-linear-gradient(to bottom, transparent 0 21px, var(--paper-rule) 21px 22px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
[data-app-style="field-notes"][data-theme="dark"] .notebook-featured-recap::after,
[data-app-style="field-notes"][data-theme="dark"] .calendar-month-toolbar > div:first-child::after,
[data-app-style="field-notes"][data-theme="dark"] .notebook-header-mark {
  filter: drop-shadow(0 0 1px #e2e4e6) drop-shadow(0 0 1px #c0c3c7);
}
[data-app-style="field-notes"] .notebook-featured-recap .story-row-meta { padding-right: 49px; }
[data-app-style="field-notes"] .notebook-featured-recap::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 57px;
  height: 65px;
  background: url('/static/field-notes-lantern.png') center / contain no-repeat;
  pointer-events: none;
}
[data-app-style="field-notes"] .notebook-recap-audio {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  color: var(--pencil);
  font: 700 21px/1.25 var(--notebook-font);
}
[data-app-style="field-notes"] .notebook-recap-audio audio {
  width: min(100%, 420px);
  height: 40px;
}

[data-app-style="field-notes"] .calendar-month-panel { border-color: var(--notebook-edge); }
[data-app-style="field-notes"] .calendar-day { border-color: var(--graph-line); }
[data-app-style="field-notes"] .calendar-day.is-next-event .calendar-day-number {
  position: relative;
  color: var(--pencil);
  background: var(--surface);
  font-weight: 700;
}
[data-app-style="field-notes"] .calendar-day.is-next-event .calendar-day-number::after {
  content: "";
  position: absolute;
  inset: -2px -3px;
  border: 2px solid var(--pencil-stroke);
  border-radius: 53% 45% 49% 42%;
  transform: rotate(-9deg);
  pointer-events: none;
}
[data-app-style="field-notes"] .calendar-notebook-rsvp {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--notebook-edge);
  border-radius: 6px 4px 6px 5px;
  background: var(--selected);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}
[data-app-style="field-notes"] .calendar-next-summary button {
  border-left-color: var(--pencil-stroke);
}

/* The chat thread uses the same ink edges and pencil rules as the handout. */
[data-app-style="field-notes"] .message:not(.grouped):not(.party-welcome):not(.has-shared-quote) .bubble::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 13px;
  left: -5px;
  width: 8px;
  height: 8px;
  border: solid var(--ink-outline);
  border-width: 0 0 1.5px 1.5px;
  background: var(--incoming);
  transform: rotate(45deg) skew(-7deg, 5deg);
  pointer-events: none;
}
[data-app-style="field-notes"] .message.own:not(.grouped):not(.has-shared-quote) .bubble::before {
  left: auto;
  right: -5px;
  border-width: 1.5px 1.5px 0 0;
  background: var(--outgoing);
}
[data-app-style="field-notes"] .message-label { gap: 7px; color: var(--text); }
[data-app-style="field-notes"] .notebook-chat-time {
  display: inline;
  font-size: 10px;
  color: var(--secondary);
  white-space: nowrap;
}
[data-app-style="field-notes"] .message:not(.grouped) .message-meta .message-time { display: none; }
[data-app-style="field-notes"] .compose-field { border: 1.5px solid var(--ink-outline); }
[data-app-style="field-notes"] .compose-send { background: transparent; border: 0; }
[data-app-style="field-notes"] .compose-send svg { stroke-width: 1.9px; }

[data-app-style="field-notes"] :is(.session-recorder-toolbar, .thread-top, .mobile-nav) {
  position: relative;
  box-shadow: none;
}
[data-app-style="field-notes"] :is(.session-recorder-toolbar, .thread-top, .mobile-nav)::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -2px;
  height: 4px;
  background-color: var(--ink-outline);
  mask: url('/static/field-notes-ink.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
[data-app-style="field-notes"] .mobile-nav::after { bottom: auto; top: -2px; }
[data-app-style="field-notes"] .mobile-nav { background: var(--surface); }

[data-app-style="field-notes"] .notebook-featured-recap { border: 1.5px solid var(--ink-outline); }
[data-app-style="field-notes"] .notebook-featured-recap::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 20px;
  left: -5px;
  width: 10px;
  background: radial-gradient(circle at 5px 6px, var(--canvas) 3.1px, var(--ink-outline) 3.3px 4.3px, transparent 4.6px) 0 0 / 10px 45px repeat-y;
  pointer-events: none;
}
[data-app-style="field-notes"] .notebook-featured-recap .story-title-button {
  font-family: var(--interface-font);
  font-size: clamp(21px, 4.5vw, 30px);
  font-weight: 760;
  line-height: 1.15;
}
[data-app-style="field-notes"] .notebook-featured-recap h3 { margin: 10px 0 12px; }
[data-app-style="field-notes"] .notebook-featured-recap .story-row-meta + h3 { padding-right: 54px; }
[data-app-style="field-notes"] .notebook-featured-recap .story-row-meta > span:nth-child(2) {
  font: 700 21px/1.1 var(--notebook-font);
  color: var(--pencil);
}
[data-app-style="field-notes"] .notebook-featured-recap .story-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  color: var(--text);
  font: 400 15px/1.55 var(--interface-font);
}
[data-app-style="field-notes"] .notebook-play-recap {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 40px;
  padding: 3px 4px 3px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: 750 16px/1.25 var(--interface-font);
  cursor: pointer;
}
[data-app-style="field-notes"] .notebook-play-recap svg { color: var(--pencil); flex: none; }
[data-app-style="field-notes"] .notebook-recap-audio [hidden] { display: none; }

[data-app-style="field-notes"] .calendar-month-toolbar > div:first-child::after {
  content: "";
  width: 57px;
  height: 42px;
  margin-left: 5px;
  background: url('/static/field-notes-dice.png') center / contain no-repeat;
}
[data-app-style="field-notes"] .calendar-month-toolbar h3 {
  text-decoration: underline;
  text-decoration-color: var(--pencil-stroke);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
[data-app-style="field-notes"] .calendar-month-panel { border: 1.5px solid var(--ink-outline); }
[data-app-style="field-notes"] .calendar-day-number { font-size: 13px; }
[data-app-style="field-notes"] .calendar-next-summary button {
  border: 1.5px solid var(--ink-outline);
  border-radius: 11px 8px 10px 7px;
}
[data-app-style="field-notes"] .calendar-next-summary small {
  color: var(--pencil);
  font: 700 23px/1.08 var(--notebook-font);
}
[data-app-style="field-notes"] .calendar-next-summary time {
  font-weight: 650;
  color: var(--text);
}
@media(max-width:690px) {
  [data-app-style="field-notes"] #calendarNextSummary { display: none; }
  [data-app-style="field-notes"] #calendarNextSummaryMobile:not(:empty) {
    display: block;
    margin: 12px;
  }
  [data-app-style="field-notes"] .calendar-month-toolbar > div:first-child { max-width: 100%; }
  [data-app-style="field-notes"] .session-play-latest.btn,
  [data-app-style="field-notes"] .session-recaps-fallback {
    height: 42px;
    min-height: 42px;
    align-self: center;
    flex-direction: row;
    gap: 3px;
    width: auto;
    border: 1.3px solid var(--ink-outline);
    border-radius: 7px 5px 8px 5px;
    padding: 4px 6px;
  }
  [data-app-style="field-notes"] .session-play-latest.btn svg,
  [data-app-style="field-notes"] .session-recaps-fallback svg { width: 14px; height: 14px; }
}

/* The phone layout follows the notebook pages in the design study. */
[data-app-style="field-notes"] .message:not(.party-welcome) { position: relative; }
[data-app-style="field-notes"] .message:not(.own):not(.party-welcome) { margin-inline-start: 31px; }
[data-app-style="field-notes"] .message > .chat-sender-avatar {
  --sender-avatar-offset: -34px;
  --sender-avatar-size: 26px;
  border: 1.4px solid var(--ink-outline);
  border-radius: 48% 52% 51% 46%;
  background: var(--surface);
  color: var(--text);
}
[data-app-style="field-notes"] .chat-profile-card {
  border-color: var(--ink-outline);
  border-radius: 12px 14px 11px 15px / 15px 11px 14px 12px;
}
[data-app-style="field-notes"] .chat-profile-character {
  font: 700 1.6rem/1.05 var(--notebook-font);
}
[data-app-style="field-notes"] .message-label {
  min-height: 18px;
  margin-bottom: 4px;
}
[data-app-style="field-notes"] .notebook-extra-week { display: none; }

@media(max-width:690px) {
  [data-app-style="field-notes"] .session-recorder-toolbar.notebook-section-header #sessionMobileTitle {
    font: 700 42px/1 var(--notebook-font);
    letter-spacing: 0;
  }
  [data-app-style="field-notes"] .notebook-section-header :is(.session-header-meta,#latestRecapAction) { display: none; }
  [data-app-style="field-notes"] .recap-library {
    display: flex;
    flex-direction: column;
  }
  [data-app-style="field-notes"] .recap-library > .story-section-heading > div { display: none; }
  [data-app-style="field-notes"] .recap-library > .story-section-heading:not(:has(button)) { display: none; }
  [data-app-style="field-notes"] .recap-library > .story-tabs { order: 2; margin-top: 16px; }
  [data-app-style="field-notes"] .recap-library > .recap-settings-link { order: 3; }
  [data-app-style="field-notes"] .campaign-calendar > :is(.calendar-masthead,.calendar-zone,#calendarReminderSettings) { display: none; }
  [data-app-style="field-notes"] .campaign-calendar .calendar-month-panel { border: 0; }
  [data-app-style="field-notes"] .campaign-calendar .calendar-weekdays { background: var(--surface); }
  [data-app-style="field-notes"] .campaign-calendar .calendar-day.outside-month { background: var(--surface); }
}

/* The phone views share a paper surface, with ink reserved for structure. */
:root[data-app-style="field-notes"]:not([data-theme="dark"]) {
  --canvas: #faf7f0;
  --surface: #faf7f0;
  --incoming: #fcf9f3;
  --outgoing: #fcead6;
  --ink-outline: #302820;
  --graph-line: #dcd4c8;
  --pencil: #ab3a09;
  --pencil-stroke: #ce5418;
}

@media (max-width: 690px) {
  [data-app-style="field-notes"] :is(.content,.message-scroll,.threads,.compose textarea) {
    scrollbar-width: none;
  }
  [data-app-style="field-notes"] :is(.content,.message-scroll,.threads,.compose textarea)::-webkit-scrollbar {
    display: none;
  }
  [data-app-style="field-notes"] .mobile-nav {
    min-height: calc(71px + env(safe-area-inset-bottom));
    padding: 5px 10px calc(7px + env(safe-area-inset-bottom));
    border-top: 0;
  }
  [data-app-style="field-notes"] .mobile-nav::after { inset-inline: 0; opacity: .66; }
  [data-app-style="field-notes"] .mobile-nav button {
    gap: 3px;
    color: var(--text);
    font-family: var(--interface-font);
  }
  [data-app-style="field-notes"] .mobile-nav button svg { width: 29px; height: 29px; }
  [data-app-style="field-notes"] .app-shell .mobile-nav .mobile-tab-label { font-size: 11px; }
  [data-app-style="field-notes"] .mobile-nav button.active { color: var(--text); }
  [data-app-style="field-notes"] .mobile-nav button.active svg { color: var(--pencil); }
  [data-app-style="field-notes"] .mobile-nav button.active::after {
    inset-inline: 15%;
    bottom: -1px;
    height: 2.5px;
    transform: rotate(-.6deg);
  }
  [data-app-style="field-notes"] .session-recorder-toolbar:is(.notebook-party-header,.notebook-section-header) {
    padding: calc(5px + env(safe-area-inset-top)) 12px 5px;
    border: 0;
  }
  [data-app-style="field-notes"] .session-recorder-toolbar.notebook-party-header .session-audio-row {
    min-height: 72px;
    gap: 5px;
  }
  [data-app-style="field-notes"] .session-recorder-toolbar.notebook-section-header .session-audio-row {
    min-height: 65px;
  }
  [data-app-style="field-notes"] .session-recorder-toolbar.notebook-section-header #sessionMobileTitle {
    padding-inline-start: 5px;
  }
  [data-app-style="field-notes"] .notebook-party-header #sessionMobileBack {
    width: 64px;
    height: 67px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  [data-app-style="field-notes"] .notebook-party-header #sessionMobileBack > svg { display: none; }
  [data-app-style="field-notes"] .notebook-party-header .notebook-header-mark {
    display: block;
    flex: none;
    width: 81px;
    height: 81px;
    max-width: none;
  }
  [data-app-style="field-notes"] .notebook-party-header .session-header-center {
    position: relative;
    padding: 0 2px 0 10px;
    background: none;
  }
  [data-app-style="field-notes"] .notebook-party-header .session-header-center::before {
    content: "";
    position: absolute;
    inset: 2px auto 1px 0;
    width: 1.5px;
    background: var(--ink-outline);
    border-radius: 50% 45% 28% 50%;
    transform: rotate(.6deg);
  }
  [data-app-style="field-notes"] .notebook-party-header #sessionMobileTitle {
    font: 760 clamp(15px,4.3vw,20px)/1.18 var(--interface-font);
    letter-spacing: -.035em;
  }
  [data-app-style="field-notes"] .notebook-party-header #sessionMobilePartyLabel { display: none; }
  [data-app-style="field-notes"] .notebook-party-header .session-mobile-meeting {
    font-size: 14px;
    line-height: 1.4;
  }
  [data-app-style="field-notes"] .notebook-party-header :is(.session-play-latest,.session-recaps-fallback) {
    height: 37px;
    min-height: 37px;
    padding: 0 8px 0 6px;
    border-radius: 9px 7px 8px 7px;
    gap: 3px;
  }
  [data-app-style="field-notes"] .notebook-party-header .session-recap-standard-icon { display: none; }
  [data-app-style="field-notes"] .notebook-party-header .session-recap-notebook-icon { display: inline-flex; }
  [data-app-style="field-notes"] .notebook-party-header .session-recap-notebook-icon svg { width: 20px; height: 21px; }
  [data-app-style="field-notes"] .notebook-party-header :is(.session-mobile-recap-label,.session-recaps-fallback > span:last-child) {
    font-size: 12px;
    font-weight: 680;
  }
  [data-app-style="field-notes"] #sessionMobileControls { width: 33px; padding: 0; }
  [data-app-style="field-notes"] #sessionMobileControls svg { width: 25px; height: 25px; fill: currentColor; }

  [data-app-style="field-notes"] .message-scroll { padding: 15px 19px 12px; }
  [data-app-style="field-notes"] .message-scroll .message:not(.party-welcome) {
    align-self: flex-start;
    width: fit-content;
    max-width: min(calc(100% - 66px), 32rem);
    margin: 0 0 25px 57px;
  }
  [data-app-style="field-notes"] .message-scroll .message.own {
    align-self: flex-end;
    max-width: min(calc(100% - 113px), 32rem);
    margin-inline-start: 0;
  }
  [data-app-style="field-notes"] .message-scroll .message.grouped {
    margin-top: -17px;
  }
  [data-app-style="field-notes"] .message-scroll .message:not(.party-welcome) > .bubble {
    padding: 8px 14px 10px;
    border-width: 1.7px;
    border-radius: 14px 12px 15px 12px / 13px 15px 12px 14px;
    font: 400 17px/1.29 var(--interface-font);
    letter-spacing: -.017em;
  }
  [data-app-style="field-notes"] .message-scroll .bubble p { line-height: inherit; }
  [data-app-style="field-notes"] .message-scroll .message:not(.grouped):not(.party-welcome):not(.has-shared-quote) .bubble::before {
    top: 16px;
    left: -7px;
    right: auto;
    width: 11px;
    height: 11px;
    border-width: 0 0 1.7px 1.7px;
    transform: rotate(44deg) skew(-7deg,5deg);
  }
  [data-app-style="field-notes"] .message-scroll .message:not(.party-welcome) > .message-label {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    min-height: 19px;
    margin: 0 0 4px 3px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
  }
  [data-app-style="field-notes"] .message-scroll .message-label > span { color: var(--text); }
  [data-app-style="field-notes"] .message-scroll .gm-badge {
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
  }
  [data-app-style="field-notes"] .message-scroll .gm-badge::before { content: "("; }
  [data-app-style="field-notes"] .message-scroll .gm-badge::after { content: ")"; }
  [data-app-style="field-notes"] .message > .chat-sender-avatar {
    --sender-avatar-offset: -57px;
    --sender-avatar-size: 44px;
    border-width: 1.7px;
    font-size: 17px;
  }
  [data-app-style="field-notes"] .message-scroll .notebook-chat-time {
    font-size: 11px;
    font-weight: 450;
  }
  [data-app-style="field-notes"] .message-scroll .make-canon { opacity: 1; min-height: 33px; }
  [data-app-style="field-notes"] .message-scroll .notebook-unread { margin: 0 0 24px; }
  [data-app-style="field-notes"] .message-scroll .notebook-unread::before,
  [data-app-style="field-notes"] .message-scroll .notebook-unread::after {
    background: var(--pencil-stroke);
    mask: url('/static/field-notes-ink.svg') center / 100% 100% no-repeat;
    height: 4px;
  }
  [data-app-style="field-notes"] .compose {
    display: grid;
    grid-template-columns: minmax(0,1fr) 45px;
    align-items: end;
    flex: none;
    gap: 0;
    min-height: 45px;
    margin: 1px 17px 12px;
    padding: 0 3px 0 13px;
    border: 1.7px solid var(--ink-outline);
    border-radius: 11px 9px 12px 10px / 9px 12px 9px 10px;
    background: var(--surface);
  }
  [data-app-style="field-notes"] .compose :is(.compose-identity,.compose-action,.compose-dice) { display: none; }
  [data-app-style="field-notes"] .compose-field {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  [data-app-style="field-notes"] .compose-field:focus-within { box-shadow: none; }
  [data-app-style="field-notes"] .compose:focus-within { border-color: var(--pencil); }
  [data-app-style="field-notes"] .compose textarea {
    display: block;
    min-height: 43px;
    height: 43px;
    padding: 9px 0;
    resize: none;
    font-size: 16px;
    line-height: 24px;
  }
  [data-app-style="field-notes"] .compose-send { border-radius: 5px; }
  [data-app-style="field-notes"] .compose-send:disabled { opacity: .72; }
  [data-app-style="field-notes"] .compose-send svg { width: 29px; height: 29px; }

  [data-app-style="field-notes"] .campaign-calendar .calendar-layout { gap: 6px; }
  [data-app-style="field-notes"] .campaign-calendar .calendar-month-panel {
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  [data-app-style="field-notes"] .calendar-month-toolbar {
    display: block;
    padding: 0 0 8px;
  }
  [data-app-style="field-notes"] .calendar-month-toolbar > div:first-child {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) 30px minmax(53px,24%);
    min-height: 59px;
    gap: 3px;
    padding: 0 1px;
  }
  [data-app-style="field-notes"] .calendar-month-toolbar > div:first-child::after {
    width: 100%;
    height: 64px;
    margin: 0;
    background-size: 138% auto;
  }
  [data-app-style="field-notes"] .calendar-month-toolbar .icon-btn {
    height: 44px;
    color: var(--text);
  }
  [data-app-style="field-notes"] .calendar-month-toolbar .icon-btn svg { width: 24px; height: 24px; }
  [data-app-style="field-notes"] .calendar-month-toolbar h3 {
    min-width: 0;
    text-align: center;
    text-decoration: none;
  }
  [data-app-style="field-notes"] .calendar-month-long,
  [data-app-style="field-notes"] .calendar-weekday-long { display: none; }
  [data-app-style="field-notes"] .calendar-month-name {
    display: inline-block;
    position: relative;
    max-width: 100%;
    padding: 0 4px 5px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: 750 clamp(25px,7.3vw,36px)/1 var(--notebook-font);
    white-space: normal;
    cursor: pointer;
  }
  [data-app-style="field-notes"] :is(.calendar-month-name,#calendarNextSummaryMobile small)::after {
    content: "";
    position: absolute;
    inset: auto 1px -1px 0;
    height: 4px;
    background: var(--pencil-stroke);
    mask: url('/static/field-notes-ink.svg') center / 100% 100% no-repeat;
    pointer-events: none;
  }
  [data-app-style="field-notes"] #calendarMonthTools:not(.notebook-tools-open) { display: none; }
  [data-app-style="field-notes"] #calendarMonthTools { justify-content: center; padding: 8px 0 2px; }
  [data-app-style="field-notes"] #calendarMonthTools input { min-height: 44px; }
  [data-app-style="field-notes"] .campaign-calendar .calendar-weekdays,
  [data-app-style="field-notes"] .campaign-calendar .calendar-days {
    background: repeating-linear-gradient(to right,transparent 0 calc(100% - 1px),var(--graph-line) calc(100% - 1px) 100%) 0 / calc(100% / 7) 100%;
  }
  [data-app-style="field-notes"] .calendar-weekdays {
    border: 0;
    border-bottom: 1px solid var(--graph-line);
  }
  [data-app-style="field-notes"] .calendar-weekdays span { padding: 7px 0; }
  [data-app-style="field-notes"] .calendar-weekday-short {
    display: inline;
    color: var(--text);
    font: 500 15px/1.2 var(--interface-font);
  }
  [data-app-style="field-notes"] .calendar-day {
    position: relative;
    justify-content: center;
    gap: 0;
    min-height: clamp(40px,11.4vw,54px);
    padding: 0;
    background: transparent;
    border-inline-end: 0;
  }
  [data-app-style="field-notes"] .campaign-calendar .calendar-day.outside-month {
    background: transparent;
    pointer-events: none;
  }
  [data-app-style="field-notes"] .calendar-day.outside-month > span { visibility: hidden; }
  [data-app-style="field-notes"] .calendar-day.selected-day { box-shadow: none; }
  [data-app-style="field-notes"] .calendar-day-number {
    width: 28px;
    height: 25px;
    background: transparent;
    color: var(--text);
    font: 500 17px/1 var(--interface-font);
  }
  [data-app-style="field-notes"] .calendar-day.is-today .calendar-day-number {
    background: transparent;
    color: var(--text);
    font-weight: 650;
  }
  [data-app-style="field-notes"] .calendar-day.selected-day:not(.is-today):not(.is-next-event) .calendar-day-number {
    background: var(--selected);
  }
  [data-app-style="field-notes"] .calendar-day.is-next-event .calendar-day-number::after {
    inset: -6px -10px -6px -8px;
    border-width: 2.5px;
    transform: rotate(-10deg);
  }
  [data-app-style="field-notes"] .calendar-day-dots {
    position: absolute;
    bottom: 5px;
  }
  [data-app-style="field-notes"] .calendar-day.is-next-event .calendar-day-dots { display: none; }
  [data-app-style="field-notes"] #calendarNextSummaryMobile:not(:empty) { margin: 20px 0 7px; }
  [data-app-style="field-notes"] #calendarNextSummaryMobile button {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 12px 8px;
    min-height: 115px;
    padding: 10px 13px 13px;
    background: transparent;
    border-width: 1.7px;
    border-radius: 14px 10px 14px 11px / 11px 15px 12px 15px;
  }
  [data-app-style="field-notes"] #calendarNextSummaryMobile small {
    position: relative;
    grid-column: 1 / -1;
    justify-self: start;
    padding-bottom: 3px;
    font-size: 30px;
  }
  [data-app-style="field-notes"] .calendar-notebook-event-date {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  [data-app-style="field-notes"] .calendar-notebook-event-date svg { flex: none; }
  [data-app-style="field-notes"] #calendarNextSummaryMobile time {
    min-width: 0;
    font: 720 clamp(13px,4vw,17px)/1.2 var(--interface-font);
  }
  [data-app-style="field-notes"] #calendarNextSummaryMobile .calendar-notebook-rsvp {
    gap: 4px;
    min-height: 35px;
    padding: 4px 9px;
    border-color: var(--pencil-stroke);
    background: var(--outgoing);
    font-size: 13px;
  }
  [data-app-style="field-notes"] #calendarLoadStatus:empty,
  [data-app-style="field-notes"] .calendar-day-agenda:not(.notebook-day-open) { display: none; }
  [data-app-style="field-notes"] .calendar-upcoming {
    padding: 0;
    border: 0;
    background: transparent;
  }

}

@media (max-width: 359px) {
  [data-app-style="field-notes"] .notebook-party-header #sessionMobileBack { width: 51px; }
  [data-app-style="field-notes"] .notebook-party-header .notebook-header-mark { width: 72px; height: 72px; }
  [data-app-style="field-notes"] .message-scroll { padding-inline: 15px; }
  [data-app-style="field-notes"] .message-scroll .message.own { max-width: calc(100% - 94px); }
  [data-app-style="field-notes"] .calendar-notebook-event-date svg { width: 22px; }
}

/* Campaign presence is shared by Field Notes and Classic. */
.presence-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 34px;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--secondary);
  font: 650 11px/1 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.presence-button:hover { background: var(--hover); }
.presence-button:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.presence-dot {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28784b;
}
[data-theme="dark"] .presence-dot { background: #82ca9a; }
.presence-button[data-connected="false"] .presence-dot { background: var(--secondary); }
.presence-person {
  display: grid;
  grid-template-columns: 8px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.presence-person small { color: var(--secondary); }
.presence-person strong { overflow-wrap: anywhere; }
#notebookMobileArt { display: none; }
.mobile-tab-label :is(.classic-icon,.field-notes-icon) { font: inherit; color: inherit; }
[data-app-style="field-notes"] .campaign-appearance-preview[data-accent] {
  --action: var(--notebook-action);
  --action-text: var(--notebook-action-text);
  --identity: var(--pencil);
}

[data-app-style="field-notes"] .content:not(.chat-content) {
  background: var(--canvas) url('/static/paper-grain.svg');
}
[data-app-style="field-notes"] :is(.top-bar h1,.campaign-home-heading h2,.campaign-art-library h2,.assistant-heading h1,
  .assistant-welcome h2,.shop-page .section-header h2,.dice-page .section-header h2,.modal-head h2,.unassigned-characters h3) {
  color: var(--text);
  font-family: var(--notebook-font);
  letter-spacing: 0;
}
[data-app-style="field-notes"] :is(.campaign-home-heading h2,.assistant-heading h1,.shop-page .section-header h2,
  .dice-page .section-header h2) {
  font-size: clamp(30px,5vw,43px);
  font-weight: 700;
  line-height: 1.06;
}
[data-app-style="field-notes"] :is(.modal-head h2,.assistant-welcome h2,.campaign-overview-note h3) {
  font-size: 29px;
}
[data-app-style="field-notes"] :is(.top-bar,.campaign-home-heading,.assistant-heading,.shop-page .section-header,
  .dice-page .section-header,.story-section-heading,.wiki-masthead,.modal-head) {
  position: relative;
}
[data-app-style="field-notes"] :is(.top-bar,.campaign-home-heading,.assistant-heading,.shop-page .section-header,
  .dice-page .section-header,.story-section-heading,.wiki-masthead,.modal-head)::after {
  content: "";
  position: absolute;
  inset: auto 0 -4px;
  height: 4px;
  background-color: var(--ink-outline);
  mask: url('/static/field-notes-ink.svg') center / 100% 100% no-repeat;
  opacity: .56;
  pointer-events: none;
}
[data-app-style="field-notes"] :is(.campaign-home-heading,.assistant-heading,.shop-page .section-header,
  .dice-page .section-header,.story-section-heading,.wiki-masthead,.modal-head) {
  padding-bottom: 10px;
}
[data-app-style="field-notes"] .recap-library > .story-section-heading::after,
[data-app-style="field-notes"] .calendar-masthead::after { display: none; }
[data-app-style="field-notes"] :is(.campaign-overview-note,.campaign-current-map,.campaign-art-card,.wiki-entry-card,
  .wiki-dossier,.assistant-layout,.assistant-composer,.assistant-welcome-mark,.assistant-notice,.shop-sidebar .panel,
  .dice-form,.dice-result-card,.app-version-settings,.notification-status-card,.campaign-appearance-preview) {
  border: 1.4px solid var(--ink-outline);
  border-radius: 12px 9px 13px 10px / 10px 13px 9px 12px;
  box-shadow: none;
}
[data-app-style="field-notes"] :is(.campaign-overview-note,.wiki-entry-card,.assistant-notice,.shop-sidebar .panel,
  .app-version-settings,.notification-status-card) {
  background-color: var(--journal);
}
[data-app-style="field-notes"] :is(.campaign-overview-note,.assistant-welcome-mark,.my-profile-row) {
  background-image: repeating-linear-gradient(to bottom,transparent 0 23px,var(--paper-rule) 23px 24px);
}
[data-app-style="field-notes"] .campaign-overview-note h3 { font-family: var(--notebook-font); }
[data-app-style="field-notes"] :is(.campaign-overview-note .recap-card-kind,.assistant-heading .eyebrow,.assistant-kicker,.wiki-eyebrow,
  .shop-page .section-header .small,.dice-page .section-header .eyebrow) {
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pencil);
  font: 700 18px/1.1 var(--notebook-font);
  text-decoration: underline;
  text-decoration-color: var(--pencil-stroke);
  text-underline-offset: 4px;
}
[data-app-style="field-notes"] .assistant-workspace { --a-accent: var(--pencil); }
[data-app-style="field-notes"] :is(.assistant-brand-icon,.assistant-message-avatar,.my-profile-row .portrait,.party-roster .portrait) {
  border: 1.4px solid var(--ink-outline);
  border-radius: 50% 47% 51% 49%;
  background-color: var(--journal);
  color: var(--text);
}
[data-app-style="field-notes"] .assistant-player > div,
[data-app-style="field-notes"] .assistant-reply > div {
  padding: 6px 11px 9px;
  border: 1.4px solid var(--ink-outline);
  border-radius: 10px 12px 11px 8px;
  background: var(--incoming);
}
[data-app-style="field-notes"] .assistant-player > div { background: var(--outgoing); }
[data-app-style="field-notes"] .assistant-mode-switch button[aria-pressed="true"] {
  box-shadow: inset 0 -2px var(--pencil-stroke);
}
[data-app-style="field-notes"] .my-profile-row { padding: 13px; border: 1.4px solid var(--ink-outline); border-radius: 10px 13px 10px 9px; }
[data-app-style="field-notes"] :is(.party-roster .person,.shop-stock-row,.more-option,.roll-history-row) { border-color: var(--notebook-edge); }
[data-app-style="field-notes"] :is(.new-message-btn,.mobile-unread,.unread,.nav-button .dot,.die-selected-count) {
  background: var(--action);
  color: var(--action-text);
  border-color: var(--action);
  box-shadow: none;
}
[data-app-style="field-notes"] :is(.roll-values b,.die-preset.queued,.dice-mode-options button.active) {
  background: var(--selected);
  color: var(--text);
  border-color: var(--pencil-stroke);
  box-shadow: none;
}
[data-app-style="field-notes"] :is(.btn-primary,.nav-button.active,.chat-search:focus-within,.die-preset:hover,.compose-field:focus-within) {
  box-shadow: none;
}
[data-app-style="field-notes"] :is(.chat-search:focus-within,.die-preset:hover,.compose-field:focus-within) {
  border-color: var(--pencil);
}
[data-app-style="field-notes"] :is(.eyebrow,.advanced-dice summary,.dice-total small,.thread-list-kicker) { color: var(--pencil); }
[data-app-style="field-notes"] .story-tabs button.active {
  color: var(--text);
  border-color: var(--pencil-stroke);
}
[data-app-style="field-notes"] .calendar-day.is-today .calendar-day-number {
  background: var(--text);
  color: var(--canvas);
  font-weight: 750;
  border-radius: 48% 52% 47% 50%;
}
[data-app-style="field-notes"] .notebook-today-label {
  display: inline;
  color: var(--text);
  font: 750 10px/1 var(--interface-font);
}
[data-app-style="field-notes"] .calendar-day.is-today.is-next-event .calendar-day-number::after { inset: -4px -6px; }

.notebook-page-art { display: block; flex: none; color: var(--ink-outline); }
[data-app-style="field-notes"] #notebookDesktopArt:not(:empty) {
  display: block;
  margin-inline: auto 10px;
}
@media (max-width: 690px) {
  [data-app-style="field-notes"] #notebookMobileArt:not(:empty) { display: block; }
  [data-app-style="field-notes"] #notebookMobileArt .notebook-page-art { width: 63px; height: 45px; }
  [data-app-style="field-notes"] #notebookDesktopArt:not(:empty) { display: none; }
  #sessionMobilePresence:not([hidden]) { display: flex; flex: none; margin-left: auto; }
  #sessionMobilePresence .presence-button { min-height: 24px; }
  [data-app-style="field-notes"] .notebook-party-header .session-header-meta {
    gap: 1px;
    align-items: center;
  }
  [data-app-style="field-notes"] .notebook-party-header .session-next-meeting { flex: 0 1 auto; }
  [data-app-style="field-notes"] #sessionMobilePresence { margin-left: 2px; }
  [data-app-style="field-notes"] .notebook-party-header .presence-button { min-height: 24px; padding: 0 3px; }
  [data-app-style="field-notes"] .assistant-workspace { padding: 0 0 20px; }
  [data-app-style="field-notes"] .assistant-heading .assistant-title-lockup h1 { font-size: 29px; }
  [data-app-style="field-notes"] .thread-list-head h2 { font-size: 38px; }
  [data-app-style="field-notes"] .thread-list .thread {
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  [data-app-style="field-notes"] .thread-list :is(.thread .avatar,.chat-search) {
    border: 1.4px solid var(--ink-outline);
  }
  [data-app-style="field-notes"] .thread-list .thread .avatar { border-radius: 48% 52% 47% 51%; }
  [data-app-style="field-notes"] .thread-list .chat-search { border-radius: 8px 10px 8px 7px; }
  [data-app-style="field-notes"] .message-scroll {
    background-image: url('/static/paper-grain.svg');
  }
  [data-app-style="field-notes"] .message-scroll .message:not(.party-welcome) > .message-label { font-size: 15px; }
  [data-app-style="field-notes"] .message-scroll .message:not(.party-welcome) > .bubble {
    border-radius: 17px 15px 17px 14px / 15px 18px 14px 17px;
    font-size: 17.5px;
  }
  [data-app-style="field-notes"] .calendar-day.is-today {
    justify-content: flex-start;
    gap: 2px;
    padding-top: 3px;
  }
  [data-app-style="field-notes"] .calendar-day.is-today .calendar-day-number { width: 25px; height: 25px; }
  [data-app-style="field-notes"] .calendar-day.is-today .calendar-day-dots { display: none; }
}

@media (max-width: 370px) {
  #sessionMobilePresence .presence-label { display: none; }
  [data-app-style="field-notes"] .notebook-party-header .session-mobile-meeting { font-size: 13px; }
}

/* Shared paper, ink and control treatments for secondary screens. */
:root[data-app-style="field-notes"] {
  color-scheme: light;
  accent-color: var(--pencil);
  --sheet-edge: 15px 11px 15px 10px / 11px 15px 10px 14px;
  --control-edge: 7px 5px 8px 6px / 6px 8px 5px 7px;
  --paper-texture: url('/static/paper-grain.svg');
  --rule-texture: repeating-linear-gradient(transparent 0 23px,var(--paper-rule) 23px 24px);
  --sheet-shadow: 0 13px 34px #30282025;
  --sheet-scrim: #29252388;
}
:root[data-app-style="field-notes"][data-theme="dark"] {
  color-scheme: dark;
  --sheet-shadow: 0 13px 34px #08090a70;
  --sheet-scrim: #101113aa;
}

[data-app-style="field-notes"] #modal {
  --sheet-pad: 24px;
  border: 1.5px solid var(--ink-outline);
  border-radius: var(--sheet-edge);
  background: var(--surface) var(--paper-texture);
  color: var(--text);
  box-shadow: var(--sheet-shadow);
  scrollbar-color: var(--notebook-edge) transparent;
  scrollbar-width: thin;
}
[data-app-style="field-notes"] #modal:focus { outline: none; }
[data-app-style="field-notes"] #modal::backdrop,
[data-app-style="field-notes"] body:has(#modal.account-settings-dialog[open])::after,
[data-app-style="field-notes"] .context-open .context-scrim { background: var(--sheet-scrim); }
[data-app-style="field-notes"] #modal .modal-body { padding: var(--sheet-pad); }
[data-app-style="field-notes"] #modal .modal-head {
  position: sticky;
  z-index: 16;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin: calc(0px - var(--sheet-pad)) calc(0px - var(--sheet-pad)) 18px;
  padding: 14px var(--sheet-pad) 12px;
  border: 0;
  background: var(--surface) var(--paper-texture);
}
[data-app-style="field-notes"] #modal .modal-head::after {
  inset: auto var(--sheet-pad) 0;
  opacity: .8;
}
[data-app-style="field-notes"] #modal .modal-head h2 {
  font: 700 clamp(29px,5vw,38px)/1 var(--notebook-font);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
[data-app-style="field-notes"] #modal .modal-head p { margin: 6px 0 0; }
[data-app-style="field-notes"] .notebook-sheet-mark {
  display: block;
  color: var(--ink-outline);
  pointer-events: none;
}
[data-app-style="field-notes"] .notebook-sheet-mark svg { width: 54px; height: 39px; }
[data-app-style="field-notes"] #modal #closeModal {
  width: 38px;
  min-width: 38px;
  height: 38px;
  color: var(--text);
  border: 1px solid var(--notebook-edge);
  border-radius: 48% 52% 47% 50%;
  background: var(--journal);
  line-height: 1;
}
[data-app-style="field-notes"] #modal #closeModal:hover { background: var(--selected); }

[data-app-style="field-notes"] :is(.btn:not(.btn-quiet):not(.btn-primary):not(.danger-button),
  .field :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden]),select,textarea),
  .select,.modifier-stepper input,.assistant-test-character select,.assistant-composer-top select,
  .calendar-month-toolbar input,.wiki-sort-label select) {
  border: 1px solid var(--notebook-edge);
  border-radius: var(--control-edge);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: none;
}
[data-app-style="field-notes"] :is(.btn,.icon-btn,.new-message-btn):focus-visible,
[data-app-style="field-notes"] :is(.field input,.field select,.field textarea,.select,.assistant-composer select):focus-visible {
  outline: 2px solid var(--pencil-stroke);
  outline-offset: 2px;
}
[data-app-style="field-notes"] :is(.btn:not(.btn-quiet):not(.btn-primary):not(.danger-button),.more-option):hover {
  background: var(--hover);
}
[data-app-style="field-notes"] :is(.btn-primary,.danger-button,.dice-submit) { border-radius: var(--control-edge); }
[data-app-style="field-notes"] :is(.check input,.field input[type=range],.field input[type=checkbox],
  .field input[type=radio],.recap-source-picker input) { accent-color: var(--pencil); }
[data-app-style="field-notes"] :is(.field input,.field textarea,.assistant-composer textarea)::placeholder {
  color: var(--secondary);
}
[data-app-style="field-notes"] input[type=file]::file-selector-button {
  margin-inline-end: 9px;
  padding: 7px 10px;
  border: 1px solid var(--notebook-edge);
  border-radius: var(--control-edge);
  background: var(--journal);
  color: var(--text);
  font: inherit;
}
[data-app-style="field-notes"] :is(.field label,.field-label,.check,.wiki-sort-label) { color: var(--text); }
[data-app-style="field-notes"] :is(.check,.field legend) { font-weight: 600; }
[data-app-style="field-notes"] #modal :is(fieldset,blockquote) {
  border-color: var(--notebook-edge);
  background-color: var(--journal);
}

[data-app-style="field-notes"] :is(.more-menu,.session-controls-menu,.conversation-actions) {
  gap: 0;
  padding: 0;
  border: 1px solid var(--notebook-edge);
  border-radius: var(--sheet-edge);
  background: var(--journal) var(--rule-texture);
}
[data-app-style="field-notes"] :is(.more-option,.session-controls-menu > button,.management-action) {
  min-height: 48px;
  margin-inline: 11px;
  padding-inline: 5px;
  width: calc(100% - 22px);
  border-color: var(--notebook-edge);
}
[data-app-style="field-notes"] :is(.more-option,.session-controls-menu > button,.management-action):last-child {
  border-bottom: 0;
}
[data-app-style="field-notes"] .more-option { gap: 10px; }
[data-app-style="field-notes"] .more-option > span { flex: 0 0 44px; color: var(--ink-outline); }
[data-app-style="field-notes"] .more-option-art { display: block; }
[data-app-style="field-notes"] .more-option-art svg { width: 42px; height: 31px; }
[data-app-style="field-notes"] .more-option > svg { color: var(--pencil); }
[data-app-style="field-notes"] .session-controls-menu > button > svg:first-child { color: var(--ink-outline); }
[data-app-style="field-notes"] :is(.session-controls-menu > button,.management-action):hover {
  background: var(--hover);
  border-radius: var(--control-edge);
}
[data-app-style="field-notes"] :is(.session-controls-menu > button,.conversation-filters button)[aria-pressed=true] {
  color: var(--text);
  background: var(--selected);
  box-shadow: inset 2px 0 var(--pencil-stroke);
}
[data-app-style="field-notes"] :is(.deleted-conversation,.presence-person,.calendar-response-list p,.shop-history article) {
  border-color: var(--notebook-edge);
}
[data-app-style="field-notes"] :is(.reaction-picker,.mention-options,.wiki-entry-menu > div,
  .wiki-management-panel,.session-recap-drawer) {
  border: 1.5px solid var(--ink-outline);
  border-radius: var(--sheet-edge);
  background: var(--surface) var(--paper-texture);
  box-shadow: var(--sheet-shadow);
}
[data-app-style="field-notes"] :is(.reaction-chip,.reaction-picker button,.mention-options button,
  .wiki-entry-menu button,.assistant-sources button) { border-radius: var(--control-edge); }
[data-app-style="field-notes"] :is(.reaction-chip.mine,.mention-options button[aria-selected=true],
  .wiki-entry-menu button:hover,.assistant-sources button:hover) {
  background-color: var(--selected);
  border-color: var(--pencil-stroke);
}
[data-app-style="field-notes"] .campaign-context {
  background: var(--surface) var(--paper-texture);
  border-color: var(--ink-outline);
}
[data-app-style="field-notes"] :is(.context-header h2,.notification-status-card h3,
  .calendar-section-heading h3,.calendar-session-detail h3,.recap-preview-heading h3,.recap-step-panel h3,
  .wiki-profile-hero h3,.wiki-profile-section h3,.wiki-results-heading h3,
  .assistant-conversation-head h2,.character-sheet-details summary,.auth-box h2) {
  font: 700 clamp(25px,4.5vw,34px)/1.08 var(--notebook-font);
  color: var(--text);
  letter-spacing: 0;
}

[data-app-style="field-notes"] :is(.account-notifications,.security-panel,.notification-browser-help,
  .permission-preview,.install-preview,.image-crop-editor,.calendar-upcoming,.calendar-session-card,
  .calendar-subscribe-note,.assistant-boundaries,.assistant-preview-banner,.assistant-ruling,.assistant-gm-note,
  .wiki-filter-panel,.wiki-current-fact,.wiki-source-evidence,.wiki-proposal,.wiki-trash-entry,
  .session-title-choice,.recap-source-picker label,.recap-artifact-card,.recap-secondary,.callout,
  .scene-outcome,.character-sheet-details,.shop-receipt,.app-update-banner) {
  border-color: var(--notebook-edge);
  border-radius: var(--sheet-edge);
  background-color: var(--journal);
  box-shadow: none;
}
[data-app-style="field-notes"] :is(.security-panel,.calendar-subscribe-note,.character-sheet-details) {
  padding: 12px 14px;
  border: 1px solid var(--notebook-edge);
}
[data-app-style="field-notes"] :is(.calendar-rsvp,.calendar-response-list,.wiki-profile-section,
  .recap-table-quotes,.recap-step-footer,.notification-smartwatch,.notification-preferences,.notification-diagnostics) {
  border-color: var(--notebook-edge);
}
[data-app-style="field-notes"] :is(.account-notifications,.recap-artifact-card,.scene-outcome,.assistant-ruling,
  .wiki-profile-hero,.session-title-choice.is-recommended) { background-image: var(--rule-texture); }
[data-app-style="field-notes"] :is(.recap-artifact-card,.wiki-source-evidence,.assistant-ruling,.scene-outcome,
  .recap-source-picker label:has(input:checked),.session-title-choice.is-recommended) {
  border-inline-start: 2px solid var(--pencil-stroke);
}
[data-app-style="field-notes"] :is(.account-notifications,.wiki-sources,.transcript-details,
  .notification-smartwatch,.calendar-subscription-help details,.assistant-boundaries) > summary {
  color: var(--text);
}
[data-app-style="field-notes"] :is(.account-notifications,.wiki-sources,.transcript-details,
  .notification-smartwatch,.calendar-subscription-help details) > summary::marker { color: var(--pencil); }
[data-app-style="field-notes"] :is(.notification-steps li,.assistant-ready,.story-status,.calendar-event-type,
  .calendar-my-response,.recap-card-kind,.roll-type,.letter-privacy,.scene-banner-status) {
  border: 1px solid var(--notebook-edge);
  border-radius: var(--control-edge);
  background: var(--journal);
  color: var(--text);
}
[data-app-style="field-notes"] :is(.calendar-rsvp button[aria-pressed=true],.story-tabs button.active,
  .context-tabs button[aria-pressed=true],.wiki-categories button[aria-pressed=true],
  .recap-workflow-nav button.is-current,.dice-mode-options button.active,.die-preset.queued) {
  border-color: var(--pencil-stroke);
  background-color: var(--selected);
  color: var(--text);
}
[data-app-style="field-notes"] :is(.recap-workflow-nav .is-current .recap-step-number,.dice-chip) {
  background: var(--action);
  color: var(--action-text);
}
[data-app-style="field-notes"] :is(.recap-step-kicker,.session-title-heading,.context-label,.wiki-rail-label,.assistant-list-heading) {
  color: var(--pencil);
}
[data-app-style="field-notes"] :is(.recap-quote-card blockquote,.story-archive blockquote,.assistant-reply blockquote) {
  border-inline-start-color: var(--pencil-stroke);
}
[data-app-style="field-notes"] :is(.story-empty,.wiki-empty,.calendar-empty-day,.calendar-empty-upcoming,
  .assistant-empty-list,.dice-tray-empty,.chat-welcome,.empty-conversation) {
  color: var(--secondary);
}
[data-app-style="field-notes"] :is(.wiki-empty,.calendar-empty-upcoming,.dice-tray,.shop-rules) {
  border-color: var(--notebook-edge);
  border-radius: var(--control-edge);
}
[data-app-style="field-notes"] :is(.recap-error,.auth-error,.calendar-cancelled-banner) {
  color: var(--danger);
  border-color: var(--danger);
}
[data-app-style="field-notes"] .toast {
  border: 1px solid var(--ink-outline);
  border-radius: var(--control-edge);
  background: var(--surface) var(--paper-texture);
  color: var(--text);
  box-shadow: var(--sheet-shadow);
}
[data-app-style="field-notes"] .toast.error { border-color: var(--danger); }

[data-app-style="field-notes"] :is(.auth-page,.auth-aside,.auth-main,.chat-welcome) { background-image: var(--paper-texture); }
[data-app-style="field-notes"] .auth-aside {
  border-color: var(--ink-outline);
  background-color: var(--journal);
}
[data-app-style="field-notes"] .auth-aside :is(h1,p,.eyebrow) { color: var(--text); }
[data-app-style="field-notes"] .auth-aside h1 {
  font: 700 clamp(43px,8vw,74px)/1 var(--notebook-font);
}
[data-app-style="field-notes"] :is(.auth-aside .eyebrow,.auth-box .eyebrow) { color: var(--pencil); }
[data-app-style="field-notes"] .auth-box {
  padding: clamp(17px,4vw,30px);
  border: 1.5px solid var(--ink-outline);
  border-radius: var(--sheet-edge);
  background: var(--surface) var(--paper-texture);
}

@media (max-width: 690px) {
  [data-app-style="field-notes"] #modal {
    --sheet-pad: 18px;
    border-bottom: 0;
    border-radius: 20px 17px 0 0 / 16px 20px 0 0;
  }
  [data-app-style="field-notes"] #modal .modal-body {
    padding-bottom: calc(var(--sheet-pad) + env(safe-area-inset-bottom));
  }
  [data-app-style="field-notes"] #modal .modal-head { padding-top: 12px; }
  [data-app-style="field-notes"] .notebook-sheet-mark svg { width: 46px; height: 34px; }
  [data-app-style="field-notes"] #modal:has(.wiki-entry-view) {
    border-radius: 0;
    border-width: 0;
  }
  [data-app-style="field-notes"] #modal :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea) {
    font-size: max(16px,1em);
  }
}

[data-app-style="field-notes"] .notebook-permission-mark { display: block; }
[data-app-style="field-notes"] .notebook-permission-mark svg { width: 62px; height: 44px; }
[data-app-style="field-notes"] :is(.permission-art,.permission-bell,.notification-status-mark) {
  border: 1px solid var(--notebook-edge);
  border-radius: 48% 52% 47% 50%;
  background: var(--journal);
  color: var(--ink-outline);
}
[data-app-style="field-notes"] .account-notifications { scroll-margin-top: 76px; }

/* The Calendar's type hierarchy applies throughout Field Notes. */
:root[data-app-style="field-notes"],
[data-app-style="field-notes"] .campaign-appearance-preview {
  --display: var(--interface-font);
  --reading: var(--interface-font);
  font-family: var(--interface-font);
}
[data-app-style="field-notes"] :is(.campaign-home-heading h2,.campaign-overview-note h3,.campaign-current-map strong,
  .art-card-copy h3,.story-row h3,.story-title-button,.wiki-card-title,.wiki-current-fact > strong,
  .wiki-profile-hero h3,.context-recap h3,.context-map-open strong) {
  font-family: var(--interface-font);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.16;
}
[data-app-style="field-notes"] :is(.story-section-heading h2,.wiki-results-heading h4,.wiki-profile-section h3,
  .context-section-heading h3,.calendar-section-heading h3,.calendar-session-detail h3,.recap-preview-heading h3,
  .roll-history-heading,.shop-sidebar h3,.assistant-welcome h2,.character-sheet-details summary) {
  font: 700 clamp(23px,3vw,30px)/1.1 var(--notebook-font);
  letter-spacing: 0;
}
[data-app-style="field-notes"] :is(.campaign-home-heading .recap-card-kind,.campaign-current-map small,
  .campaign-overview-note .recap-card-kind,.context-label,.context-recap-meta > span) {
  display: inline-block;
  padding: 0 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--pencil);
  font: 700 19px/1 var(--notebook-font);
  letter-spacing: .025em;
  text-decoration: underline var(--pencil-stroke);
  text-underline-offset: 4px;
}
[data-app-style="field-notes"] .campaign-home-heading h2 { margin: 10px 0 4px; font-size: clamp(25px,4vw,38px); }
[data-app-style="field-notes"] .campaign-home-heading p { margin: 0; font-size: 14px; }
[data-app-style="field-notes"] .campaign-home-heading .btn { align-self: center; }
[data-app-style="field-notes"] .campaign-overview-note { gap: 10px; }
[data-app-style="field-notes"] .campaign-overview-note h3 { font-size: 22px; }
[data-app-style="field-notes"] .campaign-overview-note p { font-size: 13px; }
[data-app-style="field-notes"] .campaign-current-map {
  align-items: stretch;
  grid-template-columns: minmax(0,1.12fr) minmax(0,1fr);
  border-color: var(--ink-outline);
  background: var(--journal) var(--rule-texture);
}
[data-app-style="field-notes"] .campaign-current-map > img { border-inline-end: 1px solid var(--ink-outline); }
[data-app-style="field-notes"] .campaign-current-map strong { font-size: clamp(20px,2.8vw,27px); }
[data-app-style="field-notes"] .campaign-current-map > span > span { color: var(--pencil); font-weight: 650; }
[data-app-style="field-notes"] .campaign-story .story-row {
  border-bottom: 1px solid var(--notebook-edge);
  padding: 16px 2px;
}
[data-app-style="field-notes"] .campaign-story .story-title-button { font-size: 20px; }
[data-app-style="field-notes"] :is(.campaign-story,.wiki-catalog,.campaign-art-library) :is(.story-excerpt,.wiki-card-summary,.art-card-copy > p) {
  line-height: 1.55;
}

/* One pencil mark for active navigation, including nested views. */
[data-app-style="field-notes"] :is(.story-tabs,.context-tabs,.conversation-filters,.assistant-mode-switch,
  .wiki-categories,.wiki-quest-quick-filters,.recap-workflow-nav) button {
  position: relative;
}
[data-app-style="field-notes"] :is(.story-tabs button.active,.context-tabs button[aria-pressed=true],
  .conversation-filters button[aria-pressed=true],.assistant-mode-switch button[aria-pressed=true],
  .wiki-categories button[aria-pressed=true],.wiki-quest-quick-filters button[aria-pressed=true],
  .recap-workflow-nav button.is-current,.nav-button.active,.filter-chip.active) {
  background: transparent;
  color: var(--text);
  border-color: transparent;
  box-shadow: none;
  font-weight: 720;
}
[data-app-style="field-notes"] :is(.story-tabs button.active,.context-tabs button[aria-pressed=true],
  .conversation-filters button[aria-pressed=true],.assistant-mode-switch button[aria-pressed=true],
  .wiki-categories button[aria-pressed=true],.wiki-quest-quick-filters button[aria-pressed=true],
  .recap-workflow-nav button.is-current,.nav-button.active,.filter-chip.active)::after {
  content: "";
  position: absolute;
  inset: auto 5px 3px;
  height: 4px;
  border-radius: 0;
  background-color: var(--pencil-stroke);
  mask: url('/static/field-notes-ink.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
[data-app-style="field-notes"] .wiki-categories button[aria-pressed=true]::before { display: none; }
[data-app-style="field-notes"] .nav-button.active::after { inset-inline: 26%; }
[data-app-style="field-notes"] .filter-chip { position: relative; }
[data-app-style="field-notes"] .assistant-mode-switch {
  border: 0;
  border-bottom: 1px solid var(--notebook-edge);
  border-radius: 0;
  background: none;
  padding: 0;
}

/* The info drawer is a bound campaign journal at every breakpoint. */
[data-app-style="field-notes"] .campaign-context {
  --journal-gutter: 24px;
  --journal-inset: 20px;
  position: relative;
  isolation: isolate;
  padding-inline-start: var(--journal-gutter);
  border-inline-start: 1.5px solid var(--ink-outline);
  background: var(--surface) var(--paper-texture);
}
[data-app-style="field-notes"] .campaign-context::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--journal-gutter);
  background:
    radial-gradient(circle at 8px 12px,var(--canvas) 2px,var(--notebook-edge) 2.5px 3.5px,transparent 4px) 0 0 / 100% 30px,
    var(--journal);
  border-inline-end: 1px solid var(--pencil-stroke);
  pointer-events: none;
}
[data-app-style="field-notes"] .context-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 40px;
  gap: 6px 10px;
  align-items: center;
  padding: 16px var(--journal-inset) 12px;
  border: 0;
}
[data-app-style="field-notes"] .context-journal-mark {
  display: block;
  grid-row: 2 / 4;
  grid-column: 2;
  justify-self: end;
  align-self: center;
}
[data-app-style="field-notes"] .context-journal-mark svg { width: 51px; height: 42px; }
[data-app-style="field-notes"] .context-label { grid-area: 1 / 1; margin: 0; }
[data-app-style="field-notes"] .context-label > svg { display: none; }
[data-app-style="field-notes"] .context-header h2 {
  grid-area: 2 / 1;
  margin: 0;
  font: 700 clamp(32px,3vw,41px)/.98 var(--notebook-font);
}
[data-app-style="field-notes"] .context-header p { grid-area: 3 / 1; margin: 0; font-size: 13px; }
[data-app-style="field-notes"] .context-close {
  position: static;
  grid-area: 1 / 2;
  width: 36px;
  height: 36px;
  justify-self: end;
  border: 1px solid var(--notebook-edge);
  border-radius: 48% 52% 49% 51%;
  background: var(--journal);
  color: var(--text);
}
[data-app-style="field-notes"] .context-close:hover { background: var(--hover); }
[data-app-style="field-notes"] .context-tabs {
  justify-content: space-between;
  gap: 8px;
  padding: 0 var(--journal-inset);
  border-bottom: 1px solid var(--notebook-edge);
}
[data-app-style="field-notes"] .context-tabs button { min-height: 41px; padding: 5px 10px 10px; }
[data-app-style="field-notes"] .context-body {
  padding: 0 var(--journal-inset) 17px;
  scrollbar-color: var(--notebook-edge) transparent;
  scrollbar-width: thin;
}
[data-app-style="field-notes"] .context-body > section { padding-top: 11px; }
[data-app-style="field-notes"] .context-section-heading { margin: 11px 0 8px; }
[data-app-style="field-notes"] .context-text-button { color: var(--pencil); font-weight: 650; }
[data-app-style="field-notes"] :is(.context-recap,.context-map-open,.context-note) {
  border: 1.5px solid var(--ink-outline);
  border-radius: var(--sheet-edge);
  background: var(--journal) var(--rule-texture);
  box-shadow: none;
}
[data-app-style="field-notes"] .context-map-open img { border-bottom: 1px solid var(--ink-outline); height: 106px; }
[data-app-style="field-notes"] .context-map-open strong { font-size: 17px; }
[data-app-style="field-notes"] .context-map-open > span { color: var(--pencil); font-weight: 650; }
[data-app-style="field-notes"] .context-map-arrow { display: inline-flex; vertical-align: middle; }
[data-app-style="field-notes"] .context-recap {
  position: relative;
  padding: 13px 13px 0 18px;
  background-image: linear-gradient(to right,transparent 9px,var(--pencil-stroke) 9px 10px,transparent 10px),var(--rule-texture);
}
[data-app-style="field-notes"] .context-recap-meta { min-height: 21px; }
[data-app-style="field-notes"] .context-recap-meta > span { font-size: 17px; text-decoration: none; }
[data-app-style="field-notes"] .context-recap h3 { margin: 6px 0 8px; font-size: 20px; }
[data-app-style="field-notes"] .context-recap > p { font-size: 13px; line-height: 1.48; margin: 0 0 9px; }
[data-app-style="field-notes"] .context-recap-open { font-size: 12px; }
[data-app-style="field-notes"] .context-recap-open > svg:first-child { color: var(--pencil); }
[data-app-style="field-notes"] :is(.context-entry,.context-scene,.context-person) { border-color: var(--notebook-edge); padding-block: 11px; }
[data-app-style="field-notes"] :is(.context-entry,.context-scene):hover { background: var(--hover); }
[data-app-style="field-notes"] :is(.context-entry strong,.context-scene strong,.context-note strong,.context-person strong) {
  font: 700 14px/1.25 var(--interface-font);
}
[data-app-style="field-notes"] :is(.context-entry-icon,.context-entry > svg,.context-scene > svg) { color: var(--pencil); }
[data-app-style="field-notes"] .context-excerpt { font-size: 12px; line-height: 1.45; }
[data-app-style="field-notes"] .context-note { padding: 10px 12px; margin-bottom: 8px; }
[data-app-style="field-notes"] .context-note p { font-size: 12px; line-height: 1.45; }
[data-app-style="field-notes"] .context-person .avatar { border: 1px solid var(--ink-outline); border-radius: 49% 51% 47% 52%; }
[data-app-style="field-notes"] .context-footer {
  gap: 8px;
  padding: 9px var(--journal-inset);
  border-top: 1px solid var(--ink-outline);
  background: var(--journal);
}
[data-app-style="field-notes"] .context-footer button { color: var(--pencil); font-weight: 650; padding-block: 6px; }

@media (min-width: 1100px) {
  [data-app-style="field-notes"] .chat-shell {
    grid-template-columns: clamp(210px,18vw,286px) minmax(0,1fr) clamp(282px,25vw,392px);
  }
  [data-app-style="field-notes"] .chat-shell.context-collapsed {
    grid-template-columns: clamp(210px,18vw,286px) minmax(0,1fr);
  }
}
@media (max-width: 1099px) {
  [data-app-style="field-notes"] .campaign-context { position: absolute; }
}
@media (max-width: 690px) {
  [data-app-style="field-notes"] .context-open .campaign-context {
    --journal-inset: 15px;
    --journal-gutter: 18px;
    position: fixed;
  }
  [data-app-style="field-notes"] .context-header { padding-top: calc(12px + env(safe-area-inset-top)); }
  [data-app-style="field-notes"] .context-footer { padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
  [data-app-style="field-notes"] .campaign-home-heading { margin-bottom: 12px; }
  [data-app-style="field-notes"] .campaign-home-tabs { margin-bottom: 17px; }
}

[data-app-style="field-notes"] .more-option[aria-current="page"] strong {
  color: var(--text);
  text-decoration: underline var(--pencil-stroke);
  text-underline-offset: 5px;
}
[data-app-style="field-notes"] :is(.story-tabs button,.context-tabs button,.conversation-filters button,
  .wiki-categories button,.calendar-day,.more-option):focus-visible {
  outline: 2px solid var(--pencil-stroke);
  outline-offset: -2px;
}