@charset "UTF-8";
  
:root {
  --blue:#235bea;
  --blue-deep:#163fba;
  --ink:#152544;
  --muted:#586981;
  --line:#dce4f0;
  --bg:#f4f7fc;
  --white:#fff;
  --radius:22px;
  --shadow:0 8px 30px #243c6810;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
  --app-height:100dvh;
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none
}


* {
  box-sizing:border-box
}

body {
  margin:0;
  font-size:1rem;
  line-height:1.5
}

button,input,select,textarea {
  font:inherit
}

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:disabled {
  cursor:default;
  opacity:.45
}

a {
  color:var(--blue);
  text-underline-offset:3px
}

button {
  border:0;
  background:none
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #f0a641;
  outline-offset:3px
}

h1,h2,h3,p {
  margin:0
}

h1 {
  font-size:clamp(1.75rem,4vw,2.5rem);
  line-height:1.16;
  letter-spacing:-.045em
}

h2 {
  font-size:1.2rem;
  line-height:1.3;
  letter-spacing:-.02em
}

h3 {
  font-size:1.06rem;
  line-height:1.35
}

svg {
  width:22px;
  height:22px;
  display:block;
  flex:none
}

img {
  max-width:100%;
  display:block
}

.muted {
  color:var(--muted)
}

.small {
  font-size:.875rem
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

[hidden] {
  display:none!important
}


.startup {
  min-height:100dvh;
  display:grid;
  place-content:center;
  gap:18px;
  text-align:center
}

.startup .brand-mark {
  margin:auto
}

.app-shell {
  max-width:1160px;
  margin:auto;
  padding:0 24px calc(108px + var(--safe-bottom))
}

.app-header {
  height:calc(88px + var(--safe-top));
  padding-top:var(--safe-top);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:850;
  font-size:1.6rem;
  letter-spacing:-.06em
}

.brand-mark {
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:white;
  border-radius:13px;
  font-size:1.6rem;
  font-weight:700;
  line-height:1
}

.brand-sub {
  font-size:.875rem;
  letter-spacing:0;
  font-weight:500;
  color:var(--muted)
}

.header-actions {
  display:flex;
  gap:10px;
  align-items:center
}

.icon-button {
  width:46px;
  height:46px;
  flex:none;
  border:1px solid var(--line);
  background:white;
  border-radius:15px;
  display:grid;
  place-items:center
}

.icon-button:hover {
  background:#edf2fc
}

.offline-label {
  color:#805000;
  background:#fff0d3;
  border-radius:20px;
  padding:5px 11px;
  font-size:.875rem;
  font-weight:650
}


.intro {
  padding:18px 0 25px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px
}

.intro p {
  margin-top:9px;
  color:var(--muted)
}

.eyebrow {
  font-size:.875rem;
  font-weight:650;
  color:var(--blue);
  margin-bottom:10px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:25px 0 14px
}

.text-button {
  color:var(--blue);
  font-weight:650;
  padding:8px 0;
  font-size:.875rem
}

.categories {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px
}

.category {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  background:var(--tint);
  border:1px solid color-mix(in srgb,var(--accent) 13%,transparent);
  border-radius:var(--radius);
  padding:17px 19px 15px;
  min-height:180px;
  overflow:hidden;
  transition:transform .15s,box-shadow .15s
}

.category:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow)
}

.category-image {
  width:94px;
  height:94px;
  padding:8px;
  object-fit:contain;
  align-self:flex-end;
  margin-bottom:4px;
  mix-blend-mode:multiply
}

.category-name {
  font-size:1.06rem;
  font-weight:750;
  letter-spacing:-.02em
}

.category-count {
  font-size:.875rem;
  color:var(--muted);
  margin-top:2px
}

.category-plus {
  border:2px dashed #bdccec;
  justify-content:center;
  align-items:center;
  gap:13px;
  background:transparent;
  min-height:150px
}

.category-plus .icon-button {
  color:var(--blue);
  background:#e5ecff;
  border:none
}


.sequence-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}

.sequence-card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  min-width:0;
  box-shadow:0 2px 3px #233f6410
}

.sequence-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}

.sequence-open {
  text-align:left;
  padding:0;
  min-width:0;
  flex:1
}

.sequence-open:hover h3 {
  color:var(--blue)
}

.sequence-meta {
  color:var(--muted);
  font-size:.875rem;
  margin-top:5px
}

.star-button {
  color:#7d8fa9;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  flex:none;
  margin:-5px -5px 0 0
}

.star-button.active {
  color:#b97505
}

.star-button.active svg {
  fill:#ffd46f
}

.mini-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:18px 0
}

.mini-picto {
  background:#f5f7fb;
  border-radius:13px;
  position:relative;
  padding:7px;
  aspect-ratio:1
}

.mini-picto img {
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply
}

.mini-counter {
  display:grid;
  place-items:center;
  aspect-ratio:1;
  background:#edf2ff;
  color:var(--blue);
  font-size:1.1rem;
  font-weight:750;
  border-radius:13px
}

.sequence-actions {
  display:flex;
  gap:8px;
  align-items:center
}

.button {
  border-radius:14px;
  min-height:46px;
  padding:11px 17px;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  line-height:1.3;
  text-align:center;
  border:1px solid transparent;
  text-decoration:none
}

.button.primary {
  background:var(--blue);
  color:white;
  box-shadow:0 4px 10px #235bea17
}

.button.primary:hover {
  background:var(--blue-deep)
}

.button.secondary {
  background:#edf2ff;
  color:var(--blue)
}

.button.outline {
  background:white;
  border-color:var(--line)
}

.button.danger {
  color:#b33538;
  background:#fff0f0
}

.button.flex {
  flex:1
}

.button.full {
  width:100%
}

.button svg {
  width:19px;
  height:19px
}

.sequence-actions .button {
  padding:10px 12px
}

.help-note {
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:.875rem;
  padding:20px 1px
}

.help-note svg {
  width:18px;
  height:18px
}

.credit {
  text-align:center;
  font-size:.8125rem;
  color:var(--muted);
  margin-top:20px
}

.credit a {
  color:inherit
}

.credit span {
  display:block
}


.bottom-nav {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:15;
  background:#ffffffee;
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:9px 16px calc(9px + var(--safe-bottom));
  display:flex;
  justify-content:center;
  gap:14px
}

.nav-item {
  min-width:100px;
  padding:6px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  border-radius:15px;
  color:var(--muted);
  font-size:.875rem;
  font-weight:550
}

.nav-item.active {
  color:var(--blue);
  background:#edf2ff
}

.nav-item svg {
  width:21px;
  height:21px
}

.page-heading {
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 0 25px
}

.page-heading h1 {
  font-size:clamp(1.6rem,4vw,2.2rem)
}

.page-heading .subtitle {
  font-size:.875rem;
  color:var(--muted);
  margin-top:6px
}

.page-heading .grow {
  flex:1;
  min-width:0
}

.page-heading .category-badge {
  width:72px;
  height:72px;
  object-fit:contain;
  padding:6px;
  background:var(--tint);
  border-radius:19px
}

.subnav {
  display:flex;
  gap:9px;
  margin-bottom:22px;
  flex-wrap:wrap
}

.chip {
  min-height:42px;
  background:white;
  border:1px solid var(--line);
  border-radius:30px;
  padding:9px 16px;
  color:var(--muted);
  font-size:.875rem
}

.chip.active {
  background:var(--blue);
  border-color:var(--blue);
  color:white
}

.empty {
  padding:38px 22px;
  text-align:center;
  border:1px dashed #bfcee5;
  border-radius:22px;
  background:white;
  display:grid;
  justify-items:center;
  gap:14px
}

.empty svg {
  width:34px;
  height:34px;
  color:var(--blue)
}


.sequence-detail {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:28px;
  align-items:start
}

.overview-steps {
  display:grid;
  gap:10px
}

.overview-step {
  display:flex;
  align-items:center;
  gap:14px;
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  padding:11px 16px;
  text-align:left;
  min-height:86px;
  position:relative;
  width:100%
}

.step-number {
  flex:none;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--tint,#e7edff);
  color:var(--accent,var(--blue));
  font-size:.875rem;
  font-weight:750
}

.overview-step img {
  width:58px;
  height:58px;
  object-fit:contain
}

.overview-label {
  font-weight:650
}

.overview-note {
  font-size:.875rem;
  font-weight:400;
  color:var(--muted);
  margin-top:2px
}

.detail-controls {
  position:sticky;
  top:24px;
  border:1px solid var(--line);
  background:white;
  border-radius:22px;
  padding:22px;
  display:grid;
  gap:12px
}

.detail-controls .description {
  color:var(--muted);
  font-size:.9375rem;
  margin-bottom:6px
}

.detail-controls .button.primary {
  min-height:55px
}

.detail-controls .meta {
  font-size:.875rem;
  color:var(--muted)
}

.detail-secondary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}

.description-card {
  background:#e7edff;
  border-radius:18px;
  padding:18px;
  margin-top:6px;
  color:#244780;
  font-size:.9375rem
}

.description-card p {
  margin-top:6px
}

.list-footer {
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap
}


.editor {
  max-width:840px;
  margin:auto
}

.editor-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  gap:12px
}

.editor-head>div {
  display:flex;
  gap:10px;
  align-items:center
}

.editor-head h1 {
  font-size:1.35rem;
  letter-spacing:-.03em
}

.save-state {
  color:var(--muted);
  font-size:.875rem
}

.editor-fields {
  display:grid;
  gap:15px;
  background:white;
  border:1px solid var(--line);
  padding:20px;
  border-radius:20px;
  margin-bottom:25px
}

.field {
  display:grid;
  gap:7px;
  font-size:.875rem;
  font-weight:650;
  min-width:0
}

.input {
  width:100%;
  min-height:47px;
  border:1px solid #cbd6e7;
  border-radius:12px;
  padding:11px 12px;
  color:var(--ink);
  background:white;
  outline-offset:1px;
  font-size:1rem;
  font-weight:400;
  min-width:0
}

.input:hover {
  border-color:#a8b9d3
}

.input:focus {
  border-color:var(--blue)
}

textarea.input {
  resize:vertical;
  min-height:76px
}

.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.editor-steps {
  display:grid;
  gap:13px
}

.edit-step {
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:15px;
  background:white;
  border:1px solid var(--line);
  padding:17px;
  border-radius:20px;
  position:relative
}

.edit-image {
  width:100%;
  aspect-ratio:1;
  background:#f5f7fc;
  border:1px solid #e4eaf4;
  border-radius:15px;
  padding:10px;
  position:relative;
  margin-top:5px
}

.edit-image img {
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply
}

.edit-image .step-number {
  position:absolute;
  top:-11px;
  left:-8px;
  border:3px solid white;
  width:30px;
  height:30px;
  box-sizing:content-box
}

.edit-image .change-overlay {
  position:absolute;
  bottom:5px;
  right:5px;
  background:white;
  border-radius:8px;
  padding:4px;
  color:var(--blue);
  box-shadow:0 2px 10px #163fba12
}

.change-overlay svg {
  width:17px;
  height:17px
}

.edit-fields {
  min-width:0;
  display:grid;
  gap:9px
}

.edit-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:9px;
  grid-column:1/-1;
  border-top:1px solid #edf1f7;
  padding-top:10px
}

.move-actions {
  display:flex;
  gap:6px
}

.step-action {
  display:flex;
  align-items:center;
  gap:5px;
  min-height:42px;
  border-radius:10px;
  padding:7px 10px;
  color:var(--muted);
  font-size:.875rem
}

.step-action:hover {
  background:#f0f4fb
}

.step-action svg {
  width:18px;
  height:18px
}

.step-action.delete {
  color:#ae4141
}

.note-toggle {
  font-size:.875rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 0;
  text-align:left
}

.note-toggle svg {
  width:16px;
  height:16px
}

.add-step {
  margin:18px 0 27px;
  width:100%;
  min-height:59px;
  border:2px dashed #b9cbea;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--blue);
  font-weight:650;
  background:#edf2ff70
}

.editor-bar {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:14;
  border-top:1px solid var(--line);
  background:#ffffffef;
  padding:12px 20px calc(12px + var(--safe-bottom));
  backdrop-filter:blur(16px)
}

.editor-bar-inner {
  display:flex;
  gap:11px;
  max-width:840px;
  margin:auto
}

.editor-bar .button {
  min-height:49px
}

.editor-bar .primary {
  flex:1
}


dialog {
  color:var(--ink);
  border:1px solid var(--line);
  padding:0;
  border-radius:26px;
  max-width:calc(100% - 28px);
  width:520px;
  max-height:90dvh;
  background:white;
  box-shadow:0 20px 80px #12213e25
}

dialog::backdrop {
  background:#13244070;
  backdrop-filter:blur(3px)
}

.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 23px;
  border-bottom:1px solid var(--line);
  background:white;
  position:sticky;
  top:0;
  z-index:2
}

.modal-head h2 {
  font-size:1.18rem
}

.modal-head .icon-button {
  border:0;
  width:40px;
  height:40px;
  background:#f0f3f9;
  border-radius:12px
}

.modal-body {
  padding:22px;
  display:grid;
  gap:17px
}

.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:0 22px 22px
}

.confirm-description {
  color:var(--muted)
}

.palette {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.color-choice {
  width:38px;
  height:38px;
  border:3px solid white;
  border-radius:12px;
  box-shadow:0 0 0 1px #d8e2f0
}

.color-choice.selected {
  box-shadow:0 0 0 2px var(--blue)
}


.picker {
  width:790px;
  height:min(850px,92dvh)
}

.picker-shell {
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0
}

.picker-tools {
  padding:16px 22px;
  border-bottom:1px solid var(--line);
  display:grid;
  gap:11px;
  background:white;
  flex:none
}

.search-form {
  display:flex;
  gap:8px
}

.search-input-wrap {
  position:relative;
  flex:1;
  min-width:0
}

.search-input-wrap>svg {
  position:absolute;
  top:15px;
  left:13px;
  width:20px;
  height:20px;
  color:var(--muted)
}

.search-input-wrap .input {
  padding-left:42px;
  padding-right:42px
}

.clear-search {
  position:absolute;
  right:5px;
  top:6px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:var(--muted)
}

.picker-tools .button {
  padding:10px 13px
}

.picker-help {
  font-size:.875rem;
  color:var(--muted)
}

.picker-options {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}

.picker-status {
  font-size:.875rem;
  color:var(--muted);
  padding:16px 22px 0;
  flex:none
}

.picker-results {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  padding:17px 22px 22px;
  overflow-y:auto;
  align-content:start;
  flex:1;
  min-height:0;
  overscroll-behavior:contain
}

.picto-choice {
  min-width:0;
  padding:8px;
  border:1px solid var(--line);
  border-radius:15px;
  background:white;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px
}

.picto-choice:hover {
  border-color:var(--blue);
  background:#f2f6ff
}

.picto-choice img {
  width:100%;
  aspect-ratio:1;
  object-fit:contain
}

.picto-choice span {
  font-size:.875rem;
  line-height:1.25;
  overflow-wrap:anywhere
}

.picker-empty {
  grid-column:1/-1;
  text-align:center;
  padding:35px 8px;
  color:var(--muted)
}

.load-more {
  grid-column:1/-1
}

.loader {
  width:18px;
  height:18px;
  border:2px solid #d9e2f5;
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .8s linear infinite;
  display:inline-block;
  vertical-align:middle;
  margin-right:7px
}

@keyframes spin {
  to {
  transform:rotate(360deg)
}

}


.settings {
  max-width:800px;
  margin:auto
}

.settings-panel {
  border:1px solid var(--line);
  background:white;
  border-radius:22px;
  padding:22px;
  margin-bottom:17px
}

.settings-panel h2 {
  margin-bottom:7px
}

.settings-panel>p {
  color:var(--muted);
  font-size:.9375rem
}

.settings-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:19px
}

.settings-row .field {
  flex:1
}

.switch {
  position:relative;
  flex:none;
  width:50px;
  height:29px
}

.switch input {
  opacity:0;
  position:absolute;
  inset:0
}

.switch .track {
  position:absolute;
  inset:0;
  background:#bdc9dd;
  border-radius:20px;
  pointer-events:none
}

.switch .track:before {
  content:"";
  position:absolute;
  width:23px;
  height:23px;
  top:3px;
  left:3px;
  border-radius:50%;
  background:white;
  box-shadow:0 1px 5px #15315530;
  transition:transform .16s
}

.switch input:checked+.track {
  background:var(--blue)
}

.switch input:checked+.track:before {
  transform:translateX(21px)
}

.switch input:focus-visible+.track {
  outline:3px solid #f0a641;
  outline-offset:3px
}

.settings-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:17px
}

.storage-info {
  font-size:.875rem;
  color:var(--muted);
  margin-top:12px
}

.license-line {
  margin-top:12px;
  font-size:.875rem;
  line-height:1.7
}

.settings-panel details {
  margin-top:15px;
  color:var(--muted);
  font-size:.9375rem
}

.settings-panel summary {
  cursor:pointer;
  color:var(--ink);
  font-weight:650;
  min-height:40px
}

.settings-panel details p {
  margin-bottom:9px
}

.settings-panel details ol {
  padding-left:24px;
  margin:8px 0
}


#toast {
  position:fixed;
  left:50%;
  bottom:calc(100px + var(--safe-bottom));
  transform:translate(-50%,16px);
  opacity:0;
  pointer-events:none;
  color:white;
  background:#142b4bee;
  z-index:150;
  border-radius:16px;
  padding:12px 18px;
  max-width:calc(100% - 32px);
  width:max-content;
  font-size:.9375rem;
  box-shadow:0 8px 30px #0f243626;
  transition:opacity .2s,transform .2s
}

#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

.missing-image {
  object-fit:contain
}

.saving {
  opacity:.7
}

.error-banner {
  border:1px solid #e7c3aa;
  background:#fff3e6;
  border-radius:15px;
  color:#80501d;
  padding:12px 15px;
  font-size:.9375rem;
  margin:12px 0
}


@media(min-width:960px) {
  .app-header {
  height:102px
}

.bottom-nav {
  left:50%;
  right:auto;
  bottom:20px;
  transform:translateX(-50%);
  width:470px;
  max-width:95vw;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 8px 32px #243c6820;
  padding:8px 14px
}

.intro {
  padding-top:23px
}

.category {
  min-height:185px
}


}


@media(max-width:760px) {
  .app-shell {
  padding-left:19px;
  padding-right:19px
}

.brand-sub {
  display:none
}

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

.category {
  min-height:164px;
  padding:15px
}

.category-image {
  width:83px;
  height:83px;
  margin-bottom:8px
}

.sequence-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.sequence-detail {
  grid-template-columns:1fr
}

.detail-controls {
  position:static;
  grid-row:1;
  padding:18px
}

.detail-controls .description {
  display:none
}

.detail-controls .meta {
  display:none
}

.detail-secondary {
  grid-template-columns:repeat(3,1fr)
}

.detail-secondary .button {
  padding:10px;
  font-size:.875rem
}

.description-card {
  display:none
}

.picker-results {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.intro .button {
  padding:11px 13px
}

.category-plus {
  min-height:110px
}

.overview-step {
  gap:11px;
  padding:11px 13px
}

.overview-step img {
  width:55px;
  height:55px
}


}


@media(max-width:480px) {
  .app-header {
  height:calc(79px + var(--safe-top))
}

.app-shell {
  padding-left:17px;
  padding-right:17px
}

.brand {
  font-size:1.55rem
}

.intro {
  padding:12px 0 23px;
  align-items:flex-start
}

.intro h1 {
  font-size:1.8rem
}

.intro p {
  font-size:.9375rem;
  max-width:235px
}

.intro>.button {
  min-width:45px;
  width:45px;
  height:45px;
  padding:0;
  border-radius:14px
}

.intro>.button .desktop-label {
  display:none
}

.section-heading {
  margin:24px 0 13px
}

.sequence-grid {
  grid-template-columns:1fr
}

.sequence-card {
  padding:17px
}

.mini-steps {
  margin:16px 0;
  gap:9px;
  grid-template-columns:repeat(5,minmax(0,1fr))
}

.mini-steps .mini-picto {
  padding:6px
}

.bottom-nav {
  gap:4px;
  padding-left:8px;
  padding-right:8px
}

.nav-item {
  min-width:0;
  flex:1;
  padding:6px 8px;
  font-size:.8125rem
}

.page-heading {
  padding:10px 0 21px;
  gap:10px
}

.page-heading .category-badge {
  width:57px;
  height:57px;
  border-radius:15px
}

.page-heading .icon-button {
  width:40px;
  height:40px;
  border-radius:13px
}

.page-heading h1 {
  font-size:1.5rem
}

.detail-controls {
  padding:15px
}

.detail-secondary .button {
  flex-direction:column;
  gap:5px;
  padding:10px 6px
}

.field-row {
  grid-template-columns:1fr
}

.editor-fields {
  padding:16px
}

.edit-step {
  grid-template-columns:82px minmax(0,1fr);
  gap:12px;
  padding:15px
}

.edit-fields .input {
  font-size:1rem;
  padding:10px;
  min-height:45px
}

.edit-actions {
  gap:3px
}

.step-action {
  padding:8px 7px
}

.step-action .optional-label {
  display:none
}

.editor-head {
  padding:15px 0
}

.editor-head h1 {
  font-size:1.16rem
}

.editor-head .icon-button {
  width:40px;
  height:40px
}

.editor-head .save-state {
  font-size:.8125rem
}

.editor-bar {
  padding-left:17px;
  padding-right:17px
}

.editor-bar .button {
  padding:10px 14px
}

.editor-bar-inner {
  gap:9px
}

dialog {
  max-width:calc(100% - 24px);
  border-radius:22px
}

.picker {
  position:fixed;
  inset:0;
  max-width:100%;
  width:100%;
  height:100dvh;
  max-height:100dvh;
  border:0;
  border-radius:0;
  margin:0
}

.picker .modal-head {
  padding:calc(15px + var(--safe-top)) 17px 13px
}

.picker-tools {
  padding:14px 17px
}

.picker-status {
  padding:13px 17px 0
}

.picker-results {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding:14px 17px calc(20px + var(--safe-bottom))
}

.picto-choice {
  padding:8px 6px
}

.picto-choice span {
  font-size:.8125rem
}

.picker-options .button {
  font-size:.875rem;
  padding:8px 11px
}

.picker-help {
  font-size:.8125rem
}

.settings-panel {
  padding:18px
}

.settings-actions>.button {
  flex:1
}


}


@media(max-width:350px) {
  .app-shell {
  padding-left:12px;
  padding-right:12px
}

.category {
  padding:12px;
  min-height:148px
}

.category-image {
  width:73px;
  height:73px
}

.category-name {
  font-size:1rem
}

.category-count {
  font-size:.8125rem
}

.brand-mark {
  width:34px;
  height:34px;
  border-radius:11px
}

.intro h1 {
  font-size:1.65rem
}

.edit-step {
  grid-template-columns:69px minmax(0,1fr);
  gap:10px;
  padding:13px
}

.edit-image {
  padding:5px;
  border-radius:12px
}

.move-actions {
  gap:0
}

.step-action {
  padding:8px 6px
}

.picker-results {
  padding-left:12px;
  padding-right:12px;
  gap:7px
}


}


.brand {
  font-size:clamp(1.125rem,5vw,1.6rem);
  min-width:0
}

.intro>div {
  min-width:0;
  flex:1
}

.intro>.button {
  flex:none
}

.intro h1 {
  overflow-wrap:anywhere
}

.app-shell {
  padding-bottom:var(--bottom-space,calc(108px + var(--safe-bottom)))
}

.category-name,.category-count,.nav-item span {
  max-width:100%;
  overflow-wrap:anywhere
}

.button {
  min-width:0;
  overflow-wrap:anywhere
}


@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}


}


@media print {
  .app-header,.bottom-nav,.detail-controls,.page-heading>.icon-button,.list-footer,.credit,.help-note,.editor-bar,.edit-actions,.add-step,.editor-head,.change-overlay,.note-toggle {
  display:none!important
}

body {
  background:white
}

.app-shell {
  padding:0
}

.sequence-detail {
  display:block
}

.overview-steps {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}

.overview-step {
  break-inside:avoid
}

.page-heading {
  padding:0 0 22px
}

.edit-step {
  break-inside:avoid
}


}



/* Picto Go: one viewport budget, shared by the dialog and its content. */
.brand-mark {
  padding:0;
  object-fit:contain;
  background:transparent;
  border-radius:12px;
  flex:none
}

.brand {
  letter-spacing:-.045em;
  white-space:nowrap
}

.brand-sub {
  letter-spacing:0
}

.star-button {
  width:44px;
  height:44px;
  margin:-5px -5px 0 0
}

.sequence-actions {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch
}

.sequence-actions .button {
  min-height:48px
}

.sequence-open h3,.page-heading h1,.overview-label,.overview-note {
  overflow-wrap:anywhere
}

.overview-step>span:last-child {
  min-width:0;
  flex:1
}

.overview-step img {
  flex:none
}

.note-toggle,.step-action {
  min-height:44px
}

.editor-head>div {
  min-width:0
}

.editor-head h1 {
  overflow-wrap:anywhere
}

.editor-head .save-state {
  flex:none
}

.category-picture {
  display:flex;
  align-items:center;
  gap:15px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#f4f7fc;
  text-align:left
}

.category-picture>img {
  width:72px;
  height:72px;
  object-fit:contain;
  flex:none
}

.category-picture>span {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:650;
  font-size:.9375rem
}

.leave-actions {
  flex-wrap:wrap
}

.leave-actions .primary {
  flex-basis:100%
}

#update-notice {
  position:fixed;
  z-index:50;
  inset:auto 12px calc(var(--bottom-space,100px) - 12px);
  margin:auto;
  max-width:560px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  font-size:.875rem
}

#update-notice .button {
  flex:none
}

dialog {
  max-height:calc(var(--app-height,100dvh) - 24px);
  overscroll-behavior:contain
}

.picker .modal-head {
  flex:none
}

.picker {
  height:min(850px,calc(var(--app-height,100dvh) - 24px))
}

.picker-shell {
  overflow:hidden
}

.viewer {
  
 position:fixed;
  inset:var(--viewport-top,0px) auto auto var(--viewport-left,0px);
  
 width:var(--app-width,100vw);
  max-width:none;
  height:var(--app-height,100dvh);
  max-height:none;
  
 margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:#edf2ff;
  color:var(--ink);
  overflow:hidden;
  
 --viewer-accent:var(--blue);
  --viewer-tint:#e7edff;
  

}

.viewer:fullscreen {
  inset:0;
  width:100%;
  height:100%
}

.viewer::backdrop {
  background:#edf2ff
}

.viewer-shell {
  
 width:100%;
  height:100%;
  max-width:1100px;
  margin:0 auto;
  
 display:grid;
  grid-template-rows:auto 4px minmax(0,1fr) auto;
  gap:14px;
  
 padding:max(12px,var(--safe-top)) max(16px,env(safe-area-inset-right,0px)) max(12px,var(--safe-bottom)) max(16px,env(safe-area-inset-left,0px));
  

}

.viewer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0
}

.viewer-heading {
  min-width:0;
  flex:1
}

.viewer-title {
  font-size:.875rem;
  font-weight:550;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.viewer-number {
  font-size:1rem;
  font-weight:750;
  color:var(--viewer-accent);
  margin-top:2px;
  line-height:1.3
}

.viewer-top-actions {
  display:flex;
  gap:8px;
  flex:none
}

.viewer .icon-button {
  width:44px;
  height:44px;
  border-radius:14px;
  background:#ffffffd9;
  border:1px solid #d6dff0
}

.viewer-progress {
  height:4px;
  background:#d5def0;
  border-radius:8px;
  overflow:hidden
}

.viewer-progress>span {
  display:block;
  height:100%;
  background:var(--viewer-accent);
  border-radius:8px;
  transition:width .18s
}

.viewer-stage {
  
 display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  justify-items:center;
  min-height:0;
  min-width:0;
  
 gap:14px;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  overflow:hidden;
  

}

.viewer-picture {
  
 width:100%;
  height:100%;
  max-width:560px;
  min-width:0;
  min-height:0;
  
 padding:clamp(12px,4vmin,28px);
  background:white;
  border:1px solid #dbe4f2;
  border-radius:28px;
  
 display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 32px #17377a0a;
  overflow:hidden;
  

}

.viewer-picture img {
  width:100%;
  height:100%;
  min-height:0;
  min-width:0;
  object-fit:contain;
  pointer-events:none
}

.viewer-copy {
  width:100%;
  max-width:680px;
  min-height:0;
  max-height:min(210px,calc(var(--app-height,100dvh) * .28));
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  text-align:center;
  padding:0 3px 3px
}

.viewer-label {
  font-size:clamp(1.45rem,5.5vmin,2.4rem);
  font-weight:750;
  line-height:1.2;
  letter-spacing:-.025em;
  overflow-wrap:anywhere
}

.viewer-note {
  margin-top:9px;
  font-size:1rem;
  line-height:1.4;
  color:var(--muted);
  overflow-wrap:anywhere
}

.viewer-bottom {
  display:grid;
  gap:9px;
  min-width:0
}

.viewer-hint {
  font-size:.875rem;
  line-height:1.4;
  text-align:center;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 4px
}

.viewer-navigation {
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);
  gap:10px;
  width:100%;
  max-width:680px;
  margin:auto
}

.viewer-navigation .button {
  min-height:50px;
  padding:10px 12px;
  min-width:0;
  font-size:1rem;
  gap:7px
}

.viewer-navigation .icon-button {
  width:48px;
  height:50px
}

.viewer-auto-voice {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  min-height:44px;
  width:max-content;
  max-width:100%;
  margin:auto;
  padding:8px 12px;
  border-radius:12px;
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.25
}

.viewer-auto-voice svg {
  width:17px;
  height:17px
}

.viewer-auto-voice.active {
  color:var(--blue);
  background:#dce6ff
}

.viewer-done {
  grid-row:1/-1;
  align-self:center;
  width:100%;
  display:grid;
  justify-items:center;
  gap:16px;
  text-align:center;
  overflow-y:auto;
  max-height:100%;
  padding:8px
}

.viewer-done h2 {
  font-size:clamp(1.5rem,5vmin,2rem)
}

.viewer-done p {
  color:var(--muted)
}

.done-mark {
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  background:#d6eedf;
  color:#21784a;
  border-radius:28px
}

.done-mark svg {
  width:44px;
  height:44px
}

.viewer.is-landscape .viewer-shell {
  gap:10px
}

.viewer.is-landscape .viewer-stage {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:24px;
  align-items:center
}

.viewer.is-landscape .viewer-picture {
  max-width:none;
  border-radius:22px;
  padding:14px
}

.viewer.is-landscape .viewer-copy {
  max-height:100%;
  padding:5px;
  align-self:center
}

.viewer.is-landscape .viewer-label {
  font-size:clamp(1.3rem,5.3vmin,2rem)
}

.viewer.is-landscape .viewer-done {
  grid-column:1/-1;
  gap:8px
}

.viewer.is-landscape .done-mark {
  width:56px;
  height:56px;
  border-radius:18px
}

.viewer.is-landscape .done-mark svg {
  width:30px;
  height:30px
}

.viewer.is-compact .viewer-shell {
  gap:9px;
  padding-top:max(8px,var(--safe-top));
  padding-bottom:max(8px,var(--safe-bottom))
}

.viewer.is-compact .viewer-bottom {
  gap:3px
}

.viewer.is-compact .viewer-navigation .button,.viewer.is-compact .viewer-navigation .icon-button {
  min-height:44px;
  height:44px
}

.viewer.is-compact .viewer-note {
  font-size:.875rem;
  margin-top:6px
}

@media(max-width:480px) {
  
 .picker {
  inset:var(--viewport-top,0px) auto auto var(--viewport-left,0px);
  width:var(--app-width,100vw);
  height:var(--app-height,100dvh);
  max-height:none;
  max-width:none;
  margin:0;
  border-radius:0;
  border:0
}

 .viewer-shell {
  gap:12px;
  padding-left:max(14px,env(safe-area-inset-left,0px));
  padding-right:max(14px,env(safe-area-inset-right,0px))
}

 .viewer-picture {
  border-radius:24px;
  padding:18px
}

 .viewer-stage {
  gap:12px
}

 .viewer-note {
  font-size:.9375rem
}

 .viewer-navigation .button {
  font-size:.9375rem
}

 .viewer-hint {
  font-size:.8125rem
}

 .category-picture>img {
  width:60px;
  height:60px
}

 .category-picture>span {
  font-size:.875rem
}


}

@media(max-width:350px) {
  
 .viewer-shell {
  padding-left:10px;
  padding-right:10px;
  gap:10px
}

 .viewer-top {
  gap:8px
}
.viewer-top-actions {
  gap:5px
}

 .viewer-navigation {
  grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
  gap:7px
}

 .viewer-navigation .icon-button {
  width:44px
}

 .viewer-navigation .button {
  padding:10px 6px;
  font-size:.875rem
}

 .viewer-navigation .button svg {
  display:none
}

 .viewer-label {
  font-size:1.35rem
}

 .sequence-actions .button {
  font-size:.875rem;
  padding:10px 9px;
  gap:6px
}

 .sequence-actions .button svg {
  width:17px;
  height:17px
}

 .sequence-actions .outline {
  flex-direction:column;
  gap:2px
}

 .brand {
  font-size:1.4rem
}

 .offline-label {
  font-size:.75rem;
  padding:4px 7px
}

 .header-actions {
  gap:5px
}

 .category-picture {
  gap:9px;
  padding:9px
}

 .modal-actions {
  padding-left:16px;
  padding-right:16px;
  flex-wrap:wrap
}


}

@media(max-height:460px) {
  
 .viewer.is-compact .viewer-hint {
  display:none
}

 .viewer.is-compact .viewer-auto-voice {
  min-height:36px;
  padding:5px 10px
}

 .viewer.is-compact .viewer-title {
  font-size:.8125rem
}

 .viewer.is-compact .viewer-copy {
  max-height:calc(var(--app-height,100dvh) * .26)
}

 .viewer.is-landscape .viewer-copy {
  max-height:100%
}

 .viewer.is-compact .viewer-picture {
  padding:10px;
  border-radius:18px
}

 .viewer.is-compact .viewer-stage {
  gap:9px
}


}

@media(max-height:380px) {
  
 .viewer.is-compact .viewer-auto-voice {
  display:none
}

 .viewer.is-compact .viewer-label {
  font-size:1.15rem
}

 .picker-tools {
  padding-top:8px;
  padding-bottom:8px;
  gap:4px
}

 .picker-options .picker-help {
  display:none
}

 .picker-options {
  justify-content:flex-end
}

 .picker-status {
  padding-top:7px
}


}

@media print {
  .viewer,#update-notice {
  display:none!important
}

}


/* Center forms inside the visible viewport, including with the mobile keyboard. */
#modal {
 position:fixed;inset:auto;
 top:calc(var(--viewport-top,0px) + var(--app-height,100dvh) * .5);
 left:calc(var(--viewport-left,0px) + var(--app-width,100vw) * .5);
 transform:translate(-50%,-50%);margin:0;
 width:min(520px,calc(var(--app-width,100vw) - 24px));max-width:none;
 max-height:calc(var(--app-height,100dvh) - 24px);overflow-y:auto;
}
#modal.picker {width:min(790px,calc(var(--app-width,100vw) - 24px));overflow:hidden}
@media(max-width:480px){
 #modal.picker {inset:var(--viewport-top,0px) auto auto var(--viewport-left,0px);transform:none;width:var(--app-width,100vw);max-height:none;height:var(--app-height,100dvh)}
}

.viewer-shell,.viewer-stage,.viewer-bottom {grid-template-columns:minmax(0,1fr)}
.viewer-navigation,.viewer-hint,.viewer-auto-voice {min-width:0}
.viewer-navigation .button>span,.viewer-auto-voice>span {min-width:0;overflow-wrap:anywhere}
#modal[open]:not(.picker) {display:flex;flex-direction:column;overflow:hidden}
#modal:not(.picker)>.modal-head {flex:none}
#modal:not(.picker)>form {display:flex;flex-direction:column;min-height:0;overflow:hidden}
#modal:not(.picker) .modal-body {overflow-y:auto;min-height:0;align-content:start}
#modal:not(.picker) .modal-actions {flex:none;padding-top:12px;background:white;border-top:1px solid var(--line)}
.modal-head .icon-button {width:44px;height:44px}


/* Isolate the sequence from the underlying page while its modal is open. */
body.viewer-open>#app,body.viewer-open>#update-notice {visibility:hidden;pointer-events:none}
.viewer-frame:fullscreen {position:fixed;inset:0;width:100%;height:100%;margin:0;padding:0;background:#edf2ff;overflow:hidden}
.viewer-frame:fullscreen>.viewer {inset:0;width:100%;height:100%}
.detail-secondary {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.favorite-control {min-width:0;gap:8px}
.favorite-control>span {min-width:0;overflow-wrap:anywhere}
.favorite-control.is-favorite {background:#fff6df;border-color:#edcf8d;color:#865705}
.favorite-control.is-favorite svg {fill:#ffd46f;stroke:#a56807}
.editor-favorite {display:flex;justify-content:flex-start}
.editor-favorite .favorite-control {font-size:.875rem;text-align:left}
@media(max-width:480px){.detail-secondary .favorite-control {font-size:.8125rem}}

/* Each outing panel gets a soft individual tint; its title uses the same hue. */
.sequence-card {
  background:var(--panel-bg,#fff);
  border-color:var(--panel-border,var(--line))
}
.sequence-open h3 {
  color:var(--panel-title,var(--ink))
}
.sequence-open:hover h3 {
  color:var(--panel-title,var(--ink))
}

/* Soft action colors keep the two main actions easy to distinguish. */
.button.primary[data-action="new-sequence"] {
  background:#e6effb;
  border-color:#ccdaed;
  color:#2f5987;
  box-shadow:none
}
.button.primary[data-action="new-sequence"]:hover {
  background:#d9e7f7;
  border-color:#b9cde7
}
.icon-button[data-action="new-sequence"] {
  background:#e6effb;
  color:#2f5987
}
.icon-button[data-action="new-sequence"]:hover {
  background:#d9e7f7
}
/* Let the action row wrap according to its card's available width. */
.sequence-actions {
  display:flex;
  flex-wrap:wrap
}
.sequence-actions .button {
  min-width:0;
  max-width:100%;
  white-space:normal
}
.sequence-actions [data-action="view"] {flex:2 1 auto}
.sequence-actions [data-action="edit"] {flex:1 1 auto;flex-direction:row}
.sequence-actions .button>span {min-width:0;overflow-wrap:anywhere}
.sequence-actions [data-action="edit"]>span {white-space:nowrap}
.sequence-secondary-actions {
  display:flex;
  align-items:stretch;
  flex:1 1 auto;
  min-width:0;
  gap:8px
}
.sequence-secondary-actions [data-action="edit"] {
  flex-wrap:wrap;
  row-gap:2px;
  padding-inline:9px
}
.sequence-actions .sequence-delete {
  flex:0 0 44px;
  width:44px;
  height:auto;
  min-height:48px;
  border:1px solid #f0ced0;
  border-radius:14px;
  background:#fff0f0;
  color:#b33538
}
.sequence-actions .sequence-delete:hover {background:#ffe2e4}
.sequence-delete-confirm .modal-head h2 {
  min-width:0;
  overflow-wrap:anywhere
}
.sequence-delete-confirm .confirm-description {overflow-wrap:anywhere}
@media(max-width:360px){
  .sequence-delete-confirm .modal-head {padding:16px}
  .sequence-delete-confirm .modal-head h2 {font-size:1rem}
}
.button[data-action="view"] {min-width:0;max-width:100%;overflow-wrap:anywhere}
.button[data-action="view"]>span {min-width:0;overflow-wrap:anywhere}

/* Enlarged text must fit the header and settings without widening the page. */
.app-header {height:auto;min-height:calc(88px + var(--safe-top))}
.brand-name {min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.12}
.header-actions,.offline-label {min-width:0}
.offline-label {overflow-wrap:anywhere}
.settings-panel {min-width:0;overflow-wrap:anywhere}
.settings-row>div {min-width:0;flex:1}
@media(min-width:960px){.app-header {min-height:102px}}
@media(max-width:480px){.app-header {min-height:calc(79px + var(--safe-top))}}