/* English Writing component contract; isolated to Writing mode. */
.writing-workspace {
 --mint-line:var(--line);--mint-line-strong:var(--container-line);--evergreen:var(--ink);--evergreen-soft:var(--ink-soft);
 --mint-action:var(--action);--mint-action-dark:var(--action-dark);--coral:#FF6B6B;
 --panel-shadow:0 22px 54px -38px rgba(23,62,56,.42),0 6px 18px -14px rgba(23,62,56,.18);
 --radius-card:30px;--radius-pill:999px;--ease-out:cubic-bezier(.22,1,.36,1);
 direction:ltr;grid-template-columns:minmax(380px,43fr) minmax(0,57fr);gap:clamp(14px,1.4vw,22px);
}
.writing-workspace .tray-column{grid-template-rows:minmax(0,1fr);align-content:stretch;}
.writing-workspace .panel.tray{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;padding:clamp(11px,1.1vw,16px);gap:clamp(11px,1.1vw,16px);border:2px solid var(--container-line);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 32%),var(--surface);box-shadow:var(--panel-shadow),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -4px 10px -6px rgba(23,62,56,.14);}
.writing-workspace .letter-grid{flex:initial;gap:clamp(8px,.85vw,13px);align-content:space-evenly;}
.writing-workspace .tray-title{font-size:.8rem;font-weight:700;color:var(--evergreen-soft);}
.writing-workspace .tray-count{min-height:34px;padding:7px 12px;border:1px solid var(--mint-line);border-radius:999px;background:var(--surface-sunk);color:var(--evergreen-soft);font-size:.75rem;}
.writing-workspace .tray-head{direction:rtl;}
.stage-column.write-column { grid-template-rows: minmax(0, 1fr); }

.write-shell {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(320px, 1fr) auto;
  align-content: stretch;
  gap: 12px;
  overflow: auto;
  padding: clamp(10px, .8vw, 14px);
  border: 2px solid var(--container-line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--panel-shadow);
}

.w-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; min-width: max-content; }
.w-group { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.w-controls-group { justify-content: center; }
.w-bar-card {
  min-width: 0;
  border: 1.5px solid var(--mint-line-strong);
  border-radius: 20px;
  background: #FFFEF8;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.w-bar-card::-webkit-scrollbar { display: none; }
.w-stepper { display: inline-flex; align-items: center; gap: 5px; }

.w-case { display: inline-flex; padding: 4px; gap: 3px; border: 1.5px solid var(--mint-line); border-radius: var(--radius-pill); background: #FFF6D1; }
.w-single-switch { cursor: pointer; transition: transform 120ms var(--ease-out); }
.w-single-switch:active { transform: scale(.95); }
.w-single-switch:focus-visible { outline: 3px solid var(--evergreen); outline-offset: 3px; }
.w-single-switch .w-case-btn { display: inline-flex; justify-content: center; align-items: center; min-width: 66px; min-height: 42px; pointer-events: none; }
.w-case-btn {
  min-height: 44px;
  padding: 7px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--evergreen-soft);
  background: transparent;
  font-weight: 900;
  font-size: .82rem;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.w-case-btn:hover { color: var(--evergreen); }
.w-case-btn.is-active { color: var(--evergreen); background: #FFFEF8; border-color: var(--mint-line-strong); box-shadow: 0 2px 6px -3px rgba(23,62,56,.25); }
.w-case-btn:focus-visible { outline: 3px solid var(--evergreen); outline-offset: 3px; }

.w-hear { --button-bg: #FFFEF8; --button-dark: transparent; width: 52px; min-width: 52px; height: 52px; padding: 0; justify-content: center; border: 1.5px solid var(--mint-line-strong); box-shadow: none; }
.w-hear svg { width: 21px; height: 21px; }
.w-hear:hover:not(:disabled) { transform: none; filter: none; background: var(--surface-sunk); }
.w-hear:active:not(:disabled) { transform: scale(.94); box-shadow: inset 0 2px 5px rgba(23,62,56,.16); }

.w-pen-drop { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.w-pen-current {
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--mint-line-strong);
  border-radius: 50%;
  background: #FFFEF8;
  cursor: pointer;
  box-shadow: none;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.w-pen-current:hover { background: var(--surface-sunk); }
.w-pen-current:active { transform: scale(.94); box-shadow: inset 0 2px 5px rgba(23,62,56,.16); }
.w-pen-current:focus-visible { outline: 3px solid var(--evergreen); outline-offset: 3px; }
.w-pen-dot {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pen);
  border: 1.5px solid rgba(23,62,56,.18);
}
.w-pen-menu {
  z-index: 30;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--mint-line-strong);
  border-radius: 16px;
  background: #FFFEF8;
  box-shadow: var(--panel-shadow);
}
.w-pen-menu[hidden] { display: none; }
.w-pen-menu .w-pen { width: 26px; height: 26px; flex: none; }
.w-pen {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: var(--pen);
  cursor: pointer;
  box-shadow: 0 2px 5px -2px rgba(23,62,56,.4);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.w-pen:hover { transform: scale(1.12); }
.w-pen.is-active { transform: scale(1.18); box-shadow: 0 0 0 3px #FFFEF8, 0 0 0 5px var(--pen); }
.w-pen:focus-visible { outline: 3px solid var(--evergreen); outline-offset: 3px; }

.w-tool-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: center; }
.w-controls-group .w-tool { padding-inline: 14px; font-size: .9rem; }
.w-head .w-case-btn { padding-inline: 14px; }
.w-tool {
  --button-bg: #FFFEF8;
  --button-dark: transparent;
  min-height: 52px;
  padding: 8px 14px;
  border: 1.5px solid var(--mint-line-strong);
  border-radius: var(--radius-pill);
  font-weight: 900;
  font-size: .8rem;
  box-shadow: none;
}
.w-tool svg { width: 18px; height: 18px; }
.w-tool:hover:not(:disabled) { transform: none; filter: none; background: var(--surface-sunk); }
.w-tool:active:not(:disabled) { transform: scale(.96); box-shadow: inset 0 2px 5px rgba(23,62,56,.16); }
.w-tool:disabled { opacity: .38; cursor: not-allowed; }
.w-tool.is-on { --button-bg: #E4FBF1; border-color: var(--mint-action-dark); color: var(--mint-action-dark); }
.w-canvas-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  border: 1.5px solid var(--mint-line-strong);
  border-radius: 20px;
  background: #FFFEF8;
  overflow: hidden;
  touch-action: none;
}
.w-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
@media (max-width: 520px) {
  .w-head { justify-content: space-between; }
  .w-head .w-case-btn { padding-inline: 9px; font-size: .76rem; }
  .w-controls-group, .w-tool-actions { gap: 5px; }
  .w-controls-group .w-tool { padding-inline: 14px; font-size: .9rem; }
  .is-guided .w-progress { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; }
  .is-guided .w-progress-icon { grid-column: 1; grid-row: 1; width: 32px; height: 32px; }
  .is-guided .w-progress-body { grid-column: 2 / -1; grid-row: 1; }
  .is-guided .w-progress-num { grid-column: 2; grid-row: 2; justify-self: end; }
  .is-guided .w-progress > button { grid-column: 3; grid-row: 2; }
}

.w-start-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--coral);
  border: 3px solid #FFFEF8;
  box-shadow: 0 2px 6px rgba(200, 66, 66, .45);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.25); }
}

.w-progress-slot { width: 100%; margin: 0 auto; display: grid; align-self: start; }
.w-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: clamp(64px, 7vw, 80px);
  padding: 10px 16px;
  border: 1.5px solid var(--mint-line-strong);
  border-radius: 18px;
  background: #FFFEF8;
  color: var(--evergreen-soft);
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.w-progress.is-done { border-color: var(--container-line); background: #FFF6D1; color: var(--ink); animation: qPop 260ms var(--ease-out); }
.w-progress.is-bad { border-color: #F3B3B3; background: #FFF1F0; color: #8C3B3B; animation: qPop 260ms var(--ease-out); }
.w-progress-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface-sunk); color: var(--evergreen-soft); }
.w-progress.is-done .w-progress-icon { background: var(--mint-action); color: #FFFEF8; }
.w-progress.is-bad .w-progress-icon { background: var(--coral); color: #FFFEF8; }

/* Share Learn's bar-button styling and interactions; only reserve its width. */
.w-action-slot .bar-button{flex:none;width:140px;min-width:140px;align-self:center;}
.w-progress-icon svg { width: 22px; height: 22px; }
.w-progress-body { flex: 1; min-width: 0; display: grid; gap: 7px; }
.w-progress-body strong { font-size: 1rem; }
.w-bar { display: block; height: 12px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.w-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--mint-action); transition: width 260ms var(--ease-out); }
.w-progress-num { flex: none; font-weight: 900; font-size: 1.02rem; color: var(--gold-deep); min-width: 44px; text-align: right; }

@media (max-width: 639px) {
  .w-head { gap: 6px; }
  .w-hear { width: 42px; min-width: 42px; height: 42px; }
  .w-case-btn { min-height: 34px; padding: 6px 12px; font-size: .78rem; }
  .w-bar-card { padding: 8px 10px; border-radius: 16px; }
  .w-pen { width: 27px; height: 27px; }
  .w-pen-current { width: 38px; height: 38px; }
  .w-tool { min-height: 40px; padding: 7px 12px; font-size: .78rem; }
  .w-canvas-wrap { aspect-ratio: 4 / 3; border-radius: 16px; }
  .w-progress { flex-wrap: wrap; gap: 10px; min-height: 58px; padding: 9px 12px; }

  .w-progress-body strong { font-size: .88rem; }
  .w-bar { height: 9px; }
  .w-progress-num { font-size: .88rem; min-width: 38px; }
}



/* Arabic positions replace the English case switch. */
.writing-workspace .w-form-choice{display:flex;align-items:center;flex:none;}
.writing-workspace .w-head{min-width:0;flex-wrap:wrap;}
.writing-workspace #w-form{width:148px;min-width:148px;flex:none;justify-content:center;}
.writing-workspace #w-form .w-case-btn{width:100%;white-space:nowrap;}
.writing-workspace #w-form:focus-visible{outline:3px solid var(--evergreen);outline-offset:3px;}
.writing-workspace .write-shell.has-context{grid-template-rows:auto minmax(320px,1fr) auto;}
.writing-workspace .w-context-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 18px;text-align:center;direction:rtl;font-size:.8rem;line-height:1.7;color:var(--evergreen);padding:10px 16px 16px;}
.writing-workspace .w-context-note{position:relative;}
.writing-workspace .w-context-note::before{content:"";position:absolute;top:-6px;inset-inline:24px;height:1.5px;background:#EEE5CF;pointer-events:none;}
.writing-workspace .w-context-example{font-family:'Scheherazade New',serif;font-size:1.65rem;line-height:1.6;white-space:nowrap;}
.writing-workspace .w-context-example mark{color:#B5263A;background:transparent;}
.writing-workspace .write-shell{background-image:linear-gradient(155deg,rgba(255,255,255,.72),rgba(255,255,255,0) 38%);box-shadow:var(--panel-shadow),inset 0 2px 1px rgba(255,255,255,.92),inset 0 -2px 5px rgba(23,62,56,.045);}
.writing-workspace .w-head,.writing-workspace .w-progress{color:var(--evergreen);}
.writing-workspace .toy-button:not(.bar-button){display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:var(--button-bg,#fff);color:var(--evergreen);}
.writing-workspace .toy-button::before,.writing-workspace .toy-button::after{content:none;}
.writing-workspace .w-progress-body{direction:rtl;text-align:right;}
.writing-workspace .write-feedback{font-size:1rem;line-height:1.6;min-height:0;color:inherit;text-align:right;}
.writing-workspace .w-action-slot{display:flex;flex:none;}
.writing-workspace .toy-button:focus-visible,.writing-workspace .letter-tile:focus-visible{outline:3px solid var(--evergreen);outline-offset:3px;}
.writing-workspace .w-bar-fill{margin-inline-start:0;}
@media(max-width:1023px){
 .writing-workspace{grid-template-columns:minmax(0,1fr);}
 .writing-workspace .tray-column{order:-1;}
 .writing-workspace .stage-column{order:0;}
 .writing-workspace .panel.tray{min-height:0;gap:10px;}
 .writing-workspace .letter-grid{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:7px 4px 14px;gap:12px;}
 .writing-workspace .letter-tile{flex:0 0 64px;width:64px;height:64px;scroll-snap-align:center;}
 .writing-workspace .write-shell{overflow:visible;grid-template-rows:auto auto auto;}
 .writing-workspace .w-head{min-width:0;flex-wrap:wrap;justify-content:center;gap:10px;}
 .writing-workspace .w-group{flex-wrap:wrap;justify-content:center;}
 .writing-workspace .w-bar-card{overflow:visible;}
 .writing-workspace .w-pen-menu{position:absolute;top:calc(100% + 7px);right:0;}
 .writing-workspace .w-pen-menu .w-pen{width:44px;height:44px;}
 .writing-workspace .w-progress{min-height:88px;}
 .writing-workspace .w-pen-current,.writing-workspace .w-hear,.writing-workspace .w-tool{min-width:44px;min-height:44px;}
}
@media(max-width:639px){
 .writing-workspace .w-head{flex-direction:column;}
 .writing-workspace .w-group{gap:7px;}
 .writing-workspace .w-tool-actions{gap:5px;}
 .writing-workspace .w-progress{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;}
 .writing-workspace .w-progress-icon{grid-column:1;grid-row:1;width:32px;height:32px;}
 .writing-workspace .w-progress-body{grid-column:2 / -1;grid-row:1;}
 .writing-workspace .w-progress-num{grid-column:2;grid-row:2;justify-self:end;}
 .writing-workspace .w-action-slot{grid-column:3;grid-row:2;}
 .writing-workspace .write-feedback{font-size:.85rem;}
 .writing-workspace .w-canvas-wrap{aspect-ratio:4 / 3;}
 .writing-workspace .w-pen-menu{right:auto;left:50%;transform:translateX(-50%);}
}
/* Keep the six phone tools together; positions get a full second row. */
@media(max-width:599px) and (orientation:portrait){
 .writing-workspace .w-bar-card{padding-inline:5px;position:relative;z-index:2;container-type:inline-size;}
 .writing-workspace .w-head.is-circle-tools{--write-tool-size:clamp(34px,calc((100cqw - 10px) / 6),44px);flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:7px 2px;}


 .writing-workspace .is-circle-tools :is(.w-tool,.w-hear,.w-single-switch,.w-pen-current){flex:none;width:var(--write-tool-size);min-width:var(--write-tool-size);height:var(--write-tool-size);min-height:var(--write-tool-size);padding:0;border-radius:50%;justify-content:center;}
 .writing-workspace .is-circle-tools .w-single-switch{padding:3px;}
 .writing-workspace .is-circle-tools .w-case-btn{width:100%;height:100%;min-width:0;min-height:0;padding:0;border-radius:50%;font-size:0;}
 .writing-workspace .is-circle-tools .w-case-btn::after{content:attr(data-compact-label);font-size:11px;line-height:1;}
 .writing-workspace .is-circle-tools .w-tool>span{display:none;}
 .writing-workspace .is-circle-tools .w-tool svg{width:20px;height:20px;}
 .writing-workspace .is-circle-tools .w-pen-menu{display:grid;grid-template-columns:repeat(2,44px);gap:6px;width:max-content;padding:6px;left:auto;right:0;transform:none;}
 .writing-workspace .is-circle-tools .w-pen-menu[hidden]{display:none;}
}

/* Shared Arabic surfaces; the footer is outside the drawable canvas. */
.writing-workspace .w-bar-card{width:100%;margin-inline:auto;}
.writing-workspace .w-drawing-area{position:relative;min-height:0;}
.writing-workspace .w-canvas{position:absolute;inset:0;width:100%;height:100%;}
.writing-workspace .w-progress{min-height:88px;}
.writing-workspace :is(.w-tool,.w-hear,.w-pen-current):hover:not(:disabled){background:#FFF1CB;}
.writing-workspace .w-tool.is-on{--button-bg:var(--surface-sunk);color:var(--ink);border-color:var(--gold-deep);}
.writing-workspace .w-progress.is-done .w-progress-icon{background:var(--gold);color:var(--ink);}
@media(max-width:1023px){
 .writing-workspace .write-shell,.writing-workspace .write-shell.has-context{grid-template-rows:auto auto auto;}
 .writing-workspace .w-canvas-wrap{height:auto;aspect-ratio:auto;grid-template-rows:auto auto;}
 .writing-workspace .w-drawing-area{height:clamp(280px,55vw,420px);}
}

@media(max-width:599px) and (orientation:portrait){
 .writing-workspace .w-head.is-circle-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 2px;justify-items:center;}
 .writing-workspace .is-circle-tools #w-form{grid-column:1 / 4;width:148px;min-width:148px;height:52px;border-radius:999px;padding:4px;}
 .writing-workspace .is-circle-tools #w-guide{grid-column:4 / 6;width:76px;min-width:76px;height:52px;border-radius:999px;padding:4px;}
 .writing-workspace .is-circle-tools :is(#w-form,#w-guide) .w-case-btn{font-size:.82rem;border-radius:999px;}
 .writing-workspace .is-circle-tools :is(#w-form,#w-guide) .w-case-btn::after{content:none;}
}