/* Homepage physical UI parity: English and Arabic share one component geometry.
   Arabic changes reading direction and typography only; controls mirror their reading flow. */

/* Role field: English action is on the right; Arabic mirrors it to the left. */
.public-v1 .v1-role-control{
  --role-action-size:46px;
  --role-action-inset:8px;
  display:block;
}
.public-v1 .v1-role-control input{
  width:100%;
  min-height:68px;
  padding-left:20px;
  padding-right:calc(var(--role-action-size) + var(--role-action-inset) + 20px);
}
.public-v1 .v1-role-control button{
  position:absolute;
  top:50%;
  right:var(--role-action-inset);
  left:auto;
  width:var(--role-action-size);
  height:var(--role-action-size);
  margin:0;
  transform:translateY(-50%);
}
.public-v1 .v1-role-control button:hover{transform:translateY(-50%) scale(1.035)}
html[dir=rtl] .public-v1 .v1-role-control{direction:rtl}
html[dir=rtl] .public-v1 .v1-role-control input{
  direction:rtl;
  text-align:right;
  padding-right:20px;
  padding-left:calc(var(--role-action-size) + var(--role-action-inset) + 20px);
}
html[dir=rtl] .public-v1 .v1-role-control button{
  left:var(--role-action-inset);
  right:auto;
  direction:rtl;
}

/* Undo the old Arabic-only spacing compression so the two homepages share one rhythm. */
html[dir=rtl] .public-v1 .v1-role-form{margin-top:42px;max-width:710px}
@media(min-width:1061px){
  html[dir=rtl] .public-v1 .v1-stage{
    padding:clamp(48px,6vh,84px) max(32px,calc((100vw - var(--v1-max))/2)) clamp(70px,9vh,120px);
    gap:clamp(54px,7vw,118px);
  }
}
@media(min-width:1061px) and (max-height:850px){
  html[dir=rtl] .public-v1 .v1-stage{padding-block:28px 42px;gap:clamp(38px,4.6vw,68px)}
  html[dir=rtl] .public-v1 .v1-role-form{margin-top:23px}
}
@media(max-width:1060px){
  html[dir=rtl] .public-v1 .v1-role-form{max-width:760px}
}
@media(max-width:820px){
  html[dir=rtl] .public-v1 .v1-role-form{margin-top:34px}
}
@media(max-width:600px){
  .public-v1 .v1-role-control{--role-action-size:42px;--role-action-inset:6px}
  .public-v1 .v1-role-control input{min-height:61px}
  html[dir=rtl] .public-v1 .v1-role-form{margin-top:28px}
}

/* My ProofYear is a small B5-proportioned career-transition dossier.
   ISO B5 is 176 x 250 mm, therefore width / height = 176 / 250. */
.public-v1 .v1-artifact-wrap{
  isolation:isolate;
  width:min(100%,460px);
  justify-self:start;
  perspective:1400px;
}
html[dir=rtl] .public-v1 .v1-artifact-wrap{justify-self:start}

/* Two offset sheets make the dossier read as a stack of working papers. */
.public-v1 .v1-artifact-wrap::before,
.public-v1 .v1-artifact-wrap::after{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  border:1px solid color-mix(in srgb,var(--v1-ink) 13%,transparent);
  border-radius:7px;
  background:
    repeating-linear-gradient(180deg,transparent 0 29px,color-mix(in srgb,var(--v1-ink) 4%,transparent) 29px 30px),
    color-mix(in srgb,var(--v1-surface-solid) 97%,var(--v1-bg-2));
  transform-origin:center;
}
.public-v1 .v1-artifact-wrap::before{
  z-index:-2;
  transform:translate(13px,15px) rotate(2deg);
  box-shadow:0 18px 40px rgba(43,39,31,.10);
}
.public-v1 .v1-artifact-wrap::after{
  z-index:-1;
  transform:translate(7px,8px) rotate(.8deg);
  box-shadow:0 12px 28px rgba(43,39,31,.08);
}

.public-v1 .v1-artifact,
html[dir=rtl] .public-v1 .v1-artifact{
  --file-spine:38px;
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:176 / 250;
  min-height:0;
  grid-template-columns:var(--file-spine) minmax(0,1fr);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--v1-ink) 3%,transparent),transparent 18%),
    var(--v1-surface-solid);
  transform:rotate(1.05deg) rotateY(-1deg);
  transform-origin:center;
}
.public-v1 .v1-artifact:hover,
html[dir=rtl] .public-v1 .v1-artifact:hover{
  transform:rotate(.25deg) rotateY(0deg) translateY(-2px);
}

.public-v1 .v1-artifact-edge,
html[dir=rtl] .public-v1 .v1-artifact-edge{
  grid-column:1;
  writing-mode:vertical-rl;
  padding:17px 0;
}
.public-v1 .v1-artifact-body{
  grid-column:2;
  padding:31px 30px 25px;
}
html[dir=rtl] .public-v1 .v1-artifact-body{
  grid-column:2;
  direction:rtl;
  text-align:right;
  padding:31px 30px 25px;
}
.public-v1 .v1-artifact-body header,
html[dir=rtl] .public-v1 .v1-artifact-body header{padding-bottom:17px}
.public-v1 .v1-artifact-body section,
html[dir=rtl] .public-v1 .v1-artifact-body section{padding:14px 0}
.public-v1 .v1-artifact-body footer,
html[dir=rtl] .public-v1 .v1-artifact-body footer{padding-top:17px}
.public-v1 .v1-artifact-body .v1-artifact-actions,
html[dir=rtl] .public-v1 .v1-artifact-body .v1-artifact-actions{margin-top:17px}

/* Comparable visual hierarchy across scripts, with Arabic line-height adjusted only for legibility. */
.public-v1 .v1-artifact-body header p{font-size:18px}
.public-v1 .v1-artifact-body h2{font-size:29px}
.public-v1 .v1-artifact-body section p{font-size:16px;line-height:1.4}
.public-v1 .v1-artifact-body .v1-artifact-future p{font-size:18px;line-height:1.38}
html[dir=rtl] .public-v1 .v1-artifact-body header p{font-size:18px}
html[dir=rtl] .public-v1 .v1-artifact-body h2{font-size:29px;line-height:1.38}
html[dir=rtl] .public-v1 .v1-artifact-body section p{font-size:16px;line-height:1.58}
html[dir=rtl] .public-v1 .v1-artifact-body .v1-artifact-future p{font-size:18px;line-height:1.52}

/* Keep the dossier action row in the same physical order; Arabic text itself remains RTL. */
html[dir=rtl] .public-v1 .v1-artifact-body .v1-artifact-actions{direction:ltr;justify-content:flex-start}
html[dir=rtl] .public-v1 .v1-build,
html[dir=rtl] .public-v1 .v1-share{direction:rtl}
html[dir=rtl] .public-v1 .v1-build{line-height:1.45;text-align:center}

/* The obsolete decorative landscape strip is not part of the dossier. */
.public-v1 .v1-artifact-scene{display:none!important}

@media(max-width:1060px){
  .public-v1 .v1-artifact-wrap,
  html[dir=rtl] .public-v1 .v1-artifact-wrap{justify-self:center;width:min(100%,450px)}
}
@media(max-width:600px){
  .public-v1 .v1-artifact-wrap,
  html[dir=rtl] .public-v1 .v1-artifact-wrap{width:min(100%,410px)}
  .public-v1 .v1-artifact,
  html[dir=rtl] .public-v1 .v1-artifact{--file-spine:27px;transform:none}
  .public-v1 .v1-artifact:hover,
  html[dir=rtl] .public-v1 .v1-artifact:hover{transform:none}
  .public-v1 .v1-artifact-body,
  html[dir=rtl] .public-v1 .v1-artifact-body{padding:24px 19px 19px}
  .public-v1 .v1-artifact-body header,
  html[dir=rtl] .public-v1 .v1-artifact-body header{padding-bottom:13px}
  .public-v1 .v1-artifact-body section,
  html[dir=rtl] .public-v1 .v1-artifact-body section{padding:11px 0}
  .public-v1 .v1-artifact-body header p,
  html[dir=rtl] .public-v1 .v1-artifact-body header p{font-size:15px}
  .public-v1 .v1-artifact-body h2,
  html[dir=rtl] .public-v1 .v1-artifact-body h2{font-size:25px}
  .public-v1 .v1-artifact-body section p{font-size:14px;line-height:1.38}
  html[dir=rtl] .public-v1 .v1-artifact-body section p{font-size:14px;line-height:1.55}
  .public-v1 .v1-artifact-body .v1-artifact-future p{font-size:16px}
  html[dir=rtl] .public-v1 .v1-artifact-body .v1-artifact-future p{font-size:16px;line-height:1.5}
  .public-v1 .v1-artifact-body footer,
  html[dir=rtl] .public-v1 .v1-artifact-body footer{padding-top:13px}
  .public-v1 .v1-artifact-body .v1-artifact-actions,
  html[dir=rtl] .public-v1 .v1-artifact-body .v1-artifact-actions{margin-top:13px}
  .public-v1 .v1-artifact-wrap::before{transform:translate(9px,10px) rotate(1.5deg)}
  .public-v1 .v1-artifact-wrap::after{transform:translate(5px,5px) rotate(.6deg)}
}
@media(max-width:390px){
  .public-v1 .v1-artifact-wrap,
  html[dir=rtl] .public-v1 .v1-artifact-wrap{width:min(100%,360px)}
  .public-v1 .v1-artifact,
  html[dir=rtl] .public-v1 .v1-artifact{--file-spine:23px}
  .public-v1 .v1-artifact-body,
  html[dir=rtl] .public-v1 .v1-artifact-body{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){
  .public-v1 .v1-artifact,
  .public-v1 .v1-artifact:hover,
  html[dir=rtl] .public-v1 .v1-artifact,
  html[dir=rtl] .public-v1 .v1-artifact:hover{transform:none}
}