/* Self-employed: three papers that fan out in the opener, and the desk whose papers shuffle by kind of work. */

/* ---------- opener widget: accounts, tax return, bank statement ---------- */
.docw { padding: 10px 14px 12px; }
.docw svg { width: 100%; height: auto; display: block; overflow: visible; }
.docw__shadow { fill: rgba(38,44,48,.12); }
.docw__paper { fill: #fff; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.docw__band { fill: var(--mist); stroke: var(--ink); stroke-width: 3; }
.docw__card--bank .docw__band { fill: var(--sky); }
.docw__card--acc .docw__band { fill: var(--ink); }
.docw__card--acc .docw__t { fill: #fff; }
.docw__t { font-family: var(--f-display); font-weight: 800; font-size: 16px; fill: var(--ink); }
.docw__rows { fill: none; stroke: var(--mist); stroke-width: 4; stroke-linecap: round; }
.docw__amt { fill: none; stroke: var(--steel); stroke-width: 4; stroke-linecap: round; }
.docw__sig { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.docw__box { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.docw__tick { fill: none; stroke: var(--steel-deep); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.docw__bars { fill: none; stroke: var(--steel); stroke-width: 10; }
.docw__axis { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.docw__note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); }
.docw__note .hand { font-size: 1.6rem; line-height: 1; }
.docw__note .pin-ico { color: var(--ink); --pin-house: #fff; width: 24px; height: 32px; }
/* the fan as it rests without JS or with reduced motion */
.no-js .docw__card--bank, .reduced .docw__card--bank, .motion-fail .docw__card--bank { transform: rotate(-24deg); transform-origin: 150px 262px; }
.no-js .docw__card--acc, .reduced .docw__card--acc, .motion-fail .docw__card--acc { transform: rotate(24deg); transform-origin: 150px 262px; }

/* ---------- which kind of self-employed are you? ---------- */
.sek { position: relative; padding: clamp(56px, 9vh, 104px) 0; background: var(--sky) url('../img/map-grid.svg') 0 0 / 64px 64px; overflow: clip; }
.sek::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 72% 55%, rgba(255,255,255,.32), transparent 70%); pointer-events: none; }
.sek__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4.5vw, 80px); align-items: center; }
.sek__title { font-size: clamp(2rem, 3.2vw, 3.3rem); }
.sek__lede { font-size: 1.15rem; line-height: 1.55; color: var(--ink); margin: 16px 0 0; }

/* tabs: only once the script has wired them; without it every panel shows */
.sek__tabs { display: none; }
.sek.is-tabs .sek__tabs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px 0 16px; }
.sek__tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; background: rgba(255,255,255,.5); border: 2px solid var(--ink); border-radius: var(--r-btn); font-family: var(--f-display); font-weight: 700; font-size: 1.04rem; color: var(--ink); text-align: left; cursor: pointer; transition: color .35s var(--ease), background-color .35s var(--ease); }
.sek__tab:hover { background: rgba(255,255,255,.85); }
.sek__tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.sek.is-ind .sek__tab[aria-selected="true"] { background: transparent; }
.sek__ico { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sek__ind { position: absolute; left: 0; top: 0; width: 0; height: 0; background: var(--ink); z-index: 0; pointer-events: none; }

.sek__panels { display: grid; gap: 12px; margin-top: 24px; }
.sek.is-tabs .sek__panels { margin-top: 0; }
.sek__panel { position: relative; background: rgba(255,255,255,.72); border-radius: var(--r); padding: 20px 24px 22px; border-left: 4px solid var(--ink); }
.sek__panel:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sek__ptitle { font-size: 1.45rem; margin-bottom: 8px; }
.sek__ptext { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.sek__plist-h { margin: 12px 0 4px; font-weight: 600; }
.sek__plist li { position: relative; padding-left: 20px; }
.sek__plist li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; background: var(--ink); }
.sek__plist span { color: var(--slate); }
/* with the desk working, the list is read out but the desk shows it */
.sek.is-tabs .sek__plist-h, .sek.is-tabs .sek__plist { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* without the script: the four kinds sit in a row under the heading and the desk */
@media (min-width: 1101px) {
  .sek:not(.is-tabs) .sek__grid { grid-template-rows: auto auto 1fr auto; align-items: start; }
  .sek:not(.is-tabs) .sek__side { display: contents; }
  .sek:not(.is-tabs) .sek__title { grid-column: 1; grid-row: 1; }
  .sek:not(.is-tabs) .sek__lede { grid-column: 1; grid-row: 2; }
  .sek:not(.is-tabs) .desk { grid-column: 2; grid-row: 1 / 4; }
  .sek:not(.is-tabs) .sek__panels { grid-column: 1 / -1; grid-row: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; }
}
@media (max-width: 1100px) { .sek:not(.is-tabs) .sek__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sek:not(.is-tabs) .sek__ptitle { font-size: 1.2rem; }
.sek:not(.is-tabs) .sek__ptext { font-size: 1rem; }

/* the desk: papers sized from the screen height so the section fits one screen */
.desk { --dh: min(62vh, 560px); --gap: 18px; --ph: calc((var(--dh) * .84 - var(--gap)) / 2); --pw: calc(var(--ph) * .78); position: relative; height: var(--dh); perspective: 1800px; }
.desk__top { position: absolute; inset: 0; border-radius: var(--r); overflow: clip; background:
  radial-gradient(ellipse 70% 60% at 30% 35%, rgba(135,192,215,.16), transparent 70%),
  var(--ink) url('../img/map-grid.svg') 0 0 / 40px 40px; background-blend-mode: normal, soft-light;
  box-shadow: 0 40px 80px rgba(38,44,48,.35), inset 0 0 0 1px rgba(255,255,255,.06); transform-style: preserve-3d; }
.desk__props { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 46%; pointer-events: none; }
.desk__calc rect { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2.5; }
.desk__calc .desk__screen { fill: rgba(135,192,215,.22); stroke: var(--sky); }
.desk__digits { font-family: var(--f-display); font-weight: 800; font-size: 16px; fill: var(--sky); letter-spacing: .02em; }
.desk__keys rect { stroke: rgba(255,255,255,.4); stroke-width: 2; }
.desk__pen-body { fill: var(--sky); stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.desk__pen-tip { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.desk__pen-clip { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.desk__ring { fill: none; stroke: rgba(135,192,215,.35); stroke-width: 7; stroke-dasharray: 200 22 60 14; }
.desk__ring--2 { stroke: rgba(135,192,215,.18); stroke-width: 4; stroke-dasharray: 120 30; }
.desk__note { position: absolute; left: calc(6% + var(--pw) * 2 + var(--gap) + 34px); top: 50%; z-index: 3; padding: 14px 18px 18px; min-width: 132px; background: var(--sky); border-radius: var(--r); box-shadow: 0 14px 26px rgba(0,0,0,.3); transform: rotate(-5deg); color: var(--ink); }
.desk__note .hand { display: block; font-size: 1.75rem; line-height: 1.05; }
.desk__spread { position: absolute; left: 6%; top: 8%; z-index: 2; display: grid; grid-template-columns: repeat(2, var(--pw)); grid-auto-rows: var(--ph); gap: var(--gap); }
.desk__aside { position: absolute; right: calc(var(--pw) * -.6); bottom: calc(var(--ph) * -.7); z-index: 1; width: var(--pw); height: var(--ph); }
.desk__aside .paper { position: absolute; inset: 0; }
.desk__aside .paper:nth-child(1) .paper__in { transform: rotate(-14deg); }
.desk__aside .paper:nth-child(2) .paper__in { transform: rotate(-4deg) translate(-8px, -10px); }
.desk__aside .paper:nth-child(3) .paper__in { transform: rotate(9deg) translate(-14px, -18px); }
.desk__aside .paper:nth-child(4) .paper__in { transform: rotate(-22deg) translate(-4px, -26px); }
.desk__aside .paper:nth-child(5) .paper__in { transform: rotate(3deg) translate(-20px, -30px); }
.desk__spread .paper:nth-child(1) .paper__in { transform: rotate(-2.5deg); }
.desk__spread .paper:nth-child(2) .paper__in { transform: rotate(2deg); }
.desk__spread .paper:nth-child(3) .paper__in { transform: rotate(1.5deg); }
.desk__spread .paper:nth-child(4) .paper__in { transform: rotate(-1.8deg); }
.desk__hint { position: absolute; left: 6%; top: -2.7rem; margin: 0; font-size: 1.7rem; line-height: 1; color: var(--ink); transform: rotate(-2deg); }

.paper { width: var(--pw); height: var(--ph); }
.paper__in { height: 100%; display: flex; flex-direction: column; padding: calc(var(--ph) * .085) calc(var(--pw) * .1) calc(var(--ph) * .07); background: #fff; border-radius: var(--r); box-shadow: 0 16px 30px rgba(0,0,0,.35), 0 2px 0 rgba(38,44,48,.06); color: var(--ink); }
.desk__aside .paper__in { box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.paper__tag { align-self: flex-start; margin: 0; padding: 1px 8px; background: var(--mist); border-radius: var(--r); font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-deep); }
.paper__title { margin: .6em 0 .3em; font-family: var(--f-display); font-weight: 800; font-size: clamp(1rem, calc(var(--ph) * .078), 1.35rem); line-height: 1.12; letter-spacing: -0.01em; }
.paper__name { --hl: 100%; padding: 0 3px; margin: 0 -3px; background: linear-gradient(rgba(135,192,215,.8), rgba(135,192,215,.8)) 0 92% / var(--hl) .5em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.paper__sub { margin: 0; font-size: .9rem; line-height: 1.35; color: var(--slate); }
.paper__art { width: 72%; height: auto; margin-top: auto; fill: none; stroke: #C3D6DF; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.paper__art .paper__ink { stroke: var(--steel-deep); }
.paper__art .paper__dot { fill: var(--sky); stroke: var(--steel-deep); }

@media (max-width: 1100px) {
  .sek__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .desk { --dh: min(60vh, 540px); margin-top: 52px; }
  /* tabs, then the desk they change, then the words, so a tap shows its papers on the same screen */
  .sek.is-tabs .sek__side { display: contents; }
  .sek.is-tabs .sek__title { order: 1; }
  .sek.is-tabs .sek__lede { order: 2; }
  .sek.is-tabs .sek__tabs { order: 3; margin-bottom: 0; }
  .sek.is-tabs .desk { order: 4; }
  .sek.is-tabs .sek__panels { order: 5; margin-top: 18px; }
}
@media (max-width: 700px) {
  .sek__title { font-size: 1.95rem; }
  .sek__lede { font-size: 1.05rem; }
  .sek__tab { padding: 8px 10px; gap: 8px; font-size: .98rem; min-height: 48px; }
  .sek__ico { width: 20px; height: 20px; }
  .sek:not(.is-tabs) .sek__panels { grid-template-columns: minmax(0, 1fr); }
  .sek__panel { padding: 16px 18px 18px; }
  .desk { --gap: 12px; --pw: calc((100vw - var(--gut) * 2 - 24px - var(--gap)) / 2); --ph: calc(var(--pw) / .78); --dh: calc(var(--ph) * 2 + var(--gap) + 40px); }
  .desk__spread { left: 12px; top: 20px; }
  .desk__props, .desk__note { display: none; }
  .desk__aside { right: calc(var(--pw) * -.82); bottom: calc(var(--ph) * -.86); }
  .paper__in { padding: 10px 10px 8px; }
  .paper__title { font-size: .98rem; }
  .paper__sub { font-size: .875rem; }
  .paper__tag { font-size: .875rem; padding: 0 6px; }
}
.sek__nw { white-space: nowrap; }