/* GiC — Recorder inline row v1
   Compact button-row style for the simplified recorder panel.
   Scoped to .gic-ah-recorder-inline so it cannot affect anything else. */

.gic-ah-recorder-inline{
  text-align:center;
}
.gic-ah-recorder-inline .gic-ah-record-status{
  font-size:.78rem;
  color:#6b7a76;
  margin-bottom:10px;
}
.gic-ah-recorder-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.gic-ah-recorder-inline .gic-ah-recorder-pill{
  border:1px solid #d8b76f;
  background:#fffaf0;
  color:#8f6a20;
  border-radius:999px;
  padding:9px 14px;
  font-size:.78rem;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.gic-ah-recorder-inline .gic-ah-record-button.gic-ah-recorder-pill{
  border-color:#0f514a;
  background:#0f514a;
  color:#fff;
}
.gic-ah-recorder-inline .gic-ah-recording{
  margin-top:10px;
}

/* GIC-ROUND-ICON-BUTTONS-V2-START
   Round icon buttons (listen / record / delete) matching the main
   card's .sound-btn look. Scoped to .gic-ah-recorder-inline only.
   The record icon is pure CSS (mask-image) so app.js overwriting the
   button's text on start/stop/error can never break the icon or
   cause a JS observer loop - nothing watches this button at all. */

.gic-ah-recorder-inline .gic-ah-recorder-icons{
  gap:14px;
}

.gic-ah-recorder-inline .gic-ah-icon-btn{
  width:42px;
  height:42px;
  flex:0 0 42px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(21,151,156,.18);
  background:linear-gradient(145deg,#15979c,#238f87);
  color:#fff;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(21,151,156,.17),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease;
}
.gic-ah-recorder-inline .gic-ah-icon-btn svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
}
.gic-ah-recorder-inline .gic-ah-icon-btn:active{
  transform:scale(.94);
}

/* Record button: text app.js injects is invisible; icon is CSS-only */
.gic-ah-recorder-inline .gic-ah-icon-record{
  font-size:0;
  line-height:0;
  color:transparent;
  position:relative;
}
.gic-ah-recorder-inline .gic-ah-icon-record::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:18px;height:18px;
  transform:translate(-50%,-50%);
  background-color:#fff;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2' width='6' height='11' rx='3' fill='white'/%3E%3Cpath d='M6 10a6 6 0 0 0 12 0h-2a4 4 0 0 1-8 0H6z' fill='white'/%3E%3Crect x='11' y='18' width='2' height='4' fill='white'/%3E%3Crect x='8' y='21' width='8' height='2' rx='1' fill='white'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2' width='6' height='11' rx='3' fill='white'/%3E%3Cpath d='M6 10a6 6 0 0 0 12 0h-2a4 4 0 0 1-8 0H6z' fill='white'/%3E%3Crect x='11' y='18' width='2' height='4' fill='white'/%3E%3Crect x='8' y='21' width='8' height='2' rx='1' fill='white'/%3E%3C/svg%3E");
}

/* Recording state (class toggled by app.js itself - untouched) */
.gic-ah-recorder-inline .gic-ah-icon-record.recording{
  background:linear-gradient(145deg,#e5433e,#c0221d) !important;
  border-color:rgba(192,34,29,.4) !important;
  animation:gicAhRecPulseV2 1s ease-in-out infinite;
}
.gic-ah-recorder-inline .gic-ah-icon-record.recording::before{
  width:16px;height:16px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2' fill='white'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2' fill='white'/%3E%3C/svg%3E");
}
@keyframes gicAhRecPulseV2{
  0%,100%{ box-shadow:0 8px 18px rgba(192,34,29,.35),inset 0 1px 0 rgba(255,255,255,.22); }
  50%{ box-shadow:0 8px 28px rgba(192,34,29,.6),inset 0 1px 0 rgba(255,255,255,.3); }
}

/* Delete button: gold/neutral, dimmed + disabled until a recording exists */
.gic-ah-recorder-inline .gic-ah-icon-delete{
  background:#fffaf0;
  border:1px solid #d8b76f;
  color:#8f6a20;
  box-shadow:none;
}
.gic-ah-recorder-inline .gic-ah-icon-delete:disabled,
.gic-ah-recorder-inline .gic-ah-icon-delete.is-disabled{
  opacity:.38;
  cursor:not-allowed;
}

/* Old text pills stay in the DOM for app.js but are not shown */
.gic-ah-recorder-inline [data-gic-play-recording],
.gic-ah-recorder-inline [data-gic-record-again]{
  display:none !important;
}
/* GIC-ROUND-ICON-BUTTONS-V2-END */

/* GIC-RECORDER-MERGE-V3-START
   Recorder is now merged into .gic-ah-audio-row itself (see template
   patch v3) instead of a separate section. This block only adjusts
   what changed because of that merge; the icon look/behavior rules
   from V2 above are untouched and still apply (buttons are still
   descendants of an element carrying .gic-ah-recorder-inline). */

/* Never let this row disappear. app.js force-hides whatever carries
   data-gic-speech-panel when a Grammar/Pronunciation/Language Kit
   tab opens - that used to just re-close the old recorder box
   (harmless, there was a button to reopen it), but this row now also
   holds Listen/Record and there is no reopen button anymore, so it
   must stay visible no matter what sets [hidden] on it. Higher
   specificity than the card-wide "[hidden]{display:none}" rule, so
   it wins regardless of load order. */
.gic-ah-audio-row[data-gic-speech-panel][hidden]{
  display:flex!important;
}

/* Let the status line wrap to its own line under the icons. */
.gic-ah-audio-row.gic-ah-recorder-inline{
  flex-wrap:wrap;
}
.gic-ah-audio-row.gic-ah-recorder-inline [data-gic-record-status]{
  flex:0 0 100%;
  text-align:center;
  color:#81908b;
  font-size:.72rem;
  margin-top:2px;
}

/* Match the round icon buttons to the existing Listen button size. */
.gic-ah-audio-row.gic-ah-recorder-inline .gic-ah-icon-btn{
  width:56px;
  height:56px;
  flex:0 0 56px;
}
.gic-ah-audio-row.gic-ah-recorder-inline .gic-ah-icon-btn svg{
  width:24px;
  height:24px;
}

/* Generic disabled dimming (V2 only had this for the delete icon). */
.gic-ah-recorder-inline .gic-ah-icon-btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}
/* GIC-RECORDER-MERGE-V3-END */

/* GIC-RECORDER-FIX-V4-START
   Fix: v2 hid any [data-gic-play-recording] element (that used to be
   an old text pill). The v3 icon button reuses that same attribute,
   so it was being hidden too. This override wins on specificity
   regardless of source order. Also unify all 4 icon sizes with the
   existing 62px Listen button so every icon in the row matches. */

.gic-ah-audio-row.gic-ah-recorder-inline [data-gic-play-recording]{
  display:inline-grid!important;
}

.gic-ah-audio-row.gic-ah-recorder-inline .gic-ah-icon-btn{
  width:62px!important;
  height:62px!important;
  flex:0 0 62px!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline .gic-ah-icon-btn svg{
  width:29px!important;
  height:29px!important;
}
/* GIC-RECORDER-FIX-V4-END */

/* GIC-RECORDER-FIX-V4-START
   Fix: v2 hid any [data-gic-play-recording] element (that used to be
   an old text pill). The v3 icon button reuses that same attribute,
   so it was being hidden too. This override wins on specificity
   regardless of source order. Also unify all 4 icon sizes with the
   existing 62px Listen button so every icon in the row matches. */

.gic-ah-audio-row.gic-ah-recorder-inline [data-gic-play-recording]{
  display:inline-grid!important;
}

.gic-ah-audio-row.gic-ah-recorder-inline .gic-ah-icon-btn{
  width:62px!important;
  height:62px!important;
  flex:0 0 62px!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline .gic-ah-icon-btn svg{
  width:29px!important;
  height:29px!important;
}
/* GIC-RECORDER-FIX-V4-END */

/* GIC-RECORDER-DOCK-V6-START
   Row = 4-column grid (cannot wrap). Same element/classes the v4
   selectors already match, plus one extra class for higher specificity. */

.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  flex-wrap:nowrap!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:400px!important;
  margin:10px auto 0!important;
  padding:16px 6px 12px!important;
  background:linear-gradient(180deg,#fefdfa 0%,#f6f3ea 100%)!important;
  border:1px solid rgba(201,162,74,.30)!important;
  border-radius:30px!important;
  box-shadow:inset 0 1px 0 #fff,0 10px 26px rgba(16,58,55,.07)!important;
}

/* the 4 buttons: fixed column each, always row 1 */
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-speak],
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record],
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-play-recording],
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-delete-recording]{
  grid-row:1!important;
  position:relative!important;
  top:0!important; left:0!important; right:auto!important; bottom:auto!important;
  float:none!important;
  display:inline-grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  width:56px!important; height:56px!important;
  min-width:0!important; min-height:0!important;
  flex:none!important;
  margin:0!important; padding:0!important;
  border-radius:50%!important;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-speak]{grid-column:1!important;}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record]{grid-column:2!important;}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-play-recording]{grid-column:3!important;}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-delete-recording]{grid-column:4!important;}

.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-speak] svg,
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-play-recording] svg,
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-delete-recording] svg{
  width:24px!important; height:24px!important;
}

/* Listen: teal, white glyph */
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-speak]{
  background:linear-gradient(145deg,#27a5aa 0%,#137c82 100%)!important;
  border:0!important;
  box-shadow:0 8px 18px rgba(19,124,130,.28),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-speak] svg path{fill:#fff!important;}

/* Record: the hero - bigger, deep green, gold halo.
   (kept dark so the existing white mic glyph stays visible; only
   background-color is set so a background-image glyph survives; the
   guards keep any recording-state style from being overridden) */
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record]{
  width:66px!important; height:66px!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record]:not(.is-recording):not(.recording):not([aria-pressed="true"]){
  background-color:#145650!important;
  border:0!important;
  box-shadow:0 10px 22px rgba(14,58,55,.32),0 0 0 4px #fff,0 0 0 5.5px rgba(201,162,74,.60),inset 0 2px 3px rgba(255,255,255,.18),inset 0 -6px 10px rgba(0,0,0,.18)!important;
}

/* Play: white outline (secondary) */
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-play-recording]{
  background:#fff!important;
  border:1.5px solid rgba(28,146,152,.55)!important;
  color:#1c9298!important;
  box-shadow:0 4px 12px rgba(28,146,152,.12)!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-play-recording] svg path{fill:currentColor!important;}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-play-recording]:disabled{
  background:#f6f8f7!important;
  border-color:#dfe7e4!important;
  color:#b4bfbb!important;
  box-shadow:none!important;
  opacity:1!important;
}

/* Delete: warm-gold ghost (secondary) */
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-delete-recording]{
  background:#fffaf0!important;
  border:1.5px solid rgba(201,162,74,.60)!important;
  color:#a98232!important;
  box-shadow:0 4px 12px rgba(201,162,74,.14)!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-delete-recording]:disabled{
  background:#fbf9f3!important;
  border-color:#ece5d3!important;
  color:#cdbf9d!important;
  box-shadow:none!important;
  opacity:1!important;
}

.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-speak]:active,
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-play-recording]:active:not(:disabled),
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-delete-recording]:active:not(:disabled){
  transform:scale(.94);
}

/* caption: small, faint, under the icons */
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record-status]{
  display:block!important;
  grid-column:1/-1!important;
  grid-row:2!important;
  margin:14px 0 0!important;
  padding:0 8px!important;
  text-align:center!important;
  font-size:.74rem!important;
  font-weight:500!important;
  letter-spacing:.04em!important;
  color:#9aa7a2!important;
  opacity:.9!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-local-recording],
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-speech-result]{
  grid-column:1/-1!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [hidden]{display:none!important;}
/* GIC-RECORDER-DOCK-V6-END */

/* GIC-RECORDER-CAPTION-V7-START
   Real text (whatever JS writes) is collapsed to font-size 0; the
   visible caption is a fixed ::after. */
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons .gic-ah-record-status[data-gic-record-status]{
  font-size:0!important;
  line-height:0!important;
  letter-spacing:0!important;
  margin:14px 0 0!important;
  text-align:center!important;
}
.gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons .gic-ah-record-status[data-gic-record-status]::after{
  content:"Listen, record and compare.";
  display:block;
  font-size:.74rem;
  line-height:1.4;
  font-weight:500;
  letter-spacing:.04em;
  color:#9aa7a2;
  text-align:center;
}
/* GIC-RECORDER-CAPTION-V7-END */

/* Recording state: red + pulse + stop glyph, whichever marker the app sets */
html body .gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record]:is(.is-recording,.recording,[aria-pressed="true"]),
main.gic-final-study-page .gic-ah-wrap .gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record]:is(.is-recording,.recording,[aria-pressed="true"]){
  background:linear-gradient(145deg,#e5433e,#c0221d)!important;
  border:0!important;
  color:transparent!important;font-size:0!important;line-height:0!important;text-indent:-9999px!important;
  box-shadow:0 8px 18px rgba(192,34,29,.35),0 0 0 4px #fff!important;
  animation:gicAhRecPulseV2 1s ease-in-out infinite!important;
}
html body .gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record]:is(.is-recording,.recording,[aria-pressed="true"]) > *:not(svg){display:none!important}
html body .gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record]:is(.is-recording,.recording,[aria-pressed="true"])::before{
  width:16px!important;height:16px!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2' fill='white'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2' fill='white'/%3E%3C/svg%3E")!important;
}

/* Hide any text app.js writes inside the record button; the icon is pure CSS */
html body .gic-ah-audio-row.gic-ah-recorder-inline.gic-ah-recorder-icons [data-gic-record]{
  font-size:0!important;line-height:0!important;color:transparent!important;
  text-indent:-9999px!important;overflow:hidden!important;white-space:nowrap!important;
}