/* The .pub tool's own interface. Reference: design/pub-tool-in-shell.html.
 *
 * Declares only what belongs to the tool and takes every colour from the
 * shell's tokens through the alias block below, so the shell owns the
 * palette. An earlier version of this file was cut with a regular
 * expression and lost five closing braces — the browser then discarded
 * everything after the first unclosed rule and the layout silently fell
 * apart. It is generated by counting braces now.
 */

.ch-scope{
  --ch-desk:#e7e9ef;          /* the surface pages sit on */
  --ch-card:#ffffff;
  --ch-well:#f2f4f8;
  --ch-ink:#15233d;
  --ch-ink-2:#4b5a78;
  --ch-ink-3:#7f8ba3;
  --ch-rule:#cfd5e1;
  --ch-action:#1f49d6;        /* the only accent on the whole site */
  --ch-action-ink:#ffffff;
  --ch-action-hover:#1638ae;
  --ch-action-soft:#e2e8fc;
  --ch-ok:#1a6b4c;
  --ch-warn:#bd1467;
  --ch-warn-soft:#fce4ef;
  --ch-lift:0 1px 0 rgba(21,35,61,.05), 0 12px 26px -14px rgba(21,35,61,.45);
  --ch-lift-sm:0 1px 0 rgba(21,35,61,.05), 0 5px 12px -8px rgba(21,35,61,.4);
  --ch-serif:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style","Noto Serif",Georgia,serif;
  --ch-sans:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* aliases: pub-viewer.css keeps working verbatim and follows the shell */
  --pv-desk:var(--ch-desk);   --pv-card:var(--ch-card);   --pv-well:var(--ch-well);
  --pv-ink:var(--ch-ink);     --pv-ink-2:var(--ch-ink-2); --pv-ink-3:var(--ch-ink-3);
  --pv-rule:var(--ch-rule);   --pv-guide:var(--ch-action); --pv-guide-ink:var(--ch-action-ink);
  --pv-guide-hover:var(--ch-action-hover); --pv-guide-soft:var(--ch-action-soft);
  --pv-ok:var(--ch-ok);       --pv-margin:var(--ch-warn);
  --pv-serif:var(--ch-serif); --pv-sans:var(--ch-sans);
}

.pv-tool{
  --pv-paper:#ffffff;       /* never themed: this is the visitor's page */
  --pv-paper-edge:#c5ccd9;
  --pv-frame:#96a1b6;       /* the empty picture frame, on the page and in the note */
  --pv-frame-fill:#f4f6f9;  /* it is drawn on the visitor's page, so it is not themed either */
}

.pv-sheet{position:relative;background:var(--ch-card);border:1px solid var(--ch-rule);
  border-radius:2px;box-shadow:var(--ch-lift);}

.pv-trimmed{padding:11px;--tm:var(--ch-rule);background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--tm),var(--tm)),linear-gradient(var(--tm),var(--tm)),
    linear-gradient(var(--tm),var(--tm)),linear-gradient(var(--tm),var(--tm)),
    linear-gradient(var(--tm),var(--tm)),linear-gradient(var(--tm),var(--tm)),
    linear-gradient(var(--tm),var(--tm)),linear-gradient(var(--tm),var(--tm));
  background-size:1px 13px,13px 1px,1px 13px,13px 1px,1px 13px,13px 1px,1px 13px,13px 1px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;}

.pv-start{display:grid;gap:1.5rem;}

@media (min-width:62rem){
  .pv-start{grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:3rem;align-items:center;}
  .pv-start__sheet{grid-column:2;grid-row:1;}
  .pv-start__say{grid-column:1;grid-row:1;}
}

.pv-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.8rem 1.2rem;min-height:15rem;}

.pv-drop::before{content:"";position:absolute;inset:13px;border:1px dashed var(--ch-action);
  opacity:.4;pointer-events:none;}

.pv-drop__i{color:var(--ch-action);}

.pv-drop__t{font-family:var(--ch-serif);font-weight:700;font-size:1.2rem;line-height:1.25;
  margin:.85rem 0 1.05rem;max-width:20ch;}

.pv-drop .ch-btn{width:100%;max-width:20rem;min-height:56px;font-size:1.06rem;}

.pv-drop__hint{margin:.8rem 0 0;font-size:.93rem;color:var(--ch-ink-2);}

.pv-drop__fine{margin:.45rem 0 0;font-size:.83rem;color:var(--ch-ink-3);max-width:32ch;}

@media (min-width:62rem){.pv-drop{aspect-ratio:210/178;min-height:0;}}

@media (hover:none) and (pointer:coarse){
  .pv-drop__hint{display:none;}
  .pv-drop{min-height:13.5rem;}
}

.pv-open{position:relative;overflow:hidden;padding:1.6rem 1.3rem;min-height:15rem;
  display:flex;flex-direction:column;justify-content:center;}

@media (min-width:62rem){.pv-open{aspect-ratio:210/185;min-height:0;}}

.pv-open__sweep{position:absolute;left:0;right:0;height:24%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--ch-action-soft),transparent);
  animation:pv-sweep 1.5s cubic-bezier(.45,0,.55,1) infinite;}

.pv-open__in{position:relative;}

.pv-open__t{margin:1.2rem 0 0;font-weight:650;font-size:1.02rem;}

.pv-open__s{margin:.15rem 0 0;font-size:.9rem;color:var(--ch-ink-3);max-width:34ch;}

.pv-meter{height:6px;border-radius:99px;background:var(--ch-action-soft);overflow:hidden;
  margin:.85rem 0 0;max-width:20rem;}

.pv-meter__v{display:block;height:100%;border-radius:99px;background:var(--ch-action);}

.pv-open__safe{margin:1.15rem 0 0;font-size:.9rem;color:var(--ch-ink-2);max-width:36ch;
  display:flex;gap:.45rem;align-items:flex-start;}

.pv-open__safe svg{flex:none;color:var(--ch-ok);margin-top:.15rem;}

.pv-file{display:flex;align-items:center;gap:.7rem;min-width:0;}

.pv-file>svg{flex:none;color:var(--ch-action);}

.pv-file__n{font-weight:650;min-width:0;overflow-wrap:anywhere;line-height:1.25;}

.pv-file__m{display:block;font-weight:400;font-size:.85rem;color:var(--ch-ink-3);margin-top:.08rem;}

.pv-result{background:var(--ch-card);border:1px solid var(--ch-rule);border-radius:12px;
  box-shadow:var(--ch-lift-sm);overflow:hidden;}

.pv-result__head{padding:1rem 1.15rem;display:flex;flex-wrap:wrap;gap:.55rem 1rem;
  align-items:center;justify-content:space-between;border-bottom:1px solid var(--ch-rule);}

.pv-safe{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;
  color:var(--ch-ok);}

.pv-safe svg{flex:none;}

.pv-acts{display:flex;flex-wrap:wrap;gap:.6rem;padding:1.15rem 1.15rem .55rem;}

.pv-acts .ch-btn{flex:1 1 14rem;}

.pv-acts .pv-acts__link{flex:0 0 auto;background:none;border:0;color:var(--ch-ink-2);
  padding:.8rem .5rem;text-decoration:underline;}

.pv-acts .pv-acts__link:hover{color:var(--ch-action);background:none;}

.pv-acts__fine{margin:0;padding:0 1.15rem 1.15rem;font-size:.85rem;color:var(--ch-ink-3);}

.pv-acts--only{padding-bottom:1.15rem;}

.pv-share{display:none;}

.pv-can-share .pv-share{display:inline-flex;}

.pv-can-share .pv-save{background:var(--ch-card);color:var(--ch-ink);border-color:var(--ch-rule);}

.pv-can-share .pv-save:hover{background:var(--ch-card);border-color:var(--ch-action);color:var(--ch-action);}

.pv-acts__fine--share{display:none;}

.pv-can-share .pv-acts__fine--share{display:block;}

.pv-can-share .pv-acts__fine--save{display:none;}

@media (max-width:36rem){
  .pv-acts{flex-direction:column;}
  .pv-acts .ch-btn{width:100%;flex:1 1 auto;}
}

.pv-board{background:var(--ch-desk);border-top:1px solid var(--ch-rule);
  padding:1.25rem 1.15rem 1.15rem;}

.pv-paper{width:100%;max-width:25rem;margin:0 auto;background:var(--pv-paper);
  border:1px solid var(--pv-paper-edge);border-radius:2px;box-shadow:var(--ch-lift);
  overflow:hidden;}

.pv-paper>svg{display:block;width:100%;height:auto;}

.pv-paper--wide{max-width:33rem;}

.pv-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem .5rem;margin:1rem 0 0;}

.pv-pager__grp{display:flex;align-items:center;gap:.4rem;}

.pv-pager__n{font-size:.93rem;font-weight:650;color:var(--ch-ink-2);text-align:center;
  padding:0 .35rem;min-width:8.5rem;}

.pv-step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--ch-rule);border-radius:8px;background:var(--ch-card);
  color:var(--ch-ink);cursor:pointer;padding:0;}

.pv-step:hover{border-color:var(--ch-action);color:var(--ch-action);}

.pv-step[aria-disabled="true"]{color:var(--ch-ink-3);opacity:.5;cursor:default;}

.pv-step[aria-disabled="true"]:hover{border-color:var(--ch-rule);color:var(--ch-ink-3);}

.pv-step svg{transform:rotate(0);}

.pv-step--next svg{transform:rotate(180deg);}

.pv-fit{display:flex;border:1px solid var(--ch-rule);border-radius:8px;overflow:hidden;
  background:var(--ch-card);}

.pv-fit button{min-height:44px;padding:.4rem .8rem;border:0;background:transparent;
  font-family:var(--ch-sans);font-size:.89rem;font-weight:650;color:var(--ch-ink-2);cursor:pointer;}

.pv-fit button+button{border-left:1px solid var(--ch-rule);}

.pv-fit button[aria-pressed="true"]{background:var(--ch-action);color:var(--ch-action-ink);}

.pv-strip{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;
  list-style:none;margin:1.1rem -1.15rem 0;padding:.25rem 1.15rem .5rem;}

.pv-strip li{flex:0 0 auto;scroll-snap-align:center;}

.pv-strip__b{display:block;border:0;background:none;padding:0;cursor:pointer;
  color:var(--ch-ink-3);text-decoration:none;}

.pv-strip__b:hover{text-decoration:none;color:var(--ch-action);}

.pv-strip__t{display:block;width:3.4rem;background:var(--pv-paper);
  border:1px solid var(--pv-paper-edge);border-radius:2px;overflow:hidden;}

.pv-strip__t>svg{display:block;width:100%;height:auto;}

.pv-strip__n{display:block;font-size:.72rem;line-height:1.5;text-align:center;}

.pv-strip__b:hover .pv-strip__t{border-color:var(--ch-action);}

.pv-strip [aria-current="true"] .pv-strip__t{outline:2px solid var(--ch-action);outline-offset:1px;}

.pv-strip [aria-current="true"] .pv-strip__n{color:var(--ch-action);font-weight:650;}

@media (min-width:48rem){
  .pv-strip{flex-wrap:wrap;overflow:visible;justify-content:flex-start;margin:1.1rem 0 0;
    padding:.25rem 0 0;}
  .pv-strip__t{width:4rem;}
}

.pv-fine{margin:.9rem 0 0;font-size:.87rem;color:var(--ch-ink-3);max-width:60ch;}

.pv-fine summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;
  min-height:38px;font-weight:600;color:var(--ch-ink-2);}

.pv-fine summary::-webkit-details-marker{display:none;}

.pv-fine summary:hover{color:var(--ch-action);}

.pv-fine summary svg{flex:none;transition:transform .15s ease;}

.pv-fine[open] summary svg{transform:rotate(180deg);}

.pv-fine p{margin:.1rem 0 .3rem;line-height:1.55;}

.pv-note{display:flex;gap:.85rem;align-items:flex-start;padding:1.05rem 1.15rem;
  background:var(--ch-well);border-left:3px solid var(--ch-ink-3);
  border-bottom:1px solid var(--ch-rule);}

.pv-note>svg{flex:none;margin-top:.15rem;color:var(--ch-ink-3);}

.pv-note__b{min-width:0;}

.pv-note__t{font-family:var(--ch-serif);font-weight:700;font-size:1.14rem;line-height:1.25;
  margin:0 0 .35rem;color:var(--ch-ink);}

.pv-note p{margin:0 0 .6rem;color:var(--ch-ink-2);font-size:.96rem;line-height:1.55;max-width:60ch;}

.pv-note p:last-child{margin-bottom:0;}

.pv-note details{margin-top:.5rem;}

.pv-note summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;
  min-height:40px;font-family:var(--ch-sans);font-weight:650;font-size:.93rem;color:var(--ch-ink);}

.pv-note summary::-webkit-details-marker{display:none;}

.pv-note summary:hover{color:var(--ch-action);}

.pv-note summary svg{flex:none;transition:transform .15s ease;}

.pv-note details[open] summary svg{transform:rotate(180deg);}

.pv-note__acts{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem;}

.pv-note--stop{background:var(--ch-warn-soft);border-left-color:var(--ch-warn);}

.pv-note--stop>svg{color:var(--ch-warn);}

.pv-note--alone{border:1px solid var(--ch-rule);border-left:3px solid var(--ch-ink-3);
  border-radius:0 10px 10px 0;margin:0 0 1.4rem;}

.pv-note--alone.pv-note--stop{border-color:transparent;border-left-color:var(--ch-warn);}

@media (max-width:30rem){
  .pv-board{padding:1rem .8rem .9rem;}
  .pv-strip{margin-left:-.8rem;margin-right:-.8rem;padding-left:.8rem;padding-right:.8rem;}
  .pv-pager__n{min-width:7.5rem;}
}

/* Four states the design file shows as separate sections but does not name as
 * classes: in a static mockup each is simply a different block of markup, while
 * in a working page they are one block that changes. */
.pv-step__name { font-size: .95rem; color: var(--pv-ink-2); margin: 0 0 .35rem; }
.pv-step__t { font-family: var(--ch-serif); font-weight: 700; font-size: 1.2rem;
  line-height: 1.25; margin: 0 0 .5rem; }
.pv-step__fine { font-size: .9rem; color: var(--pv-ink-3); margin: .6rem 0 0; }

/* First visit only, while the part of the page that reads Publisher files
 * arrives. Later visits have nothing to wait for, so there is deliberately no
 * bar then: a meter for a third of a second makes fast feel slow. */
.pv-bar { height: 4px; border-radius: 999px; background: var(--pv-rule); overflow: hidden; }
.pv-bar > span { display: block; height: 100%; width: 40%; border-radius: inherit;
  background: var(--pv-guide); animation: pv-slide 1.1s ease-in-out infinite; }
@keyframes pv-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .pv-bar > span { animation: none; width: 100%; } }

/* Fit / Full size read as one control, not two loose buttons. */
.pv-fitset { display: inline-flex; gap: .3rem; margin-left: auto; }

/* The only state that uses the colour reserved for failure. A document that
 * opened with pictures missing is a note and must never look like this. */
.pv-sheet--bad { border-color: var(--pv-stop, var(--ch-warn)); text-align: center; padding: 2rem 1.2rem; }
.pv-sheet--bad > svg { color: var(--pv-stop, var(--ch-warn)); }

/* The fine print under the button says different things depending on how the
 * visitor got here. With a mouse it is worth saying which files work; with a
 * thumb the useful sentence is where to find the file, because the picker is
 * about to open and the answer is rarely "Documents". */
.pv-only-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .pv-only-pointer { display: none; }
  .pv-only-touch { display: block; }
}