/* East Coast Muslim engine: the visitor part of the desk module (Phase 5, the visitor builder).
   1. The place page's reviews region (ecm/place-reviews), in the approved look of design/pages/place.html,
      "Ratings and reviews". The page is public and cached; this file is a plain same-origin stylesheet.
   2. The signed-in screens /correct/, /add/ and /review/: the star rating input, the folded report forms, the
      hours form, the quoted review.
   3. The pin step of /add/ (D63): the draggable pin on the site's own map, and the buttons that move it.
   Kit tokens only (tokens.css), so light and dark both follow the theme. Every class here was grepped first in the
   theme's and the engine's stylesheets and scripts: none existed. */

/* 1. Ratings and reviews ------------------------------------------------------------------------------------------ */
.pl-rating{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4) var(--sp-6);align-items:center;padding:var(--sp-4);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-m);margin-bottom:var(--sp-5)}
@media (min-width:640px){.pl-rating{grid-template-columns:auto minmax(0,1fr)}}
.pl-rating__big{display:flex;flex-direction:column;gap:.35rem}
.pl-rating__big > *{margin:0}
.pl-rating__num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:2.75rem;line-height:1}
.pl-rating__count{font-size:var(--fs-sm);color:var(--muted)}
.pl-stars{display:inline-flex;gap:3px;vertical-align:middle}
.pl-star{display:block;width:1.05rem;height:1.05rem;background:var(--rule);clip-path:polygon(50% 0%,61.8% 35.4%,98% 35.4%,68.8% 57.3%,79.4% 91.6%,50% 70.4%,20.6% 91.6%,31.2% 57.3%,2% 35.4%,38.2% 35.4%)}
.pl-star.is-on{background:var(--accent-ink)}
.pl-star.is-part{background:linear-gradient(90deg,var(--accent-ink) var(--fill),var(--rule) var(--fill))}
.pl-bars{margin:0;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.pl-bars > div{display:grid;grid-template-columns:4.25rem minmax(0,1fr) 1.75rem;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm)}
.pl-bars dt{color:var(--muted)}
.pl-bars dd{margin:0}
.pl-bars dd:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.pl-bar{display:block;height:.6rem;background:var(--tint);border-radius:var(--radius-pill);overflow:hidden}
.pl-bar i{display:block;height:100%;background:var(--link);border-radius:inherit}
.pl-reviews{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.pl-review{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-m);padding:var(--sp-4);min-width:0}
@media (min-width:760px){.pl-review{padding:var(--sp-5)}}
.pl-review__head{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem var(--sp-3);margin-bottom:var(--sp-3)}
.pl-review__who{font-size:1.0625rem;font-weight:800;margin:0;overflow-wrap:anywhere}
.pl-review__date{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.pl-review__body{max-width:var(--measure);overflow-wrap:anywhere}
.pl-review__body > p{margin:0}
.pl-review__body > p + p{margin-top:var(--sp-2)}
.pl-reply{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--tint);border-left:4px solid var(--link);border-radius:var(--radius-s);overflow-wrap:anywhere}
.pl-reply > *{margin:0}
.pl-reply > * + *{margin-top:.35rem}
.pl-reply__who{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-weight:700;font-size:var(--fs-sm)}
.pl-reply__who .ecm-icon{width:1.125rem;height:1.125rem;color:var(--link)}
.pl-reply__who time{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.pl-review__tools{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.pl-review__tools .ecm-btn--quiet{padding-inline:0;min-height:40px;font-size:var(--fs-sm)}
.ecm-reviews .pl-sec__head .ecm-btn{flex:none}

/* 2. The visitor screens ------------------------------------------------------------------------------------------- */
/* The star rating: five radio choices, the stars drawn as on the place page, the words beside them. */
.ecm-rate__opt > span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem}
.ecm-rate__words{color:var(--ink)}
.ecm-rate .pl-star{width:1.2rem;height:1.2rem}

/* One report form per fold: a summary row a thumb can hit, the form inside. */
.ecm-fold{border:1px solid var(--rule);border-radius:var(--radius-m);background:var(--surface);min-width:0}
.ecm-fold + .ecm-fold{margin-top:var(--sp-3)}
.ecm-fold__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:52px;padding:var(--sp-3) var(--sp-4);font-weight:700;color:var(--ink);cursor:pointer;list-style:none;border-radius:var(--radius-m)}
.ecm-fold__sum::-webkit-details-marker{display:none}
.ecm-fold__sum::after{content:"";flex:none;width:.55rem;height:.55rem;margin:-.2rem .2rem 0 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.ecm-fold[open] > .ecm-fold__sum::after{transform:rotate(225deg);margin-top:.25rem}
.ecm-fold__sum:hover{color:var(--link)}
.ecm-fold__sum:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ecm-fold__body{padding:0 var(--sp-4) var(--sp-5)}
.ecm-fold__body > p{margin:0 0 var(--sp-4)}
.ecm-fold__body .ecm-form{gap:var(--sp-4)}

/* The hours form: a day per row; two time boxes and "Closed" side by side from 380 px, "Closed" under them below. */
.ecm-hoursform{gap:var(--sp-2)}
.ecm-hoursform__day{margin:0;padding:var(--sp-3) 0 0;border:0;border-top:1px solid var(--rule);min-width:0}
.ecm-hoursform__day legend{padding:0;margin-bottom:var(--sp-2);font-weight:700}
.ecm-hoursform__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-3);align-items:end}
.ecm-hoursform__closed{grid-column:1 / -1;min-height:40px;padding:.2rem 0 0}
@media (min-width:380px){
  .ecm-hoursform__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .ecm-hoursform__closed{grid-column:auto;align-self:end;min-height:48px;padding:0}
  .ecm-hoursform__closed input{align-self:center}
  .ecm-hoursform__closed span{align-self:center;padding-top:0}
}
.ecm-hoursform__time{display:flex;flex-direction:column;gap:.25rem;min-width:0;font-size:var(--fs-sm);color:var(--muted)}
.ecm-hoursform__time .ecm-input{width:100%;min-width:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1rem;padding-inline:.6rem}

/* A review quoted on its own screen (the writer's own, or the one being reported). */
.ecm-rv-quote,.ecm-rv-mine{margin:0;padding:var(--sp-4);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-m);overflow-wrap:anywhere}
.ecm-rv-quote > *,.ecm-rv-mine > *{margin:0}
.ecm-rv-quote > * + *,.ecm-rv-mine > * + *{margin-top:var(--sp-2)}

/* The one-tap form: its button is the screen's main action and fills a phone's width. */
.ecm-form--tap .ecm-form__actions .ecm-btn{flex:1 1 16rem}
.ecm-add-dupes .ecm-screen__list{margin:var(--sp-2) 0}

/* 3. The pin step of /add/ (owner decision D63, 2026-10-19) ---------------------------------------------------------- */
/* Phase 4's map component (theme ecm.css, .ecm-map) taller, so a thumb can drag the pin; the kit's pin filled for a
   map, Beacon with a Deep Water edge, its tip on the point; the buttons that move it; the sentence that says where it is.
   Every class below was grepped first in the theme's and the engine's stylesheets and scripts: none existed. */
.ecm-pinpick{--map-h:20rem}
@media (min-width:760px){.ecm-pinpick{--map-h:26rem}}
.ecm-pinpick .ecm-map__plaque--pin{max-width:22rem}
.ecm-pinpick__pin{display:block;width:44px;height:52px;margin:0;padding:0 6px 0;border:0;background:none;cursor:grab;touch-action:none;filter:drop-shadow(0 1px 1.5px rgba(11,42,58,.45))}
.ecm-pinpick__pin:active{cursor:grabbing}
.ecm-pinpick__pin svg{display:block;width:32px;height:40px;margin:12px 0 0}
.ecm-pinpick__pin:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-radius:var(--radius-s)}
.ecm-pinpick__shape{fill:var(--accent);stroke:var(--on-accent);stroke-width:2;stroke-linejoin:round}
.ecm-pinpick__dot{fill:var(--on-accent)}
.ecm-pinpick__tools{margin-top:var(--sp-3)}
.ecm-pinpick__tools[hidden]{display:none}
.ecm-pinpick__move{margin:0;padding:0;border:0;min-width:0}
.ecm-pinpick__move legend{padding:0;font-weight:700;color:var(--ink)}
/* The four buttons as a compass: North on top, West and East beside, South below (in that order for the keyboard). */
.ecm-pinpick__pad{display:grid;grid-template-columns:repeat(3,minmax(0,7.5rem));grid-template-areas:". n ." "w . e" ". s .";gap:var(--sp-2);margin:var(--sp-2) 0}
/* Each button is a 44 px touch target (review fix, 2026-10-19: the kit's small button is 40 px), so a phone without
   a fine pointer moves the pin; "Put the pin at the center of the map" too. */
.ecm-pinpick__pad .ecm-btn{width:100%;justify-content:center}
.ecm-pinpick__tools .ecm-btn{min-height:44px}
.ecm-pinpick__pad [data-ecm-pin-move="n"]{grid-area:n}
.ecm-pinpick__pad [data-ecm-pin-move="w"]{grid-area:w}
.ecm-pinpick__pad [data-ecm-pin-move="e"]{grid-area:e}
.ecm-pinpick__pad [data-ecm-pin-move="s"]{grid-area:s}
.ecm-pinpick__tools .ecm-fine{margin:var(--sp-2) 0 0}
.ecm-pinpick__said{margin:var(--sp-3) 0 var(--sp-4);font-weight:600;color:var(--ink)}
.ecm-pinpick__said:empty{display:none}