/* Shared product components. Use these classes in HTML and generated UI;
   page styles own placement, never another copy of a button or field skin. */
:root{
  --pb-space-1:4px;--pb-space-2:8px;--pb-space-3:12px;
  --pb-space-4:16px;--pb-space-5:24px;--pb-space-6:32px;--pb-space-7:48px;
  --pb-radius-control:16px;--pb-radius-card:24px;--pb-radius-pill:999px;
  --pb-control-height:52px;--pb-control-small:44px;
  --pb-type-body:17px;--pb-type-label:15px;--pb-type-caption:14px;
  --pb-surface:#FFFFFF;--pb-surface-muted:#F1F3FA;--pb-border:#DCE1EE;
  --pb-action:var(--site-action,#FFCE55);--pb-action-hover:#FFD976;--pb-action-edge:var(--site-action-lip,#BE8D19);
  --pb-danger:#A52828;--pb-danger-soft:#FFF0EE;
  --pb-shadow-card:0 6px 0 var(--pb-card-lip),0 22px 44px rgba(5,14,66,.24);
  --pb-focus:var(--site-accent,#FFCE55);
  /* Toy bricks, as on the homepage. A brick has a thick foot (its lip) and a
     light top edge; the main action also has studs. Things click into place. */
  --pb-lip:5px;--pb-click:cubic-bezier(.3,1.5,.5,1);--pb-ease:cubic-bezier(.2,.8,.2,1);
  --pb-stud-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 15' preserveAspectRatio='none'%3E%3Cpath d='M7 15V5a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v10z'/%3E%3C/svg%3E");
  /* Tiles are the quieter pieces (no studs): blue on the canvas, pale on white. */
  --pb-tile:#2B59FF;--pb-tile-hover:#426BFF;--pb-tile-lip:#0E2A8C;--pb-tile-ink:#FFFFFF;--pb-tile-shine:rgba(255,255,255,.2);
  --pb-card-lip:#B4C1EC;
}
:is(.pb-card,.card,.journey-card,.library-card,.payment-receipt,.legal-copy,.parts-panel,.stage,.book-bar,.pb-light,dialog){
  --pb-tile:#EDF0F9;--pb-tile-hover:#F6F8FD;--pb-tile-lip:#C3CBE3;--pb-tile-ink:var(--pb-ink);--pb-tile-shine:rgba(255,255,255,.9);
  --pb-focus:var(--pb-blue);
}
.pb-canvas{--pb-tile:#2B59FF;--pb-tile-hover:#426BFF;--pb-tile-lip:#0E2A8C;--pb-tile-ink:#FFFFFF;--pb-tile-shine:rgba(255,255,255,.2);--pb-focus:var(--site-accent,#FFCE55)}

/* Buttons. Primary: a yellow brick with studs. Secondary: a tile. Quiet: a link. */
.pb-button{
  --brick:var(--pb-action);--brick-hover:var(--pb-action-hover);--brick-lip:var(--pb-action-edge);--brick-ink:var(--pb-ink);--brick-shine:rgba(255,255,255,.45);--lip:var(--pb-lip);
  position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--pb-space-2);
  min-height:var(--pb-control-height);max-width:100%;padding:14px 26px;border:0;
  border-radius:var(--pb-radius-control);background:var(--brick-now,var(--brick));color:var(--brick-ink);
  box-shadow:inset 0 2px 0 var(--brick-shine),0 var(--lip) 0 var(--brick-lip);font:800 var(--pb-type-body)/1.25 var(--pb-font);
  letter-spacing:-.01em;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;
  cursor:pointer;touch-action:manipulation;vertical-align:middle;-webkit-tap-highlight-color:transparent;
  transition:background-color .12s,box-shadow .14s,transform .18s var(--pb-click);
}
.pb-button--primary::after{
  content:"";position:absolute;left:14px;right:14px;bottom:calc(100% - 1px);height:7px;pointer-events:none;
  background:linear-gradient(var(--brick-shine) 0 2px,transparent 2px),var(--brick-now,var(--brick));
  -webkit-mask:var(--pb-stud-shape) 0 0/24px 100% space no-repeat;mask:var(--pb-stud-shape) 0 0/24px 100% space no-repeat;
  transform-origin:50% 100%;transition:transform .28s var(--pb-click);
}
@media(hover:hover){
  .pb-button:hover:not(:disabled):not([aria-disabled=true]){--brick-now:var(--brick-hover);filter:none;transform:translateY(-1px);box-shadow:inset 0 2px 0 var(--brick-shine),0 calc(var(--lip) + 1px) 0 var(--brick-lip)}
  .pb-button--primary:hover:not(:disabled):not([aria-disabled=true])::after{transform:scaleY(1.34)}
}
.pb-button:active:not(:disabled):not([aria-disabled=true]){transform:translateY(calc(var(--lip) - 2px));box-shadow:inset 0 2px 0 var(--brick-shine),0 2px 0 var(--brick-lip);transition-duration:.05s}
.pb-button--primary:active:not(:disabled):not([aria-disabled=true])::after{transform:scaleY(.8);transition-duration:.05s}
.pb-button--secondary{--brick:var(--pb-tile);--brick-hover:var(--pb-tile-hover);--brick-lip:var(--pb-tile-lip);--brick-ink:var(--pb-tile-ink);--brick-shine:var(--pb-tile-shine)}
.pb-button--quiet{background:transparent;color:inherit;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.pb-button--quiet:hover:not(:disabled):not([aria-disabled=true]){background:color-mix(in srgb,currentColor 8%,transparent);box-shadow:none;transform:none}
.pb-button--quiet:active:not(:disabled):not([aria-disabled=true]){box-shadow:none;transform:none}
.pb-button--danger{--brick:var(--pb-danger);--brick-hover:#8B2020;--brick-lip:#791C1C;--brick-ink:#FFFFFF;--brick-shine:rgba(255,255,255,.18)}
.pb-button--small{--lip:4px;min-height:var(--pb-control-small);padding:11px 18px;border-radius:14px;font-size:var(--pb-type-label)}
.pb-button--small.pb-button--primary::after{left:11px;right:11px;height:5px;-webkit-mask-size:20px 100%;mask-size:20px 100%}
.pb-button--block{width:100%}
.pb-button--icon{--lip:4px;width:var(--pb-control-small);height:var(--pb-control-small);min-height:var(--pb-control-small);padding:10px;border-radius:14px;font-size:20px;line-height:1;flex:none}
.pb-button svg{width:20px;height:20px;flex:none}
.pb-button.close-button{position:absolute}
.pb-button .arrow{display:inline-block;transition:transform .2s var(--pb-ease)}
.pb-button:hover .arrow{transform:translateX(4px)}
.pb-button:is(:disabled,[aria-disabled=true]){opacity:.5;cursor:not-allowed;transform:none;filter:none}
/* A brick that can't be pressed yet has no studs; they pop up when it can. */
.pb-button--primary:is(:disabled,[aria-disabled=true])::after{transform:scaleY(0)}
.pb-button:focus-visible,.pb-input:focus-visible{outline:3px solid var(--pb-focus);outline-offset:4px}
.pb-button--primary:focus-visible{outline-offset:7px}
/* Busy: three small bricks hop in turn. */
.pb-button[aria-busy=true]::before{content:'';width:7px;height:6px;margin-right:22px;border-radius:2px;background:currentColor;box-shadow:11px 0,22px 0;animation:pb-control-busy .9s ease-in-out infinite;flex:none}
@keyframes pb-control-busy{0%,100%{transform:none;box-shadow:11px 0,22px 0}20%{transform:translateY(-5px);box-shadow:11px 5px,22px 5px}40%{transform:none;box-shadow:11px -5px,22px 0}60%{transform:none;box-shadow:11px 0,22px -5px}80%{transform:none;box-shadow:11px 0,22px 0}}

/* Cards are white slabs on the blue; .pb-studs gives one a row of studs. */
.pb-card{box-sizing:border-box;border:0;border-radius:var(--pb-radius-card);padding:var(--pb-card-padding,var(--pb-space-5));background:var(--pb-surface);color:var(--pb-ink);box-shadow:var(--pb-shadow-card)}
.pb-card--flush{--pb-card-padding:0}
.pb-studs{position:relative;--stud-colour:var(--pb-surface)}
.pb-studs::before{
  content:"";position:absolute;left:26px;right:26px;bottom:calc(100% - 1px);height:11px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.34) 0 3px,transparent 3px),linear-gradient(transparent 55%,rgba(23,40,120,.09)),var(--stud-colour);
  -webkit-mask:var(--pb-stud-shape) 0 0/44px 100% space no-repeat;mask:var(--pb-stud-shape) 0 0/44px 100% space no-repeat;
}

/* Fields */
.pb-field{display:grid;gap:var(--pb-space-2);min-width:0}
.pb-label{font-size:var(--pb-type-label);font-weight:800;line-height:1.4}
.pb-input{box-sizing:border-box;width:100%;min-width:0;min-height:var(--pb-control-height);padding:12px 16px;border:2px solid var(--pb-border);border-radius:var(--pb-radius-control);background:var(--pb-surface);color:var(--pb-ink);box-shadow:inset 0 3px 0 #EEF1F8;font:500 var(--pb-type-body)/1.4 var(--pb-font);--pb-focus:var(--pb-blue);transition:border-color .15s,box-shadow .15s}
.pb-input:hover:not(:disabled){border-color:#B5BFDC}
.pb-input:focus{border-color:var(--pb-blue);box-shadow:inset 0 3px 0 #EEF1F8,0 0 0 4px rgba(43,89,255,.16)}
select.pb-input{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2317171F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;font-weight:700;cursor:pointer}
textarea.pb-input{min-height:120px;resize:vertical}
.pb-input[aria-invalid=true]{border-color:var(--pb-danger)}
.pb-input:disabled{background-color:var(--pb-surface-muted);opacity:.65;cursor:not-allowed}
.pb-hint{margin:0;font-size:var(--pb-type-caption);line-height:1.5;color:var(--pb-ink-muted)}
.pb-error{margin:0;font-size:var(--pb-type-caption);line-height:1.5;color:var(--pb-danger)}
/* Tick boxes: a small tile that turns blue and clicks when ticked. */
input[type=checkbox]{appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:none;width:24px;height:24px;margin:0;border:2px solid #A9B4D4;border-radius:8px;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0 no-repeat;box-shadow:0 2px 0 #D3DAEC;cursor:pointer;transition:background-color .12s,border-color .12s,background-size .2s var(--pb-click),transform .2s var(--pb-click)}
input[type=checkbox]:hover{border-color:var(--pb-blue)}
input[type=checkbox]:active{transform:scale(.9)}
input[type=checkbox]:checked{border-color:var(--pb-blue);background-color:var(--pb-blue);background-size:18px;box-shadow:0 2px 0 var(--pb-blue-lip)}
input[type=checkbox]:focus-visible{outline:3px solid var(--pb-blue);outline-offset:3px}

.pb-notice{padding:var(--pb-space-4);border:1px solid transparent;border-radius:var(--pb-radius-control);background:var(--pb-blue-soft);color:var(--pb-ink);font-size:var(--pb-type-body);line-height:1.5}
.pb-notice--error{background:var(--pb-danger-soft);color:var(--pb-danger)}
.pb-notice--warning{background:var(--pb-yellow-soft);color:#674C00}
.pb-notice--success{background:var(--pb-green-soft);color:var(--pb-green-text)}
.guide-update{position:relative;display:grid;gap:var(--pb-space-2);padding-right:calc(var(--pb-space-4) + 32px)}
.guide-update p{margin:0}
.guide-update-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pb-space-2)}
.guide-update-close{position:absolute;top:var(--pb-space-2);right:var(--pb-space-2)}
.pb-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pb-radius-pill);background:var(--pb-surface-muted);color:var(--pb-ink);font-size:var(--pb-type-caption);font-weight:700;line-height:1.3}
.pb-badge--success{background:var(--pb-green-soft);color:var(--pb-green-text)}
.pb-badge--warning{background:var(--pb-yellow-soft);color:#674C00}

@media(prefers-reduced-motion:reduce){
  .pb-button,.pb-button::after,input[type=checkbox]{transition:none}
  .pb-button:hover:not(:disabled),.pb-button:active:not(:disabled){transform:none}
  .pb-button[aria-busy=true]::before{animation:none}
}

/* <pb-build> (ui/brick-build.mjs): sized here, not by its script, so its room
   is kept from the first paint and nothing below it moves when it starts. */
pb-build{display:block;width:var(--pb-build-size,260px);height:calc(var(--pb-build-size,260px) * .78);margin:0 auto 4px;pointer-events:none}
pb-build canvas{display:block;width:100%!important;height:100%!important}