/* PERRLA for Word page – its own pieces only. Shared styles live in site.css and world.css. */

/* Hero: a Word window with the PERRLA panel open beside the paper. A sketch with the add-in's real labels, not a screenshot. */
.wwin {
  background: #fff; border: 1px solid var(--gray-300); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,40,81,0.08), 0 24px 48px -24px rgba(10,40,81,0.38);
  font-family: var(--font-body); color: var(--ink); transform: rotate(-0.4deg);
}
.wwin__bar { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); font-size: 0.75rem; color: var(--ink-3); }
.wwin__bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); }
.wwin__bar span { flex: 1; text-align: center; padding-right: 39px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wwin__tabs, .wsk__tabs { display: flex; gap: 1.05rem; padding: 0 14px; border-bottom: 1px solid var(--gray-200); font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.wwin__tabs span, .wsk__tabs span { padding: 7px 0 6px; border-bottom: 2px solid transparent; }
.wwin__tabs .is-on, .wsk__tabs .is-on { color: var(--blue-500); font-weight: 600; border-bottom-color: var(--blue-500); }
.wwin__gap { color: var(--ink-3); }
.wwin__main { display: grid; grid-template-columns: minmax(0, 1fr) 41%; background: var(--gray-100); }
.wwin__doc { display: flex; flex-direction: column; padding: 16px 14px 0; overflow: hidden; }   /* the page runs on past the bottom of the window */
.intro--field .wwin__page, .wwin__page { flex: 1; aspect-ratio: auto; font-size: clamp(8.5px, 0.74vw, 10.5px); padding: 10% 9% 14%; border: 0; box-shadow: 0 1px 3px rgba(33,37,41,0.14); }
.wwin__page .pnum { top: 4%; }
.wwin__caret { display: inline-block; width: 1.5px; height: 1.15em; margin: 0 1px; background: #000; vertical-align: text-bottom; }
.wwin__pane { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 14px; background: #fff; border-left: 1px solid var(--gray-300); font-size: 0.75rem; line-height: 1.35; }
.wwin__title { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.2; }
.wwin__new { display: block; text-align: center; background: var(--green-500); color: #fff; border-radius: 5px; padding: 5px 8px; font-weight: 600; font-size: 0.6875rem; }
.wwin__ref { display: block; border-top: 1px solid var(--gray-200); padding-top: 8px; }
.wwin__reftext { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: 0.6875rem; line-height: 1.4; }
.wwin__add { display: inline-block; margin-top: 6px; border: 1px solid var(--gray-300); border-radius: 4px; padding: 2px 7px; font-size: 0.6875rem; font-weight: 600; color: var(--ink-2); }
.wwin__ref.is-on .wwin__add { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.wwin + .sheet-tag { margin-top: 1.1rem; }

@media (max-width: 900px) { .wwin__page { font-size: 10px; } }
@media (max-width: 560px) {
  .wwin { transform: none; }
  .wwin__main { grid-template-columns: minmax(0, 1fr) 44%; }
  .wwin__doc { padding: 12px 10px 0; }
  .wwin__page { font-size: 8.5px; }
  .wwin__pane { padding: 9px 9px 12px; gap: 7px; }
  .wwin__tabs { gap: 0.8rem; padding: 0 10px; }
  .wwin__tabs span:nth-child(3), .wwin__tabs span:nth-child(4) { display: none; }   /* Layout and References step aside on a phone */
}

/* The four steps: one small sketch of the add-in above each, all the same height */
.wsteps .wsk {
  height: 11.75rem; margin-bottom: 1.1rem; overflow: hidden;   /* tall enough for the lookup result's three-line article title */
  display: flex; flex-direction: column; gap: 7px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--gray-300); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(10,40,81,0.06), 0 10px 20px -14px rgba(10,40,81,0.3);
  font-family: var(--font-body); font-size: 0.75rem; line-height: 1.35; color: var(--ink);
}
.wsk__title { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.2; }
.wsk__label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* First: the ribbon */
.wsteps .wsk--ribbon { padding: 0; gap: 0; }
.wsk__ribbon { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; background: var(--gray-50); }
.wsk__ribbon span { display: grid; place-items: center; text-align: center; padding: 6px 4px; background: #fff; border: 1px solid var(--gray-200); border-radius: 5px; font-size: 0.6875rem; font-weight: 600; line-height: 1.25; }

/* Before you write: the paper type and the format */
.wsteps .wsk--pick { flex-direction: row; gap: 10px; }
.wsk__col { flex: 1.35; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wsk__col + .wsk__col { flex: 1; }
.wsk__col .wsk__label { padding: 0 6px 4px; }
.wsk__col span:not(.wsk__label) { padding: 3px 6px; border-radius: 4px; }
.wsk__col .is-on { background: var(--blue-50); color: var(--blue-900); font-weight: 600; }

/* Mid-sentence: look up a reference */
.wsk__input { display: block; border: 1px solid var(--gray-400); border-radius: 5px; padding: 5px 8px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.01em; }
.wsk__found { display: block; color: var(--ink-2); font-size: 0.6875rem; }
.wsk__found b { display: block; color: var(--ink); font-size: 0.75rem; }
.wsk__btn { align-self: flex-start; border: 1px solid var(--gray-300); border-radius: 4px; padding: 3px 8px; font-size: 0.6875rem; font-weight: 600; color: var(--ink-2); }

/* Before you submit: I'm Finished */
.wsk__btn--line { align-self: stretch; text-align: center; padding: 5px 8px; border-color: var(--blue-500); color: var(--blue-500); }
.wsk__ok { position: relative; display: block; padding-left: 1.6rem; color: var(--ink-2); }
.wsk__ok::before { content: ""; position: absolute; left: 0; top: 0.05rem; width: 1rem; height: 1rem; border-radius: 3px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4.6 10.6l3.4 3.6 7.6-9' stroke='%2327669b' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* where four columns get narrow (about 1000 to 1200px wide), the sketches tighten instead of clipping */
.wsteps > li { container-type: inline-size; }
@container (max-width: 250px) {
  .wsteps .wsk { font-size: 0.6875rem; gap: 5px; padding: 10px 11px; }
  .wsteps .wsk--ribbon { padding: 0; }
  .wsk__tabs { gap: 0.7rem; padding: 0 10px; }
  .wsk__tabs span:nth-child(3) { display: none; }
  .wsk__ribbon { padding: 10px; gap: 5px; }
  .wsk__ribbon span { font-size: 0.625rem; }
  .wsteps .wsk--pick { gap: 6px; }
  .wsk__col span:not(.wsk__label) { padding: 2px 5px; }
  .wsk__found b { font-size: 0.6875rem; }
  .wsk__title { font-size: 0.8125rem; }
}
@media (max-width: 600px) { .wsteps .wsk { height: auto; min-height: 8.5rem; } }